HTML5+JS音乐播放器, 要求具有切换歌曲、播放、暂停、显示当前播放曲目等基本功能
时间: 2023-05-30 20:04:23 浏览: 152
以下是一个简单的HTML5 JS音乐播放器示例:
HTML代码:
```
<div id="music-player">
<audio id="audio-player"></audio>
<div id="controls">
<button id="play-btn">播放</button>
<button id="pause-btn">暂停</button>
<button id="prev-btn">上一首</button>
<button id="next-btn">下一首</button>
</div>
<div id="current-track"></div>
</div>
```
JS代码:
```
// 歌曲列表
var tracks = [
{ name: "歌曲1", src: "music1.mp3" },
{ name: "歌曲2", src: "music2.mp3" },
{ name: "歌曲3", src: "music3.mp3" }
];
var currentIndex = 0; // 当前播放曲目索引
var audioPlayer = document.getElementById("audio-player");
var playBtn = document.getElementById("play-btn");
var pauseBtn = document.getElementById("pause-btn");
var prevBtn = document.getElementById("prev-btn");
var nextBtn = document.getElementById("next-btn");
var currentTrack = document.getElementById("current-track");
// 初始化
currentTrack.innerHTML = tracks[currentIndex].name;
audioPlayer.src = tracks[currentIndex].src;
// 播放按钮点击事件
playBtn.addEventListener("click", function() {
audioPlayer.play();
});
// 暂停按钮点击事件
pauseBtn.addEventListener("click", function() {
audioPlayer.pause();
});
// 上一首按钮点击事件
prevBtn.addEventListener("click", function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = tracks.length - 1;
}
currentTrack.innerHTML = tracks[currentIndex].name;
audioPlayer.src = tracks[currentIndex].src;
audioPlayer.play();
});
// 下一首按钮点击事件
nextBtn.addEventListener("click", function() {
currentIndex++;
if (currentIndex >= tracks.length) {
currentIndex = 0;
}
currentTrack.innerHTML = tracks[currentIndex].name;
audioPlayer.src = tracks[currentIndex].src;
audioPlayer.play();
});
// 监听音频播放结束事件
audioPlayer.addEventListener("ended", function() {
currentIndex++;
if (currentIndex >= tracks.length) {
currentIndex = 0;
}
currentTrack.innerHTML = tracks[currentIndex].name;
audioPlayer.src = tracks[currentIndex].src;
audioPlayer.play();
});
```
当用户点击播放、暂停、上一首、下一首按钮时,JS代码会分别调用`audioPlayer`的`play()`、`pause()`、更改`src`并`play()`等方法来实现音乐播放器的基本功能。同时,通过监听`audioPlayer`的`ended`事件,可以实现歌曲播放结束后自动切换到下一首。当前播放曲目的名称通过JS代码更改`currentTrack`的`innerHTML`来实现。