Sound Effects and Music

Motivation

This section outlines how sound effects and music are integrated into the game using Howler.js and IJSRuntime to interact with Javascript code. It covers how to load, play, and manage audio assets.

Sound Effects and Music Implementation

The game leverages Howler.js, a JavaScript library, for sound effects and music playback.

Loading Audio Assets

• loadSound() method: The loadSound() method in the SoundService class is responsible for loading audio assets into the game.

  // SoundService.cs
            public async Task<Howl> loadSound(string soundName)
            {
                // The full path to the sound file is constructed by combining the base path
                // with the sound name provided as an argument. 
                var fullPath = Path.Combine(this.soundBasePath, soundName);
                // The method then uses the IJSRuntime service to invoke a JavaScript function, 
                // 'loadSound', passing in the full path to the audio file.
                var howl = await jsRuntime.InvokeAsync<Howl>("loadSound", fullPath);
                // The loaded Howl object is returned.
                return howl;
            }
            

  Example:

  // Example Usage
            var eatGhostSound = await soundService.loadSound("eatGhost.wav");
            

• JavaScript Function loadSound(): This JavaScript function handles the actual loading of the audio file.

  // wwwroot/js/sound.js
            window.loadSound = function (path) {
                // Create a new Howl object and load the sound file at the provided path.
                var howl = new Howl({
                    src: [path],
                    // The 'onload' event fires when the sound has finished loading. 
                    onload: function () {
                        // Once loaded, the howl object is returned. 
                        return howl;
                    }
                });
                // The howl object is returned.
                return howl;
            };
            

Playing Audio Assets

• playSound() method: The playSound() method in the SoundService class is responsible for playing loaded sounds.

  // SoundService.cs
            public async Task playSound(string soundName)
            {
                // Check if the sound is already playing.
                if (!soundPlaying.Contains(soundName))
                {
                    // If not playing, load the sound. 
                    var howl = await loadSound(soundName);
                    // Play the sound.
                    howl.play();
                    // Add the sound name to the list of currently playing sounds.
                    soundPlaying.Add(soundName);
                }
            }
            

  Example:

  // Example Usage
            await soundService.playSound("eatGhost.wav");
            

• JavaScript Function stopSound(): This function stops the current playing sound.

  // wwwroot/js/sound.js
            window.stopSound = function (soundName) {
                // Check if a sound is currently playing and stop it.
                if (soundPlaying.hasOwnProperty(soundName)) {
                    soundPlaying[soundName].stop();
                    // Remove the sound name from the list of currently playing sounds.
                    delete soundPlaying[soundName];
                }
            };
            

Music Management

• playMusic() method: The playMusic() method in the SoundService class starts playing the background music.

  // SoundService.cs
            public async Task playMusic()
            {
                // Check if the music is currently playing.
                if (!musicPlaying)
                {
                    // If not playing, load the music.
                    music = await loadSound("pacman.mp3");
                    // Play the music.
                    music.play();
                    // Set the musicPlaying flag to true.
                    musicPlaying = true;
                }
            }
            

• stopMusic() method: The stopMusic() method in the SoundService class stops the background music.

  // SoundService.cs
            public async Task stopMusic()
            {
                // Check if the music is currently playing.
                if (musicPlaying)
                {
                    // If playing, stop the music.
                    music.stop();
                    // Set the musicPlaying flag to false.
                    musicPlaying = false;
                }
            }
            

Summary

The game leverages Howler.js and IJSRuntime to implement a robust sound effects and music system. This system allows for loading, playing, and managing audio assets.