Question

我目前正在使用输入范围滑块来控制音轨的位置。在Firefox中它完美运行，但是在Chrome中滑块卡住并且在拖动时不会移动。我还有一个函数，每当音频的当前时间发生变化时，它的位置都会更新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事件。

工作示例。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

从mdn https://developer.mozilla.org/en-US/docs/Web/Events/change

了解有关更改事件的详情

Answer 2

在@ azs06的一些帮助下，我设法让它在Firefox和Chrome上运行。

我删除了所有的seeklider .addEventListener行，并且只添加了一个有＆＃39;更改＆＃39;事件而不是mousedown / up等。

我添加的行是：

seekslider.addEventListener("change", function (event) { seeking = true; seek(event); });

我将使用最终代码更新问题。

输入范围滑块在chrome中不起作用？适用于Firefox

2 个答案: