播放多个曲目 <audio>答案

【问题标题】：Play multiple tracks <audio>播放多个曲目 <audio>
【发布时间】：2022-02-09 02:30:56
【问题描述】：

我正在尝试使用<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>

【问题讨论】：

@RokoC.Buljan 我的问题需要奖励 100 Link worktime from one form to another..

标签： javascript html audio

【解决方案1】：

添加跳过按钮
单击时，调用skip 函数，该函数将
- 如果有播放则暂停
- 清除正在播放/暂停的课程列表
- 将当前曲目增加到下一曲目
- 然后播放

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>

【讨论】：

【解决方案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');
        }

【讨论】：

【解决方案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');
}

【讨论】：