Question

我正在制作一个自定义的HTML5音频播放器，但似乎我在某些时候错过了一些东西：
<input>范围滑块不跟随音频，播放当前时间的<div>范围不起作用 - 它会相互相邻添加零。

到目前为止，这是我的代码：

HTML

<div class="player">
    <audio id="HAE">
        <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b1/Haussperling2008.ogg/Haussperling2008.ogg.mp3" type="audio/mpeg">
    </audio>
    <div id="playpause">PLAY</div>
    <input id="progress" type="range" min="0" max="100" value="0" step="0.1">
    <div id="ct">00:00</div>
</div>

的JavaScript

// VARIABLES

hae = document.getElementById('HAE');
pp = document.getElementById('playpause');
progress = document.getElementById('progress');
seeking = false;
seekto = hae.duration * (progress.value / 100);
ct = document.getElementById('ct');
time = hae.currentTime * (100 / hae.duration);
mins = Math.floor(hae.currentTime / 60);
secs = Math.floor(hae.currentTime - mins * 60);

// EVENTS

pp.addEventListener('click', togglePlay);
progress.addEventListener('mousedown', function(event) {seeking = true; seek(event);});
progress.addEventListener('mousemove', function(event) {seek(event);});
progress.addEventListener('mouseup', function() {seeking = false;});
hae.addEventListener('timeupdate', function(){ seekTimeUpdate(); });


// TOGGLE PLAY/PAUSE

function togglePlay() {
    if (hae.paused) {
        hae.play();
        pp.innerHTML = "PAUSE";
    }
    else {
        hae.pause();
        pp.innerHTML = "PLAY";
    }
}

// PROGRESS BAR

function seek(event){
    if(seeking){
        progress.value = event.clientX - progress.offsetLeft;
        hae.currentTime = seekto;
    }
}

// MM:SS

function seekTimeUpdate(){
    progress.value = time;
    if(secs < 10) {secs = "0" + secs;}
    if(mins < 10) {mins = "0" + mins;}
    ct.innerHTML = mins + ":" + secs;
}

这是一个有效的Fiddle 有人可以帮我解决我的问题吗？

提前致谢！

Answer 1

这里的基本问题是，变量time，mins，secs和seekto无法获得音频的currentTime属性-它们是已定义的，但是每次调用它们时，它们始终是相同的值。您需要的是将在现有代码中使用实时currentTime值的getter函数。这是修订版，保留了原始HTML和尽可能多的JavaScript：

// VARIABLES

hae = document.getElementById('HAE');
pp = document.getElementById('playpause');
progress = document.getElementById('progress');
seeking = false;
ct = document.getElementById('ct');

// FUNCTIONS

function pad(str) {
    return (parseInt(str)<10 ? '0' : '') + str;
}

audioData = {};

Object.defineProperties(audioData, {
    seekto: {
      get: function() {
          return hae.duration * (progress.value / 100);
      },
      enumerable: true,
      configurable: true
    },
    time: {
      get: function() {
          return hae.currentTime * (100 / hae.duration);
      },
      enumerable: true,
      configurable: true
    },
    mins: {
      get: function() {
          return Math.floor(hae.currentTime / 60);
      },
      enumerable: true,
      configurable: true
    },
    secs: {
      get: function() {
          return Math.floor(hae.currentTime % 60);
      },
      enumerable: true,
      configurable: true
    },
});

// EVENTS

pp.addEventListener('click', togglePlay);
progress.addEventListener('mousedown', function(event) {seeking = true; seek(event);});
progress.addEventListener('mousemove', function(event) {seek(event);});
progress.addEventListener('mouseup', function() {seeking = false;});
hae.addEventListener('timeupdate', function(){ seekTimeUpdate(); });


// TOGGLE PLAY/PAUSE

function togglePlay() {
    if (hae.paused) {
        hae.play();
        pp.innerHTML = "PAUSE";
    }
    else {
        hae.pause();
        pp.innerHTML = "PLAY";
    }
}

// PROGRESS BAR

function seek(event){
    if(seeking){
        progress.value = event.clientX - progress.offsetLeft;
        hae.currentTime = audioData.seekto;
    }
}

// CURRENT TIME

function seekTimeUpdate(){
    progress.value = audioData.time;
    ct.innerHTML = pad(audioData.mins) + ":" + pad(audioData.secs);
}

JsFiddle here

JavaScript - HTML5音频/自定义播放器的搜索栏和当前时间

1 个答案: