HTML5/JavaScript 音频播放列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14106933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5/JavaScript audio playlist
提问by codenamejupiterx
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.
我在博客文章HTML5 音频和视频以及如何制作播放列表中找到了关于如何使用 HTML5 和 JavaScript 构建播放列表的不错教程。我按照说明操作，但没有得到正确的结果。
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>
回答by Juan Mellado
1)JavaScript code is using jQuery (those $(...)statements), so it must be imported:
1)JavaScript 代码使用 jQuery（那些$(...)语句），因此必须导入：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
...
2)The audioHTML element (the real "player") is missed:
2）的audioHTML元素（真正的“玩家”）被遗漏：
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" >
<source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
</audio>
...
3)The code play only TWO songs. To play THREE:
3）代码只播放两首歌曲。玩三：
...
len = tracks.length; //"-1" removed
...
4)The code play again and again the three songs. To stop it:
4）代码反复播放三首歌曲。要停止它：
audio[0].addEventListener('ended',function(e){
current++;
if(current < len){
link = playlist.find('a')[current];
run($(link),audio[0]);
}
});
回答by Preejith augustine
Using jQuery I do have achieved this by using the following control.
使用 jQuery 我确实通过使用以下控件实现了这一点。
Add the audio Control tag with following parameters:
添加具有以下参数的音频控制标签：
<audio id="audio1" controls="controls" autoplay="autoplay"> </audio>
And in JavaScript:
在 JavaScript 中：
jQuery(function($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if (supportsAudio) {
url = URL.baseUrl + Books + authors + "/" + subject + "/data.json";
$.getJSON(url, function(data){
console.log("ddd"+JSON.stringify(data));
var index = 0,
trackCount = data.URL.length,
npAction = $('#npAction'),
npTitle = $('#npTitle'),
audioid = $('#audio1').bind('play', function() {
}).bind('ended', function() {
if((index + 1) < trackCount) {
index++;
loadTrack(index);
audioid.play();
}
else {
audioid.pause();
index = 0;
loadTrack(index);
}
}).get(0),
loadTrack = function(id) {
index = id;
audioid.src = data.URL[index].ayah;
};
loadTrack(index);
});
}
});
