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

问题描述

我正在开发一个定制的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。
有人能帮我解决我的问题吗？

提前谢谢！

推荐答案

secs = "0" + secs;前缀"0"到secs，因此随着seekTimeUpdate在timeupdate事件中被调用，此字符串将不断增加。

const padTime = n => (~~(n) + "").padStart(2, "0");
const fmtTime = s =>
  s < 1 ? "00:00" : `${padTime(s / 60)}:${padTime(s % 60)}`
;

const url = "https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b1/Haussperling2008.ogg/Haussperling2008.ogg.mp3";
const audio = new Audio(url);
const playBtn = document.querySelector("button");
const currTimeEl = document.querySelector(".current-time");
const durationEl = document.querySelector(".duration");
const progressEl = document.querySelector('input[type="range"]');
let mouseDownOnSlider = false;

const fmtTime = s => {
  const d = new Date(0);

  if (s > 0) {
    d.setSeconds(s % 60);
    d.setMinutes(s / 60);
  }

  return d.toISOString().slice(14, 19);
};

audio.addEventListener("loadeddata", () => {
  progressEl.value = 0;
  currTimeEl.textContent = fmtTime(audio.currentTime);
  durationEl.textContent = fmtTime(audio.duration);
});
audio.addEventListener("timeupdate", () => {
  if (!mouseDownOnSlider) {
    progressEl.value = audio.currentTime / audio.duration * 100;
    currTimeEl.textContent = fmtTime(audio.currentTime);
    durationEl.textContent = fmtTime(audio.duration);
  }
});
audio.addEventListener("ended", () => {
  playBtn.textContent = "▶️";
});

playBtn.addEventListener("click", () => {
  audio.paused ? audio.play() : audio.pause();
  playBtn.textContent = audio.paused ? "▶️" : "⏸️";
});

progressEl.addEventListener("change", () => {
  const pct = progressEl.value / 100;
  audio.currentTime = (audio.duration || 0) * pct;
});
progressEl.addEventListener("mousedown", () => {
  mouseDownOnSlider = true;
});
progressEl.addEventListener("mouseup", () => {
  mouseDownOnSlider = false;
});

button {
  font-size: 1.5em;
}

<button>▶️</button>
<input type="range" value="0" min="0" max="100" step="1"><span class="current-time">00:00</span>/<span class="duration">00:00</span>