HTML 音频：当上一首歌播放完毕时自动播放下一首

在本文中，我们将介绍如何使用HTML来实现在上一首歌曲播放完毕后自动播放下一首的功能。

阅读更多：HTML 教程

1. HTML 音频元素

HTML 提供了<audio>元素来嵌入音频文件到网页中。我们可以通过设置src属性来指定音频文件的路径。

<audio id="myAudio" src="song1.mp3"></audio>

2. JavaScript 控制

为了实现在当前歌曲播放完毕后自动播放下一首歌曲，我们需要使用JavaScript来实现。我们可以使用ended事件来监听当前歌曲是否已经播放完成，然后执行播放下一首歌曲的逻辑。

首先，我们给<audio>元素添加ended事件的监听器，通过JavaScript代码来实现：

const audio = document.getElementById("myAudio");
audio.addEventListener("ended", playNextSong);

然后，我们需要编写一个playNextSong函数来控制播放下一首歌曲的逻辑。在这个函数中，我们可以使用src属性来更改音频文件的路径，实现下一首歌曲的播放。

function playNextSong() {
    // 获取当前歌曲的序号
    const currentSongIndex = getSongIndex();

    // 根据当前歌曲的序号计算下一首歌曲的序号
    const nextSongIndex = (currentSongIndex + 1) % songList.length;

    // 根据下一首歌曲的序号获取下一首歌曲的路径
    const nextSongPath = songList[nextSongIndex];

    // 播放下一首歌曲
    audio.src = nextSongPath;
    audio.play();
}

在上面的示例代码中，songList是一个包含所有歌曲路径的数组，getSongIndex函数可以用来获取当前歌曲的序号。

3. 示例场景

假设我们有三首歌曲，分别是song1.mp3、song2.mp3和song3.mp3。我们可以在页面中创建一个播放器，通过点击播放按钮来开始播放歌曲：

<button onclick="playFirstSong()">播放</button>

然后，我们可以编写一个playFirstSong函数，当点击播放按钮时，播放第一首歌曲，并且将ended事件的监听器添加到<audio>元素上：

function playFirstSong() {
    const audio = document.getElementById("myAudio");
    audio.src = "song1.mp3";
    audio.addEventListener("ended", playNextSong);
    audio.play();
}