今天我們來學習使用HTML5制作音樂列表代碼，讓我們一起來創建一個簡單的音樂播放器吧！
<!DOCTYPE html>
<html>
<head>
<title>我的音樂播放器</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我的音樂播放器</h1>
<table>
<thead>
<tr>
<th>曲目</th>
<th>歌手</th>
<th>時長</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="music1.mp3">歌曲1</a></td>
<td>歌手1</td>
<td>4:30</td>
</tr>
<tr>
<td><a href="music2.mp3">歌曲2</a></td>
<td>歌手2</td>
<td>3:48</td>
</tr>
<tr>
<td><a href="music3.mp3">歌曲3</a></td>
<td>歌手3</td>
<td>5:10</td>
</tr>
</tbody>
</table>
<audio id="my-music" controls>
<source src="" type="audio/mpeg">
</audio>
<script>
var musicLinks = document.getElementsByTagName("a");
var player = document.getElementById("my-music");
for(var i=0; i<musicLinks.length; i++) {
musicLinks[i].addEventListener("click", function(event) {
event.preventDefault();
var musicFile = this.getAttribute("href");
player.src = musicFile;
player.play();
});
}
</script>
</body>
</html>代碼解釋：
首先，我們需要使用<table>標簽創建一個音樂列表。在表頭中，我們有三列：曲目、歌手和時長。在表的主體部分，我們有三行，每行代表一首歌曲，每行有三列：歌曲名稱、歌手和歌曲時長。<a>標簽用于創建可點擊的歌曲名稱鏈接，這些鏈接指向音樂文件。
接下來，我們需要使用<audio>標簽創建一個音樂播放器。我們將設置其ID為“my-music”，以便在JavaScript中引用它。一個空的<source>標簽已經內聯在<audio>標簽內，但它沒有任何實際用途，因為它的SRC屬性尚未定義。
在JavaScript代碼中，我們首先通過getElementsByTagName方法獲取頁面中的所有<a>標簽。然后，使用一個循環遍歷所有的<a>標簽，并添加一個事件偵聽器，偵聽每個鏈接的點擊事件。當用戶單擊鏈接時，事件處理程序將首先使用event.preventDefault()方法防止鏈接執行其默認行為，然后獲取該鏈接的href屬性值。href屬性包含指向音樂文件的鏈接。我們將這個值存儲在變量musicFile中。
最后，我們將音樂播放器的SRC屬性設置為musicFile，并調用player.play()方法以開始播放歌曲。現在，我們就可以在我們的網站上創建一個簡單的音樂播放器啦！
上一篇mysql8.0性能指標
下一篇不允許縮放css