帮我写一个js audio 曲库循环和单曲循环
时间: 2024-05-12 15:20:07 浏览: 13
以下是一个简单的示例代码,实现了音乐曲库的循环播放和单曲循环功能。
HTML代码:
```html
<audio id="myAudio" controls>
<source src="song1.mp3" type="audio/mpeg">
<source src="song1.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<button onclick="playPrev()">Prev</button>
<button onclick="togglePlay()">Play/Pause</button>
<button onclick="playNext()">Next</button>
<button onclick="toggleLoop()">Loop</button>
```
JavaScript代码:
```js
var audio = document.getElementById("myAudio");
var currentSongIndex = 0;
var songList = ["song1.mp3", "song2.mp3", "song3.mp3"];
var isLooping = false;
function playSong(index) {
audio.src = songList[index];
audio.play();
currentSongIndex = index;
}
function playNext() {
var nextSongIndex = currentSongIndex + 1;
if (nextSongIndex >= songList.length) {
nextSongIndex = 0;
}
playSong(nextSongIndex);
}
function playPrev() {
var prevSongIndex = currentSongIndex - 1;
if (prevSongIndex < 0) {
prevSongIndex = songList.length - 1;
}
playSong(prevSongIndex);
}
function togglePlay() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
function toggleLoop() {
isLooping = !isLooping;
audio.loop = isLooping;
}
```
在上面的代码中,我们定义了一个`audio`对象,用于控制音频播放。`currentSongIndex`用于记录当前播放的歌曲在`songList`中的索引。`songList`是一个包含所有歌曲文件名的数组。`isLooping`用于记录是否开启了循环播放。
`playSong`函数用于播放指定索引的歌曲。`playNext`和`playPrev`函数分别用于播放下一首和上一首歌曲。`togglePlay`函数用于切换播放/暂停状态。`toggleLoop`函数用于切换循环播放状态,并设置`audio`的`loop`属性。
在HTML中,我们使用`<audio>`标签来创建音频播放器,并为它指定了一个ID。然后,我们使用若干个按钮来控制音频播放器的操作,例如播放/暂停、下一首、上一首和开启/关闭循环播放。
这个示例代码只是一个简单的演示,实际的音乐曲库可能会更加复杂,需要考虑更多的功能和交互体验。