Howler

I recently made a javascript application where I wanted an easy way to implement sounds. I wanted to be able to use a "click" event to activate a sound. I also wanted to be able to search for any kind of sound that I wanted. I didn't want to have to pick from a generic library of sounds.

After a bit of googling I found Howler.js. It looked like the exact thing I was looking for so I decided to go that route.

There were a few things that I liked about what Howler.js had to offer. The first is that a sound can play on top of another sound, so if you had a game where there was a lot going on it would give you room to expand. Also it gives you the option to play any audio clip you can find and download.

To get howler working there are a few quick steps that you need to dd (this is if you are using npm)

1. In the directory you want to use howler
   run: npm install holwer

2. Make sure that you include howler in your script. A quick google search of howler cdn will give you what you need for the src. Here is where I went for that.

https://cdnjs.com/libraries/howler

Link it in your script like this!

<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>

There are a few ways to create sounds at this point using howler. I think the easiest thing to do is to set a variable to the sound you want to make. In order to do this you need to have a sound file to pull from.

You can use any sounds you want, but getting access to them is the part that could trip you up. Don't worry though it is very easy.

I created a new folder in my project called audio. Then I found the sound that I wanted. Since I was making a game I figured that anything that sounded like an old Super Mario game would be a safe choice. So I went to this site.
https://themushroomkingdom.net/media/smb/wav
Downloaded a couple of sound clips and drug them to my audio folder.

So now we are to the point where you will set your variable to a sound. All you need to know is the filepath to the sound clip and you should be good to go. It will look something like this.

let sound2 = new Howl({
  src: ['../audio/smb_bump.wav']  
});

This is not the only way to do this. If you want different file types you can make that happen as well, but this was pretty simple, and it worked.

Now for the final implementation all you need to do is invoke the sound clip with the play(). Like this

 sound2.play()

There are other ways to make sounds clips in your project and there may be some easier ways. I thought howler was a good way to use something that was built for this. It has more functionalities that you can check out if that is something you are interested in!