HTML5/JavaScript音频播放列表 [英] HTML5/JavaScript audio playlist
问题描述
我在博客文章 HTML5音频和视频以及如何制作播放列表 .我按照指示进行，但没有得到正确的结果.
I have found a nice tutorial on how to build a playlist using HTML5 and JavaScript in blog post HTML5 Audio and Video and how to make a playlist. I followed the instructions, but I did not get the correct outcome.
此代码应按顺序播放所有三个音频文件，并在最后一首歌曲结束时停止播放，但实际上它是自动播放第一个文件，然后在第一个文件完成后停止播放.我做错了什么?
This code SHOULD play all three audio files in order and stop when the last song has ended, but it what it actually does is autoplay the first file then stops when the first file is completed. What did I do wrong?
<html>
<body>
<ul id="playlist">
<li class="active">
<a href="http://www.codenamejupiterx.com/song/soundtest.mp3">
soundtest
</a>
</li>
<li>
<a href="http://www.codenamejupiterx.com/song/soundtest2.mp3">
soundtest2
</a>
</li>
<li>
<a href="http://www.codenamejupiterx.com/song/soundtest3.mp3">
soundtest3
</a>
</li>
</ul>
<script>
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('#audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}
else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
</script>
</body>
</html>
推荐答案
1) JavaScript代码正在使用jQuery(那些$(...)语句)，因此必须将其导入:
1) JavaScript code is using jQuery (those $(...) statements), so it must be imported:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
...
2):缺少audio HTML元素(真正的播放器"):
2) The audio HTML element (the real "player") is missed:
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" >
<source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
</audio>
...
3)该代码仅播放两首歌曲.玩三遍:
3) The code play only TWO songs. To play THREE:
...
len = tracks.length; //"-1" removed
...
4)代码会反复播放三首歌曲.要停止它:
4) The code play again and again the three songs. To stop it:
audio[0].addEventListener('ended',function(e){
current++;
if(current < len){
link = playlist.find('a')[current];
run($(link),audio[0]);
}
});
这篇关于HTML5/JavaScript音频播放列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
