Learn to Code via Tutorials on Repl.it!

← Back to all posts
Sound in HTML Tutorial 🔊
h
Cookiezz (65)

Hey everybody!

This is my first tutorial, so I know it can be better. Anyway, this tutorial is something that I recently learned, and is pretty useful when making things like games.
Here is an example of it being used in one of my games. Note: This game is still being developed


To play a sound you first need the sound downloaded on your computer. (I think you can also do it with a link, but in not sure) You need a source for the sound file. Create a new folder and name it whatever you want For example, I used "static".

Then create another folder inside for the sound. Name it whatever you want. I named mine "sounds".

Then upload your sound file. Click on the three dots next to Add folder/file. You should see "upload file". Click on that. Select your sound file.

Then drag you sound file into your 2nd folder. (The one named "sounds" for me) It should look like this afterwards:

Now you have to play the sound. To do that you have to define a function to play that sound. For ease, this should be done in JavaScript. I have typed what you need to replace in caps.

let YOURNAMESound = new Audio('YOURSOURCE')

Keep in mind that the first letter of your name should be capitalized as well as the "S" in Sounds and the "A" in Audio.

For the source, it should be 'NAME OF FIRST FOLDER/NAME OF SECOND FOLDER/NAME OF SOUND FILE.mp3'. For me, it is 'static/sounds/aud_chomp.mp3'.

Good job if you have made it this far!

Now all you have to do is play the sound. The function to do that is YOURNAMESound.play();.

I hope you find this tutorial helpful!


Common Q&A

Q: Where can I get sound files from?
A: Here is a good source to get sounds.

Q: How do I create a new folder?
A: You can create a new folder by clicking, "Add folder".

Q: Why isn't my code working?
A: Here is a checklist to fix it:

  • First letter of your name should be capitalized as well as the "S" in Sounds and the "A" in Audio
  • The names are spelled correctly
  • Make sure that you have a semicolon at the end of you sound function ChompSound.play();

If you have any additional questions that I have not covered, feel free to comment!

Comments
hotnewtop
mwilki7 (1134)

createjs master race

mwilki7 (1134)

@Cookiezz just the sound library i use if i want to play multiple sounds at once

Cookiezz (65)

@mwilki7 Thanks! Do you mind if I use it?