 Okay, this video is part of a series be sure to check out the previous videos by checking the playlist in the description of this video I hope that you're enjoying these videos so far and today. Well, let's quickly just review by looking at the game We've created so far We have this simple little game with two individual players Which now have different values for their velocity their speed on the x-axis and how high they can jump So the guy on the right it's a little faster than the guy on the left But the guy on the left can jump higher than the guy on the right they also collide with not only the bricks the world but each other and They can only jump when they're touching the ground What's a game without sounds adding some simple sounds and music to your game it can make it like right now, this is very bad just adding some music and some Some sounds to it can't help Livin it up some so let's go ahead and do that So we need to preload That data as well, so let's go ahead and go into our preload function here and use game dot load But this time instead of image we're gonna say audio Now just like before we're gonna give it one parameter here The first one will be how we're going to call this in the future I will just call it jump because this will be the sound that we jump It's just a sound effect that I got off some free sound effect website Next you're gonna give it an array so inside for interest inside brackets we are going to Give it the file name or file names is actually a better option now You have a few options here But it's important to see to remember that different browsers support different types of audio and video So this is important. It's not a big deal use ffmpeg or audacity or something to Convert the files so that you have at least an mp3 and an org file If you have those two you pretty much cover all major browsers problem is mp3s or proprietary format So certain browsers that are open source and truly free browsers May not support mp3 because they have to legally pay for license to do so but then there are ones that are proprietary browsers that Don't support org just because they choose not to but pretty much every browser supports one or the other So make a copy of the music in the two formats in this case. It's in the resource file I labeled one jump dot mp3 and the other one resource jump jump dot org now Phaser we'll look at those two options in the array and choose the appropriate one for the browser. So you're set Should be pretty much any browser mobile or desktop as long as it's a Made in the last couple years should be able to play one of those two files So here we have pre-loaded it, but now we need to add that sound into our game So let's go ahead and go down To where our player jumps which is under our player update and Here we have our jump controls. So if these are true, it will jump the player will jump and So let's go ahead in here and we're going to say to Music dot. I'm sorry music. We need to I'm getting him myself. We're gonna over music in a minute. We're gonna do var snd equals game dot add dot audio and We will add in here What we just labeled as jump mirror is not the file name But how we label that file and then we can say sound dot play There's options you can put in there that will go over momentarily But for now, let's just do that and we should be good to come in here and refresh Here are our players. I can move them around and when they jump So hopefully you can hear that through the mic We get a jump sound now That works probably could load this sound here when we create the player and And then play it so we're not reloading each time. We're just playing it But I'm just gonna leave it like this. I'm not gonna play around with that Without testing it before the tutorial. So that works again may not be the 100% most efficient way, but it works Okay, so now we have jumping sounds whoop-de-doo Let's move on to music which is gonna be very similar But we need to think about a few things here. First of all, we need to pick some music. So I went over to multi eight bits on YouTube, this is a gentleman named Simon Wessel, I believe you say you say his name He's a gentleman I've talked to online a couple of times He hasn't done any videos in a while, but he's put out a lot of good music on his YouTube channels Well, some tutorials on using milky tracker and I believe also some tutorials on LMS and His music is all in her creative commons non-commercial share alike and attribution, so I'm giving attribution here and Now the non-commercial part is something to take into account Uncommercial, you know, there's some gray area there when you're talking about non-commercial for example this music is going to be in my video here and also in this game I'm creating and I do make money off of YouTube ads and support. So does that make it commercial? I would say yeah, it does but luckily I've talked to Simon in the past and he's given me permission To use his music in my projects So when you do choose music and sound and images make sure that you're choosing ones that you have the rights to use if You know you want to stay clean to your game? So anyway, I've downloaded the song the caves of brain and he's got many other songs up there so go ahead and definitely check him out and I've actually converted this into three different files and I'll explain why Let me go ahead and look in here and I'll move into my resource folder here And I'm gonna list out all my Music files, so I got three files labeled music. I got music mp3 music og and music wave Okay As I said before if you just do mp3 and og you should be pretty set and most browsers Don't state they support wave, but many of them do but why would I use a wave? They're much larger files. In fact just to get this one down to double the size of the mp3 in the og file Which I could compress them more as well I had to compress the wave file quite a bit quality still pretty good But I also had to convert it to mono because with the stereo tracks. This was over eight megabytes So why would I care about putting a wave in there if mp3 and og? Cover everything and the answer is simple mp3 and ogs take much longer to decode with a short little file like the jump sound It's not a big deal, but with a music song. That's two or three minutes long it could take Well, it takes my desktop computer a few seconds to decode both mp3 and og But a Cell phone it could take five to ten seconds for it to decode the music to To decode it so it can be played now That same phone can definitely download and especially if you've already cached the music file much faster than it takes to decode it It only takes a few seconds to download this where it takes a Much longer to decode these so I put all three options in there if the browser can use a wave file It's going to load the song a lot faster Otherwise your game is going to start going and the music won't start for a little bit later Now there's another way around this you can avoid the wave thing and use just just og or mp3 And there is a way to check to see and wait until the audio it has Decompressed before starting your game so it adds a little bit load time to your game But the music starts appropriately so yeah, so basically you have three options Put the wave file in there which is going to increase your download time, which is minimal Starts your game with either an mp3 or og and the music might be a little delayed to start or use an mp3 or og and Have your game delayed until the music's ready I'm just going to go and use the wave file so Let's go ahead and go back into our JavaScript file here. I got to go back into the correct folder and Going back up to our preload so so pre loading and decoding are two different things The file will still preload, but it's not necessarily Decoded until you go to play it So here I'm going to create another audio file or another audio element called music. It's in the same folder That's called music music and of course I'm going to put another option in here Called the resources folder music wave I Will save that f12 or f11 Sorry, I'm talking myself when I say f11. That's just to get out a full screen mode for that f5 here. Oh That's right We preloaded it, but we haven't played it yet. Let's go ahead and do that f11 here and I'm going to come down here to our create Well, you put it up top here so that it gets going right away even though all this is going to run in no time So we're going to say Music so we're creating an element called music and we're going to use game dot add dot audio and We called it up top music and then here we're going to say Music dot play just like we played the sound, but as I said you can pass other options to the play function and what I'm going to do here and Now this is going to be a bad part of the tutorial because I should have looked up this. This is what I always use for music But I can't remember what all these options are All I know is that this sets it one of these I believe is volume I think is this one one I think is full volume and I think true is that we're looping it so the music will continuously loop That's nothing you can do. You can use shorter music files that loop I Don't remember what these first two options are though, and I apologize for that I should have been a little more prepared for the tutorial kind of winging some of these So we're gonna go ahead and save this and now we'll refresh our game And the music starts up pretty much right away again I'm on a desktop so it'd be faster than the mobile but using the wave file even on a mobile device It loads fairly quick And that's it so we looked over adding our jump sounds and Our music which will loop continuously and That's it for this tutorial. I thank you for watching I hope you enjoyed the tutorial if you did be sure to like subscribe share and comment if you want to become a Supporter be sure to go to my patreon page. That's patreon.com forward slash metal x1000 you can get Early release videos there. You also get to vote on videos and other Good stuff like that. I do. Thank you for watching. Please visit my website films by Chris comm It's Chris with a cage linked to that in the description as well Basically check out the description of the video for everything and as always I hope that you have a great day