结束后自动更改为下一首歌曲
结束后自动更改为下一首歌曲
提问于 2014-07-15 20:16:37
我想在结束后自动播放下一首歌，直到最后一首。目前这是我的密码。
<audio id="audio" src="Music/Inuyasha - Dearest ~Instrumental~.mp3" controls></audio>
<div class="btn" name="Music/Inuyasha - Dearest ~Instrumental~.mp3"></div><br>
<div class="btn" name="Music/Fear and Loathing in Las Vegas - Just Awake.mp3"></div><br>
<div class="btn" name="Music/Fear and Loathing in Las Vegas - How Old You Are Never Forget Your Dream.mp3"></div><br>
<div class="btn" name="Music/Fear and Loathing in Las Vegas - Short but Seems Long time of our Life Lyrics.mp3"></div><br>
<div class="btn" name="Music/My First Story - Calling You.mp3"></div><br>
<div class="btn" name="Music/My First Story - Bullet Radio.mp3"></div>JavaScript
$()是document.getElementById()。我让它拥有。
// my codes is not JQuery but Pure JavaScript.
var btn = document.getElementsByClassName('btn');
for(i=0; i < btn.length; i++){
btn[i].addEventListener('click', function(v){
$('audio').src = v.target.getAttribute('name');
$('audio').play();
}, false);
//Above codes is not problem but bottom for auto to change next song after ended
btn[i].index = i;
$('audio').addEventListener('ended', function(){
$('audio').src = btn[this.index+1].getAttribute('name');
$('audio').play();
}, false);
}// my and是当歌曲结束时，它将得到当前索引数组歌曲，然后+1当前索引数组并播放到最后一首歌曲。但不起作用。
回答 2
Stack Overflow用户
发布于 2014-07-15 20:34:41
var btn = document.getElementsByClassName('btn'),
currentBtn = -1;
for(i=0; i < btn.length; i++){
btn[i].addEventListener('click', function(){
// get current btn index
currentBtn = Array.prototype.slice.call( btn ).indexOf(this);
$('audio').btn[currentBtn].getAttribute('name');
$('audio').play();
}, false);
}
$('audio').addEventListener('ended', function() {
// get next button index. if it was last one - repeat from first btn
currentBtn++;
if (currentBtn >= btn.length) {
currentBtn = 0;
}
$('audio').src = btn[currentBtn].getAttribute('name');
$('audio').play();
}, false);Stack Overflow用户
发布于 2014-07-15 20:43:46
我已经找到了一种使用事件侦听器在纯JS中执行此操作的方法。我希望你能找到有用的密码。更新:增加对添加更多歌曲的支持
<!DOCTYPE html>
<html>
<body>
<audio controls id="au" autoplay="autoplay">
<source src="Airport Lounge.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
<script>
var c=0;
var songs = ["Airport Lounge.mp3", "Airport Lounge.mp3", "Airport Lounge.mp3"];
var a=document.getElementById("au");
a.addEventListener('ended', function(){
document.getElementById("au").src=songs[c];
a.load();
console.log(c);
c++;
if(c>=songs.length){
c=0;
}
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24767380
复制相关文章
相似问题
腾讯云开发者
