【前端】HTML5 Audio 预加载 按照队列顺序播放音频, 可以陆续往队列中加内容
warning:
这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>音频预加载和播放</title>
</head>
<body>
<audio id="audio" controls preload="auto">
<source src="audio/song1.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<button onclick="playNext()">播放下一曲</button>
<script>
var songs = [
"audio/song1.mp3",
"audio/song2.mp3",
"audio/song3.mp3"
];
var currentIndex = 0;
var audio = document.getElementById('audio');
function playNext() {
if (currentIndex >= songs.length) {
currentIndex = 0; // 循环播放
}
var song = songs[currentIndex];
audio.src = song;
audio.load(); // 预加载音频文件
audio.play();
currentIndex++;
}
// 添加新歌到队列
function addSongToQueue(songUrl) {
songs.push(songUrl);
}
</script>
</body>
</html>这段代码实现了一个简单的音频播放器，用户可以点击按钮播放下一曲，如果到达队列末尾则循环播放。同时，提供了一个函数addSongToQueue，可以用来往队列中添加新的音乐。这个例子展示了如何使用JavaScript和HTML5 <audio> 元素来管理音频播放的基本概念。
评论已关闭