javascript - 一首一首地播放音频

Question

我有一个音频文件列表。如何让他们一一演奏呢？现在，如果我单击“播放”按钮，它们就会一起播放。

const audioList = [ 'audio1', 'audio2', 'audio3', 'audio4', 'audio5' ]

let button = document.querySelector('#btnPlay').addEventListener('click', e=>{
    audioList.forEach(element => {
        let audio1 = new Audio(element);
        audio1.play();
    });

Answer 1

您可以通过使用音频元素的“结束”事件来实现此目的，并在每首歌曲结束后更改音频的 src。

我的html文件:

<audio src=""></audio>
<button></button>

我的js文件:

const songs = [ 'audio1', 'audio2', 'audio3', 'audio4', 'audio5' ]
const audio = document.querySelector('audio');
const button = document.querySelector('button'); 

let songIndex = 0;
audio.src = songs[songIndex]

audio.addEventListener('ended', () => {
  songIndex++;
  if(songIndex >= songs.length) return;
  audio.src = songs[songIndex]
  audio.play()
})

document.addEventListener('click', () => audio.play())

Codepen 演示:https://codepen.io/PatrykBuniX/pen/GRgGGyr 我希望它对你有帮助! :D