HTML5的出現(xiàn)給予了網(wǎng)頁(yè)開發(fā)者更多的多媒體實(shí)現(xiàn)選擇。之前通過Flash實(shí)現(xiàn)的音樂播放器因?yàn)槠湓谝苿?dòng)端瀏覽器中的兼容性問題已經(jīng)逐漸被HTML5播放器替代。下面是一個(gè)基于HTML5播放列表的音樂播放器的代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML5音樂播放器</title>
<style>
.audio-player {
width: 500px;
background-color: #f2f2f2;
margin: 0 auto;
text-align: center;
padding: 20px;
}
.audio-player ul {
list-style: none;
padding: 0;
margin: 0;
max-height: 250px;
overflow-y: auto;
}
.audio-player ul li {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="audio-player">
<h2>HTML5音樂播放器</h2>
<audio id="audio" src="" controls="controls">Your browser does not support the audio element.</audio>
<ul id="playlist">
<li><a href="/media/song1.mp3">Song 1</a></li>
<li><a href="/media/song2.mp3">Song 2</a></li>
<li><a href="/media/song3.mp3">Song 3</a></li>
<li><a href="/media/song4.mp3">Song 4</a></li>
<li><a href="/media/song5.mp3">Song 5</a></li>
</ul>
</div>
<script>
var audioPlayer = document.getElementById("audio");
var playlist = document.getElementById("playlist");
var links = playlist.getElementsByTagName("a");
audioPlayer.addEventListener("ended", playNext);
audioPlayer.addEventListener("error", playNext);
var currentSong = 0;
function playSong(index) {
audioPlayer.src = links[index];
audioPlayer.load();
audioPlayer.play();
document.title = links[index].innerText;
}
function playNext() {
currentSong++;
if(currentSong == links.length) {
currentSong = 0;
}
playSong(currentSong);
}
for(var i=0; i以上代碼實(shí)現(xiàn)的功能包括：
- 頁(yè)面中央顯示一個(gè)播放器，其下方有一個(gè)音樂列表
- 通過HTML5標(biāo)簽<audio>實(shí)現(xiàn)音頻播放器，支持播放、暫停、跳轉(zhuǎn)
- 列表中的音樂文件可以通過點(diǎn)擊實(shí)現(xiàn)播放
- 播放完成或者出現(xiàn)錯(cuò)誤時(shí)自動(dòng)播放下一首
以上只是該播放器的基本實(shí)現(xiàn)，開發(fā)者可以進(jìn)一步拓展其功能，比如添加音量控制。HTML5播放器因其跨平臺(tái)、易操作、支持多種音頻格式的特點(diǎn)被廣泛應(yīng)用，希望以上內(nèi)容對(duì)各位開發(fā)者有所啟發(fā)。