cod*_*erx -1 javascript audio html5 playlist
我在博客文章HTML5音频和视频中找到了一个关于如何使用HTML5和JavaScript构建播放列表以及如何制作播放列表的精彩教程.我按照说明操作,但没有得到正确的结果.
这段代码应该按顺序播放所有三个音频文件,并在最后一首歌曲结束时停止,但它实际上做的是自动播放第一个文件,然后在第一个文件完成时停止.我做错了什么？
<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(那些$(...)语句),因此必须导入:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
...
2)的audioHTML元素(真正的"玩家")被遗漏:
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" >
<source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
</audio>
...
3)代码只播放两首歌曲.玩三:
...
len = tracks.length; //"-1" removed
...
4)代码一次又一次地播放三首歌曲.要阻止它:
audio[0].addEventListener('ended',function(e){
current++;
if(current < len){
link = playlist.find('a')[current];
run($(link),audio[0]);
}
});
| 归档时间： |
|
| 查看次数： |
16328 次 |
| 最近记录： |