多个音频共用一个进度条

要实现多个音频共用一个进度条，可以使用 JavaScript 和 HTML5 中的 Audio 对象。您可以为每个音频文件创建一个 Audio 对象，然后使用 JavaScript 控制它们的播放，暂停和进度。以下是一个简单的示例：

HTML:

<audio id="audio1" src="audio1.mp3"></audio>
<audio id="audio2" src="audio2.mp3"></audio>
<input id="progress" type="range" min="0" max="100" value="0">

JavaScript:

var audio1 = document.getElementById("audio1");
var audio2 = document.getElementById("audio2");
var progress = document.getElementById("progress");

// 更新进度条
function updateProgress() {
  var duration = audio1.duration + audio2.duration;
  var currentTime = audio1.currentTime + audio2.currentTime;
  progress.value = (currentTime / duration) * 100;
}

// 播放音频
function play() {
  audio1.play();
  audio2.play();
}

// 暂停音频
function pause() {
  audio1.pause();
  audio2.pause();
}

// 监听音频事件，更新进度条
audio1.addEventListener("timeupdate", updateProgress);
audio2.addEventListener("timeupdate", updateProgress);

// 控制进度条
progress.addEventListener("input", function() {
  var duration = audio1.duration + audio2.duration;
  var currentTime = (progress.value / 100) * duration;
  if (currentTime < audio1.duration) {
    audio1.currentTime = currentTime;
  } else {
    audio2.currentTime = currentTime - audio1.duration;
  }
});

在上面的示例中，我们创建了两个 Audio 对象（audio1 和 audio2），一个进度条（progress），并将它们与相应的 HTML 元素关联起来。我们还定义了三个函数：updateProgress，play 和 pause。updateProgress 函数在音频播放时更新进度条，play 和 pause 函数分别控制音频的播放和暂停。

最后，我们将 timeupdate 事件添加到每个音频对象中，以便在音频播放时更新进度条。我们还将 input 事件添加到进度条中，以便用户可以控制进度条并跳转到特定的时间点。