Eingabebereichsschieberegler funktioniert nicht in Chrom? funktioniert in Firefox

Question

Ich verwende derzeit einen Eingangsbereich Schieberegler, um die Position einer Audiospur zu steuern. Im Firefox funktioniert es perfekt, allerdings in Chrome Der Slider steckt fest und bewegt sich nicht, wenn er gezogen wird. Ich habe auch eine Funktion, die ihre Position jedes Mal um 1 aktualisiert, wenn sich die aktuelle Zeit des Audios ändert, und dies könnte das Problem sein? Wie ich schon sagte, es funktioniert perfekt auf Firefox.

Jede Hilfe würde sehr geschätzt werden.

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

Nach einiger Hilfe von @ azs06 ich diese Arbeit an Firefox und Chrome bekommen verwaltet.

Ich entfernte alle seekslider .addEventListener Linien und nur eine gegeben, die eher eine ‚Veränderung‘ Ereignis hat als mousedown-/up usw.

Die Linie I hinzugefügt ist:

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

Ich aktualisiert die Frage mit dem finalisierten Code.

Answer 2

Sie curtimetext,durtimetext sind erneut deklariert werden, auch müssen Sie keine Kombination von mouseup verwenden, mousedown- Ereignis, könnten Sie einfach change Ereignis verwenden.

Arbeitsbeispiel.

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

Erfahren Sie mehr über Änderungsereignis von mdn https://developer.mozilla.org/en-US/docs/Web/Events/change