Lesson Code: http://www.developphp.com/video/JavaScript/Button-Sound-Effects-Tutorial-Audible-Menu-Systems
In this tutorial we will demonstrate how to make an audible HTML5 menu system using JavaScript driven html5 sound objects. For creating elements that play sound when they are interacted with on the page. You can find and download tons of free bleep and click sounds for your audible menu systems by doing a little searching on the web right now. Try your best to find a very short length sound file. MP3 files that are short beeps or fast clicks are best for button sounds. Once you get some cool button sound effects downloaded, you are ready to begin this simple lesson. We also have a tutorial on file that shows how to create your very own custom button sounds in FruityLoops: http://www.youtube.com/watch?v=CgFGJRnnvRo
Original source
28 responses to “Button Sound Effects Tutorial Audible HTML5 JavaScript Menu Systems”
why this not working in mobile browsers
Very helpful 😀 thanks
but how do i make it stop when i click again ?
I tried to make this function :
function stopIt(){
if(_waterFalls.play() == true){
_waterFalls.pause();
}
}
and then i put it in onclick="stopIt()"
but it didnt work :/
help me out !
I know this vid is old but Oh My God bro you are hilarious! The way you started off the tutorial by saying click & beep in that tone of voice had my stomach hurting i laughed so hard!! That was great! LOLOL hahahahhaha!! glad i stumbled across this vid and tut, it helps me out alot and is very insightful for me too learn more and venture through coding on my own without help. I have some questions for you if you feel like messaging me back i'd appreciate it!
if u want to put another sound just insted bleep to any thing
for example
<script>
var bleep = new Audio
bleep.src = "career.mp3" ;
look this example
var cow= new Audio
cow.src= "lottery.mp3" ;
</script>
<body>
<a href="#" onmousedown="cow.play ( ) ;">Home</a>
</body>
and done
Thank you!!!
Thank goodness. This helped. Very simple.
What if I wanted a different sound on each click while using only one button or a tag
nice video.
Nice
Your videos are really useful, I'd like each button to play a different sound, I guess it'd just be a minor modification to this, could you give me a hint? thanks, thumbs up
could teach how to make that button that when hover over him he makes a sound, without clicking the button, just passing the mouse over even
thanks for help 😀
Thank you so much for this tutorial. It goes over exactly what I was looking for.
thx, this helped soo much
Hi do I have to download the bleep.mp3 into my folder? I'm using this to create a game for my project in school using HTML5 but it does not seem to work.
Immediate thumbs up for "but first I'll show you the finished product what you're going to be learning today."
What about adding a sound without clicking and only hovering over an image?
Sir, after scouring the web for 10 solid hours, researching forum after forum, sifting through complex code and trying unsuccessfully to add sound effects for my imagemap, I stumbled across this and in under 5 minutes, you enabled me to complete my task. You have my deepest gratitude. Tomorrow I will attempt to link different sounds to different areas. I knew there had to be a simple solution and those forum people are in a world all their own. Thanks again.
it doesn't works in MOZILLA but it works in CHROME … i need ur help .. cuz my theasis only work in MOZILLA
how to add different sound on different button ????
Thank you so much. This is the first example that worked for me (of many).
And others browsers? How I can do it? One exampe…. Firefox, Safari…
I saw that someone asked about the code for NOT using the nav links but instead using an image but I'm sorry I did not understand your reply to them. Is there a way to not do any of the navigation but instead just have the sound play upon clicking an image.
Thank you so much for this video
bip,clik,or :Super thank
maannn George Clooney sounds a bit like you…
Damn it! I just want you to know Mr. Khoury that everytime I watch your videos, I ended up changing sections of my website. By the way, thank you for sharing these videos. I'm learning so much. Thing is..the more I learn, the more I feel like I need to know more. Thank you.
Is it possible to have a sound that is too long? For example, I am trying to use samples that are exactly 1 second long. Is that to long for a web browser like chrome to play? idk maybe its the code i am using.
<!DOCTYPE html>
<html>
<head>
<script>
var a = new Audio();
a.src = '/MP3/SEION/a.mp3';
</script>
</head>
<body>
<a href="#" onmousedown="a.play()">あ</a>
</body>
</html>
okay I made the sound shorter and it still does not play on click. Please help.
I tried to change the code so that it matches yours. I tried testing it in chrome, firefox, and IE.
<!DOCTYPE html>
<html>
<head>
<script>
var bleep = new Audio();
bleep.src = '/MP3/SEION/bleep.mp3';
</script>
</head>
<body>
<nav id="nav">
<a href="#" onmousedown="bleep.play()">Home</a>
<a href="#" onmousedown="bleep.play()">About Us</a>
<a href="#" onmousedown="bleep.play()">Services</a>
<a href="#" onmousedown="bleep.play()">Contact</a>
</nav>
</body>
</html>
Still does not work.
PLEASE HELP.
btw I am the 99,000th subscriber.
update
I figured out that it does not like it when it is in a different folder. Moved mp3 into the same folder as the .html and updated the code to point to that directory, and it works fine. however I would like to see a solution where i can put my mp3's into different folders.