• Monday , 20 November 2017

Button Sound Effects Tutorial Audible HTML5 JavaScript Menu Systems

Code Canyon



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

3d Ocean

Related Posts

28 Comments

  1. Vishal Patel
    August 22, 2017 at 19:35

    why this not working in mobile browsers

  2. New Bee
    August 22, 2017 at 19:35

    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 !

  3. Mr DEZ
    August 22, 2017 at 19:35

    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!

  4. azoo ooze
    August 22, 2017 at 19:35

    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

  5. Paulo S. Medeiros
    August 22, 2017 at 19:35

    Thank you!!!

  6. Emily Kosovik-Jeffery
    August 22, 2017 at 19:35

    Thank goodness. This helped. Very simple.

  7. Kevin Crook
    August 22, 2017 at 19:35

    What if I wanted a different sound on each click while using only one button or a tag

  8. Amador Designs
    August 22, 2017 at 19:35

    nice video.

  9. The JohnShow
    August 22, 2017 at 19:35

    Nice

  10. The Vivos
    August 22, 2017 at 19:35

    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

  11. Lucas Vidal
    August 22, 2017 at 19:35

    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

  12. Unidos pelo Software!
    August 22, 2017 at 19:35

    thanks for help 😀

  13. Neural Blankes
    August 22, 2017 at 19:35

    Thank you so much for this tutorial. It goes over exactly what I was looking for.

  14. The_Neon_Lord
    August 22, 2017 at 19:35

    thx, this helped soo much

  15. Jacquelyn Edna
    August 22, 2017 at 19:35

    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.

  16. Justin Munce
    August 22, 2017 at 19:35

    Immediate thumbs up for "but first I'll show you the finished product what you're going to be learning today."

  17. Brandee Dudenhoefer
    August 22, 2017 at 19:35

    What about adding a sound without clicking and only hovering over an image?

  18. Daniel Sabo
    August 22, 2017 at 19:35

    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.

  19. klyne decem mayorga
    August 22, 2017 at 19:35

    it doesn't works in MOZILLA but it works in CHROME … i need ur help .. cuz  my theasis only work in MOZILLA

  20. shelly bhatia
    August 22, 2017 at 19:35

    how to add different sound on different button ????

  21. Sam Mason
    August 22, 2017 at 19:35

    Thank you so much. This is the first example that worked for me (of many).

  22. Ferreira Studios ®
    August 22, 2017 at 19:35

    And others browsers? How I can do it? One exampe…. Firefox, Safari…

  23. Pilar L. Davis Media
    August 22, 2017 at 19:35

    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.

  24. Puthy Mol
    August 22, 2017 at 19:35

    Thank you so much for this video

  25. Ramazan Gülen
    August 22, 2017 at 19:35

    bip,clik,or :Super thank

  26. ears4D
    August 22, 2017 at 19:35

    maannn George Clooney sounds a bit like you…

  27. Grilledfish11
    August 22, 2017 at 19:35

    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.

  28. Tara Nicole Payne
    August 22, 2017 at 19:35

    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.

Leave A Comment

You must be logged in to post a comment.