D4mations.com

Audio Workshop 1 Play Pause Mute Buttons JavaScript Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Audio-Play-Pause-Mute-Buttons-Tutorial
Audio Workshop is a series of videos in which we will demonstrate how program the Audio object and the Web Audio API using JavaScript. I am going to leave this series open ended, just like we did for the Canvas Bootcamp series. I will also be reading viewer comments as we release each video for the series, which will make the series interactive from start to finish.

In this first video you can learn to set up an audio application, work with the Audio object in JavaScript, program play, pause and mute buttons, use CSS to style your custom components and more.

Original source

d4mer

, , , , , , , , , , , , , , , , , , , , , ,

41 responses to “Audio Workshop 1 Play Pause Mute Buttons JavaScript Tutorial”

  5. Adam, I'm running DW on a Mac OS X and followed the steps to this tutorial up to 5:46 but there's no audio. Do I have to use the entire directory for the song or just put audio/whatever.mp3? You have the coolest tutorial vids, man…thanks for your help!

    -Mikkel

  6. Hey!

    I have 2 questions here, if anyone could help me out and give me the relevant code it would be appreciated.

    My first question:

    I want to use Font Awesome Icons in replace of images for the icons, how would I achieve this in the code?

    My Second Question:

    I like the Play/Pause button, is there a way of adding a loading spinner from Font Awesome icons after someone clicks the play icon in case the audio doesn't load straight away, is there another function that could show the spinner until the audio is ready and then display the play/pause icons.

    Thanks, I would appreciate a prompt response as I am working to some deadlines here.

  14. +Adam Khoury So far, after finishing this first tut, things are working… except for this problem I am having. The icons for pause/play/etc. are not displaying at all even though I can hover my mouse over the area of where they would be placed and click to play/pause or mute/unmute… The icons themselves are black in color, tried on various background colors, with no luck. I know you said size doesn't matter in regards to the icons, but could it be they are too big (256×256)? I've viewed it in FF, Chrome, and even IE (all are most recent versions). If you, or anyone, could help me out then I'd greatly appreciate it!

  15. I know this went up a while ago, but I just saw it. It was very helpful!
    But I have problems that I did not hear addressed or could not find answers to in you video "Audio Workshop 1 – 6"
    Q: How do I stop the audio from auto playing when page loads? (Workshop 1)
    Q: How do I get this new audio player on my website? I am using Dreamweaver CC. (workshop 4)
    I listened up to your 6th video, LOVED IT!! You are the most detailed and helpful out of ALL the sites I have come across! Thank you

  16. Great stuff Adam.  If I want to use multiple play/pause buttons on a page using different audio for each, do have to duplicate all the code with different names for each button, or can some of the code be re-used?

  25. Great Tutorial as usual, Adam you deserve Golden Trophy  for your precious tutorial series. Is it possible to control SHOUTcast or IceCast controls, it would be great if you point it out. 

  27. Great Tutorial Adam. 
    Can you show us how to make a playlist and a current playing queue? Just like we see in the music streaming services. Whatever song on the entire site that you choose to play goes directly to the current playing queue. 

    Thanks. 

  32. Nice Video. Love the way you explain stuff in detail. I was wondering if we can sync lyrics and audio. If there is a way to that, I would really appreciate if you can do a video on that too. Thanks again for starting this series. 

  33. Great opening video Adam.  I noticed there is an effect like a pebble hitting water when you "click" play, pause, mute, etc. Is that something I missed in your code? Is it just chrome? Firefox and IE do the same?  I know I could just experiment and find out what happens on my computer but figure that perhaps others had the same question.  I hope part of this series will show us how to control streams other than just files in our server much like we can control play pause mute volume of video's we are displaying etc.

  40. Hey adam, id really like it, if you could show throughout the series, a bit like spotify where there are tracks and you can drag and drop a track into your play list folder. But the actual drag and drop motion of it if you can please that would be awesome 😀

  41. Adam thanks. I love the pace of your videos. Perfect and not a wasted moment. Just the facts and well edited I might add. I'm looking forward to learning audio stuff like how to generate tones or musical chords like G, G#, F etc. A client who is a piano teacher wanted like piano keys so when the kids click it played the note so they can play songs. I was stumped how to do it outside of Flash. Hopefully you will eventually get to stuff like that. Thanks.

Leave a Reply