html5制作音乐列表代码

今天我们来学习使用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;
     imusicLinks.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()方法以开始播放歌曲。现在，我们就可以在我们的网站上创建一个简单的音乐播放器啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！