html代码循环播放歌单
导读：HTML代码循环播放歌单循环播放歌单是网站中常见的功能之一。通过HTML代码，我们可以实现播放音乐、循环播放歌单等功能。下面我们来学习如何使用HTML代码来实现循环播放歌单。首先，我们需要定义一个audio标签，它是用来控制音频播放的。代码...
HTML代码循环播放歌单循环播放歌单是网站中常见的功能之一。通过HTML代码，我们可以实现播放音乐、循环播放歌单等功能。下面我们来学习如何使用HTML代码来实现循环播放歌单。
首先，我们需要定义一个audio标签，它是用来控制音频播放的。代码如下：
audio id="myMusic" controls="controls">
source src="song1.mp3" />
/audio>
其中，id为myMusic，controls为控件。
接下来，我们需要定义一个列表，用于显示歌单。代码如下：
ul id="myList">
li>
song1/li>
li>
song2/li>
li>
song3/li>
/ul>
其中，id为myList。
然后，我们需要使用JavaScript来控制歌单的循环播放。代码如下：
script>
var myMusic = document.getElementById("myMusic");
var myList = document.getElementById("myList");
var currentSong = 0;
myList.onclick = function(e) {
var target = e.target;
if (target.tagName === "LI") {
var index = Array.prototype.indexOf.call(myList.children, target);
currentSong = index;
myMusic.src = "song" + (index + 1) + ".mp3";
myMusic.play();
}
}
;
myMusic.addEventListener('ended', function() {
currentSong++;
if (currentSong == myList.children.length) {
currentSong = 0;
}
var nextSong = myList.children[currentSong];
myMusic.src = "song" + (currentSong + 1) + ".mp3";
nextSong.classList.add("playing");
myMusic.play();
}
, false);
/script>
以上代码中，使用了addEventListener()函数来监听音频的播放结束事件。当音频播放结束时，我们需要获取下一首歌曲的地址，并将其加入到audio标签中，然后调用play()方法开始播放下一首歌曲。
最后，我们需要定义一些CSS样式来美化页面。代码如下：
style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
}
.playing {
background: #f1f1f1;
}
/style>
以上代码中，设置了ul列表的样式，li的样式以及音乐正在播放的歌曲的背景颜色。
综上所述，我们通过HTML代码和JavaScript编写了一个循环播放歌单的功能。代码简单，实现了基本的音乐播放功能，可以方便地应用于网站中。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html代码循环播放歌单
本文地址： https://pptw.com/jishu/541901.html