播放多首曲目 <audio>

Question

我正在尝试使用 <audio> 标签，我希望播放的曲目与我添加的曲目一样多。但最后，第一首曲目循环播放。如何解决？

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

<script type="text/javascript">
var audio = document.getElementById("audio");

function pVid() {
    audio.paused ? audio.play() : audio.pause();
}
</script>

Answer 1

添加跳过按钮
点击后，调用 skip 函数
- 如果有播放就暂停
- 清除 playing/paused class 列表
- 将当前增加到下一首曲目
- 然后玩

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;
  }
}

// handle button skip
function skip() {
  if(!paused) playPause();
  document.getElementById(current + '').classList.remove('playing');
  document.getElementById(current + '').classList.remove('paused');
  current = (current + 1) % sounds.length;
  playPause();
}

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>
<Button id=btnSkip onClick='skip()'>skip</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>

Answer 2

我希望添加下面的示例代码可以完成工作：

function skipAndplayNext() {
            sounds[current].pause();
            document.getElementById(current + '').classList.remove('paused');
            document.getElementById(current + '').classList.remove('playing');
            current++;
            if (current > (sounds.length - 1)) {
                current = 0
            }
            sounds[current].play();
            document.getElementById(current + '').classList.add('playing');
        }

Answer 3

试试这个：(jQuery)

function skipAndplayNext() {
    sounds[currentAudio].pause();
    $("#currentAudio").classList.remove('paused');
    $("#currentAudio").classList.remove('playing');
    currentAudio++;
    if (currentAudio > (sounds.length - 1)) {
      currentAudio = 0
    }
    sounds[currentAudio].play();
    $("#currentAudio").classList.add('playing');
}

播放多首曲目 <audio>

Play multiple tracks <audio>

html

javascript

audio