入力範囲スライダがクロームで機能していませんか？ Firefoxで動作します

Question

現在、入力範囲スライダを使用してオーディオトラックの位置を制御しています。 Firefoxでは、Chromeでは完全に動作していますが、スライダは動かず、ドラッグしても動きません。私はまた、オーディオの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を：あなたはcurtimetext,durtimetextを再宣言している

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

から変更イベント詳細については、こちらをご覧ください。

私が追加された行である

等全てseeksliderの.addEventListener線を除去し、唯一「変化」イベントを有するものを追加しなくマウスダウン/アップ：私は更新され

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

最終的なコードでの質問。

Answer 2

、またあなたがのmouseup、マウスダウンイベントの組み合わせを使用する必要はありません、あなただけの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"> 
 
    \t 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> 
 
\t 
 
</body> 
 
</html>

私はこれは、FirefoxとChromeの両方に取り組んで得ることができたazs06 @からいくつかの助けを借りた後https://developer.mozilla.org/en-US/docs/Web/Events/change MDN