Audio Workshop 2 Seek and Volume Range Slider JavaScript Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial
In this part of the Audio Workshop we demonstrate how the range slider input can be used as a seek slider and a volume slider. We will also demonstrate how you can try to achieve a consistent range slider input appearance across different browsers.

source

29 thoughts on “Audio Workshop 2 Seek and Volume Range Slider JavaScript Tutorial”

  1. Adam, your code is a bit verbose on the "seek" function & I'm not sure that it would even be mobile device compatible.
    Here's all you really needed:

    <input type="range" id="audio-slider" min="0" value="0" step="1" onchange="seek()">

    var audio = new Audio();

    var audioSlider = document.getElementById("audio-slider");

    //set the currentTime to match users click on the progress bar

    function seek(){

    audio.currentTime = audioSlider.value;

    play();

    }

  2. Hello nice work but i have a problem, when i click on a part of the seek slider the slider roll back at the beginning and i can move the seek slider

  3. Hey great tuts Adam! Question: why is it NOT necessary to have the mousedown event (and other code) for the setVolume function? On the page, both behave in the same way.

  4. Adam. I had tried to make seeking option based on this tutorial. It doesn't work in chrome.

    Also i have problem when playing audio. It plays from begin when if i paused and get back in after 30 secs. I am not able get it from current position

  5. Hey Adam!

    Love your tutorials on Audio! If I change the dimensions of the range-slider to anything above 100px I get a really weird effect… What do I need to do to style the range slider above 100px and still get it to work?

  6. Hey Adam, I got the audio player to work perfectly. But as soon as I transferred the code into a website im developing I get the following error: 

    Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The value provided is not a number. 

    Everything is identical besides the path locations. Do you know why this could be happening?

  7. Awesome tutorial! This is probably a stupid question, but why did you use clientX and offsetLeft for the seeking slider, but just use the volumeSlider.value for the sound?

  8. Please can you make does buttons downloadable on your website?
    I  prefer working with what i had tutorial with.

    //Thanks for an awesome tutorials. you re d best!!

  9. can u please make a step by step lesson for html css and javascript…..not just the basics but complete…couz i already learned the basics…..and i cant find any other good professional tutorials…plz.help.ur the best teacher i can find

  10. That's it Adam you are from here on my no one favorite YouTuber! It happened to be my birthday today, and this video just made my day. If may be so bold and ask you guys have a "talk" again sometime, like when u where live streaming and answer to viewers questions. Great to here the big guys/girls talk! Keep up the amazing work!

  11. Hi Adam…I came across your website yesterday and was immediately impressed by the quality of your images AND the quality of your content. I subscribed after reading a comment that you made on another video about the importance of quality content when it comes to SEO. I am all about excellence, but for some reason that didn't transfer to my content strategy. Anyhow, just want to say thanks. THANKS! 🙂

  12. I KNOW IM STEPPING AHEAD OF THE TUTS BUT JUST WANTED TO BRING THIS UP EARLY THE PROBLEM IM HAVING THAT I HOPE U COVER IN THE SERIES IS HOW WOULD U STORE USERS UPLOADED MP3S ALBUMS ETC.. ON A CLOUD TO BE CALLED FROM A MYSQLI DATABASE LINK

Leave a Reply

Your email address will not be published. Required fields are marked *