javascript - 输入范围 slider 在 Chrome 中不起作用？在 Firefox 中工作

Question

我目前正在使用输入范围 slider 来控制音轨的位置。在 Firefox 中它工作得很好，但是在 Chrome 中 slider 被卡住并且在拖动时不会移动。我还有一个功能，每次音频的 currentTime 更改时，它的位置都会更新 1，这可能是问题吗？然而，就像我说的它在 Firefox 上完美运行。

任何帮助将不胜感激。

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);
});

Answer 1

您正在重新声明 curtimetext,durtimetext ，你也不需要使用mouseup，mousedown事件的组合，你可以使用change事件。

工作示例。

$(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>

从 mdn https://developer.mozilla.org/en-US/docs/Web/Events/change 了解有关更改事件的更多信息