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

本教程将介绍JavaScript-HTML5音频/自定义播放器的搜索栏和当前时间的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

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

问题描述

我正在开发一个定制的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,因此随着seekTimeUpdatetimeupdate事件中被调用,此字符串将不断增加。

从相关问题Custom progress bar for <audio> and <progress> HTML5 elements中的进度代码开始(有关说明,请参阅该帖子),您可以使用线程JavaScript seconds to time string with format hh:mm:ss中的格式选项之一添加时间读数。我选择的方法使用DatetoISOString来避免担心细节,但这样的方法在必要时也应该有效:

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

好了关于JavaScript-HTML5音频/自定义播放器的搜索栏和当前时间的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。