html音乐播放器自动切歌,HTML音乐播放——切歌
时间: 2023-08-22 19:08:34 浏览: 44
可以使用JavaScript来实现HTML音乐播放器自动切歌的功能。以下是一个示例代码:
HTML部分:
```html
<audio id="myAudio" autoplay>
<source src="song1.mp3" type="audio/mpeg">
<source src="song1.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
```
JavaScript部分:
```javascript
var audio = document.getElementById("myAudio");
var songs = ["song1.mp3", "song2.mp3", "song3.mp3"];
var currentSong = 0;
audio.addEventListener("ended", function() {
currentSong++;
if (currentSong == songs.length) {
currentSong = 0;
}
audio.src = songs[currentSong];
audio.play();
});
```
解释:
- `var audio = document.getElementById("myAudio");`:获取音频元素。
- `var songs = ["song1.mp3", "song2.mp3", "song3.mp3"];`:定义歌曲列表。
- `var currentSong = 0;`:记录当前播放的歌曲在歌曲列表中的下标。
- `audio.addEventListener("ended", function() {...});`:监听音频播放结束事件。
- `currentSong++;`:切换到下一首歌曲。
- `if (currentSong == songs.length) { currentSong = 0; }`:如果已经播放到了最后一首歌曲,则切换到第一首。
- `audio.src = songs[currentSong];`:设置音频元素的`src`属性为当前歌曲的URL。
- `audio.play();`:开始播放当前歌曲。