Input range slider not working in chrome? works in Firefox

Question

I'm currently using an input range slider to control the position of an audio track. In firefox it's working perfectly, however in Chrome The slider is stuck and doesn't move when dragged. I also have a function which updates it's position by 1 each time the currentTime of the audio changes and this may be the problem? However like I said it works perfectly on Firefox.

Any help would be greatly appreciated.

HTML:

<audio id="music">
  <source src="media/mexico-music.mp3" type="audio/mpeg"/>
</audio>
  <button id="playpausebtn" class="play"></button>
  <span id="curtimetext">00:00</span>
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
  <span id="durtimetext">00:00</span>
  <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">

JavaScript:

$(document).ready(function () {
    var music = document.getElementById("music"),
        playpausebtn = document.getElementById("playpausebtn"),
        seekslider = document.getElementById("seekslider"),
        volumeslider = document.getElementById("volumeslider"),
        curtimetext = document.getElementById("curtimetext"),
        durtimetext = document.getElementById("durtimetext"),
        seeking,
        seekto,
        curtimetext,
        durtimetext;
    // Reset slider back to 0 
    seekslider.value = 0;


    // PLAY/PAUSE AUDIO
    function playAudio() {
        if (music.paused) {
            music.play();
            playpausebtn.className = "pause";
        } else {
            music.pause();
            playpausebtn.className = "play";
        }
        music.addEventListener('ended', function () {
            playpausebtn.className = "Play";
        });
    }

    // SEEK MUSIC POSITION
    function seek(event) {
        if (seeking) {
            seekto = music.duration * (seekslider.value / 100);
            music.currentTime = seekto;
        }
    }

    // VOLUME CONTROL
    function setVolume() {
        music.volume = volumeslider.value / 100;
    }

    // UPDATE MUSIC TIME
    function seektimeupdate() {
        var newtime = music.currentTime * (100 / music.duration);
        seekslider.value = newtime;
        var curmins = Math.floor(music.currentTime / 60),
            cursecs = Math.floor(music.currentTime - curmins * 60),
            durmins = Math.floor(music.duration / 60),
            dursecs = Math.floor(music.duration - durmins * 60);
        // Adds 0 infront of single digit numbers
        if (cursecs < 10) { cursecs = "0" + cursecs; }
        if (dursecs < 10) { dursecs = "0" + dursecs; }
        if (curmins < 10) { curmins = "0" + curmins; }
        if (durmins < 10) { durmins = "0" + durmins; }
        curtimetext.innerHTML = curmins + ":" + cursecs;
        durtimetext.innerHTML = durmins + ":" + dursecs;
    }

    //EVENT HANDLERS
    playpausebtn.addEventListener("click", playAudio);
    seekslider.addEventListener("mousedown", function (event) { seeking = true; seek(event); });
    seekslider.addEventListener("mousemove", function (event) { seek(event); });
    seekslider.addEventListener("mouseup", function () { seeking = false; });
    volumeslider.addEventListener("mousemove", setVolume);
    music.addEventListener("timeupdate", seektimeupdate);
});

azs06 azs06 · Accepted Answer · 2017-03-10T19:53:06

You are redeclaring curtimetext,durtimetext, also you don't need to use combination of mouseup, mousedown event, you could just use change event.

Working example.

$(document).ready(function () {
    var music = document.getElementById("music"),
        playpausebtn = document.getElementById("playpausebtn"),
        seekslider = document.getElementById("seekslider"),
        volumeslider = document.getElementById("volumeslider"),
        curtimetext = document.getElementById("curtimetext"),
        durtimetext = document.getElementById("durtimetext"),
        seeking,
        seekto;

    // Reset slider back to 0 
    seekslider.value = 0;


    // PLAY/PAUSE AUDIO
    function playAudio() {
        if (music.paused) {
            music.play();
            playpausebtn.className = "pause";
        } else {
            music.pause();
            playpausebtn.className = "play";
        }
        music.addEventListener('ended', function () {
            playpausebtn.className = "Play";
        });
    }

    // SEEK MUSIC POSITION
    function seek(event) {
            seekto = music.duration * (this.value / 100);
            music.currentTime = seekto;
    }

    // VOLUME CONTROL
    function setVolume() {
        music.volume = volumeslider.value / 100;
    }

    // UPDATE MUSIC TIME
    function seektimeupdate() {
        var newtime = music.currentTime * (100 / music.duration);
        seekslider.value = newtime;
        var curmins = Math.floor(music.currentTime / 60),
            cursecs = Math.floor(music.currentTime - curmins * 60),
            durmins = Math.floor(music.duration / 60),
            dursecs = Math.floor(music.duration - durmins * 60);
        // Adds 0 infront of single digit numbers
        if (cursecs < 10) { cursecs = "0" + cursecs; }
        if (dursecs < 10) { dursecs = "0" + dursecs; }
        if (curmins < 10) { curmins = "0" + curmins; }
        if (durmins < 10) { durmins = "0" + durmins; }
        curtimetext.innerHTML = curmins + ":" + cursecs;
        durtimetext.innerHTML = durmins + ":" + dursecs;
    }

    //EVENT HANDLERS
    playpausebtn.addEventListener("click", playAudio);
    seekslider.addEventListener("change", seek);
 
    volumeslider.addEventListener("mousemove", setVolume);
    music.addEventListener("timeupdate", seektimeupdate);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<audio id="music">
  <source src="//mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/mpeg"/>
</audio>
  <button id="playpausebtn" class="play">
  	play
  </button>
  <span id="curtimetext">00:00</span>
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
  <span id="durtimetext">00:00</span>
  <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	
</body>
</html>

Learn more about change event from mdn https://developer.mozilla.org/en-US/docs/Web/Events/change

Input range slider not working in chrome? works in Firefox

2 Answers