html音乐播放器切换上一首歌曲的js代码
时间: 2023-10-07 07:09:09 浏览: 56
以下是一个简单的HTML音乐播放器,包括上一首按钮以及相应的JavaScript代码实现:
HTML代码:
```html
<audio id="myAudio">
<source src="music1.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<button onclick="playPrev()">上一首</button>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
```
JavaScript代码:
```javascript
var tracks = ["music1.mp3", "music2.mp3", "music3.mp3"];
var currentTrack = 0;
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
function playPrev() {
currentTrack--;
if (currentTrack < 0) {
currentTrack = tracks.length - 1;
}
x.src = tracks[currentTrack];
x.load();
playAudio();
}
```
这个代码片段会创建一个音乐播放器,包括上一首按钮以及播放、暂停按钮。当用户点击上一首按钮时,调用 `playPrev()` 函数来切换到上一首歌曲并播放;当用户点击播放、暂停按钮时,调用相应的函数来控制音乐播放。其中, `tracks` 数组存储了所有的歌曲文件名, `currentTrack` 变量存储当前播放歌曲的索引。当用户点击上一首按钮时, `currentTrack` 变量会相应地减一,并根据新索引加载并播放对应的歌曲。