javascript - 按顺序播放多个音轨，而不是同时播放

Question

我正在尝试使用 <audio>标签，我希望播放的轨道与添加的轨道一样多。但是现在它们同时播放，我能否以某种方式让它们按顺序播放？

<audio id="audio1" preload="" autoplay="" loop="" type="audio/mp3" src="music/mus1.mp3"></audio>
<audio id="audio2" preload="" autoplay="" loop="" type="audio/mp3" src="music/mus.mp3"></audio>

<div id="pp" style="cursor: pointer;" onclick="pVid();"><img src="img/heart.png"></div>

<script type="text/javascript">
function pVid() {
var audio1 = document.getElementById("audio1");
var audio2 = document.getElementById("audio2");

    audio1.paused ? audio1.play() : audio1.pause();
    audio2.paused ? audio2.play() : audio2.pause();
}
</script>

我找到了一个解决方案，它有效但不是我想要的方式

var sounds = new Array(new Audio("music/mus1.mp3"), new Audio("music/mus.mp3"));
var i = -1;
pVid();

function pVid() {
    i++;
    if (i == sounds.length) return;
    sounds[i].addEventListener('ended', pVid);
    sounds[i].play();
}

这里一切都立即播放，但我希望能够通过按钮自己播放轨道并随时暂停。这是在第一个版本中完成的，但是所有轨道同时播放

Answer 1

使用audio events越多越好。我们可以使用 freesound.org用于测试。

let sounds = new Array(new Audio("https://freesound.org/data/previews/46/46992_514283-lq.mp3"),
  new Audio("https://freesound.org/data/previews/610/610823_13156161-lq.mp3"),
  new Audio("https://freesound.org/data/previews/92/92005_1499847-lq.mp3"), new Audio("https://freesound.org/data/previews/46/46992_514283-lq.mp3"),
  new Audio("https://freesound.org/data/previews/610/610823_13156161-lq.mp3"),
  new Audio("https://freesound.org/data/previews/92/92005_1499847-lq.mp3"));

let current = random(0);
let paused = true;

// set event handlers on all audio objects
for (let s of sounds) {
  s.addEventListener('ended', ended);
  s.addEventListener('play', play);
  s.addEventListener('pause', pause);
}

updateVolume()

// handle button click
function playPause() {
  if (paused) {
    sounds[current].play();
    btn.innerText = 'pause';
    paused = false;

  } else {
    sounds[current].pause();
    btn.innerText = 'play';
    paused = true;
  }
}

function ended(e) {
  document.getElementById(current + '').classList.remove('playing');
  document.getElementById(current + '').classList.remove('paused');
  /*i++;
  if (i >= sounds.length) //loop
    i = 0;
  */
  current = random(current); // shuffle

  paused = true;
  playPause();
}

function play() {
  document.getElementById(current + '').classList.add('playing');
  document.getElementById(current + '').classList.remove('paused');
}

function pause() {
  document.getElementById(current + '').classList.add('paused');
  document.getElementById(current + '').classList.remove('playing');
}

function random(i) {
  let next = i;
  while (next == i)
    next = Math.floor(Math.random() * sounds.length);
  return next;
}

function updateVolume() {
  for (let s of sounds) {
    s.volume = volume.value;
  }
}

#list {
  margin-top: 1rem;
  border: 1px solid gray;
  width: 100px;
}

#controls {
  position: fixed;
  right: 2rem;
  top: 1rem;
  width: 50px;
}

#volume {
  width: 150px;
  height: 20px;
  transform-origin: 75px 75px;
  transform: rotate(-90deg) translateY(50%);
}

.playing {
  background-color: lightblue;
}

.paused {
  background-color: wheat;
}

<Button id=btn onClick='playPause()'>play</Button>
<div id=list>
  <div id='0'>Guitar</div>
  <div id='1'>Drum</div>
  <div id='2'>Violin</div>
  <div id='3'>Guitar</div>
  <div id='4'>Drum</div>
  <div id='5'>Violin</div>
</div>
<div id=controls>
  <label for="volume">Volume</label><br>
  <input id=volume type="range" id="volume" name="volume" min="0" max="1" step='.1' value='.5' onInput='updateVolume()'>

</div>