HTML5怎么制作音乐播放器_HTML5音频播放器开发

playPauseBtn.addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
    playPauseBtn.textContent = '暂停';
  } else {
    audio.pause();
    playPauseBtn.textContent = '播放';
  }
});

// 更新进度条
audio.addEventListener('timeupdate', function() {
  const currentTime = audio.currentTime;
  const duration = audio.duration || 1;
  seekBar.value = (currentTime / duration) * 100;

  // 格式化时间显示 mm:ss
  const formatTime = sec => {
    let mins = Math.floor(sec / 60);
    let secs = Math.floor(sec % 60);
    return ${mins}:${secs ;<br>   };<br>   timeDisplay.textContent = <code>${formatTime(currentTime)} / ${formatTime(duration)};
});

// 拖动进度条
seekBar.addEventListener('change', function() {
  const time = audio.duration * (seekBar.value / 100);
  audio.currentTime = time;
});

// 调节音量
volumeBar.addEventListener('input', function() {
  audio.volume = volumeBar.value;
});