使用 javascript 和 jquery 从 JSON 添加下一个和上一个按钮到 HTML5 音频播放器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11035612/
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
Add Next and Previous button to HTML5 audio player from JSON using javascript and jquery
提问by Johan
I'm building a music player that needs a next and previous button. My playlist is returned from my database as a JSON object. The problem I'm encountering is getting the next and previous buttons to work. I have created a jsFiddle with the code. Does anybody know how to make the next and previous buttons work?
我正在构建一个需要下一个和上一个按钮的音乐播放器。我的播放列表作为 JSON 对象从我的数据库返回。我遇到的问题是让下一个和上一个按钮起作用。我用代码创建了一个jsFiddle。有人知道如何使下一个和上一个按钮起作用吗？
UPDATE:
更新：
This question pertains more on how to get the next previous value in the JSON array. I really just need to display the name of the next and previous song in the JSON array.
这个问题更多地涉及如何获取 JSON 数组中的下一个前一个值。我真的只需要在 JSON 数组中显示下一首和上一首歌曲的名称。
Markup:
标记：
<a id="prev-bt" href="#">
<div class="player-musicnav-rw-column1">
<ul class="musicnav-rw">
<li class="rw"></li>
</ul>
</div></a>
<audio id="audio-player" name="audio-player" src="" ></audio>
<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">NEXT</li>
</ul>
</div>
</a>
<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">PREV</li>
</ul>
</div>
</a>
<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>?
Code:
代码：
var whichsong = 0;
$(document).ready(function() {
$("#play-bt").click(function() {
$("#audio-player")[0].play();
})
$("#pause-bt").click(function() {
$("#audio-player")[0].pause();
$("#message").text("Music paused");
})
$("#stop-bt").click(function() {
$("#audio-player")[0].pause();
$("#audio-player")[0].currentTime = 0;
})
$('#player-handwriting-title').click(function() {
$('#player-digital-title').html($(this).html());
});
$("#next-bt").click(function() {
$("#audio-player")[0].pause();
$("#audio-player")[0].src = '';
whichsong++;
if (whichsong == treeObj.root.length) {
whichsong = 0;
}
$("#audio-player")[0].src = treeObj.root[whichsong];
if (playing) {
$("#audio-player")[0].play();
}
})
$("#prev-bt").click(function() {
$("#audio-player")[0].pause();
$("#audio-player")[0].src = '';
whichsong++;
if (whichsong == treeObj.root.length) {
whichsong = 0;
}
$("#audio-player")[0].src = treeObj.root[whichsong];
if (playing) {
$("#audio-player")[0].play();
}
})
});
$(document).ready(function() {
var treeObj = {
"root": [{
"id": "1",
"trackName": "Whippin Post"},
{
"id": "2",
"trackName": "Sweet Caroline"},
{
"id": "3",
"trackName": "Tears in Heaven"},
{
"id": "4",
"trackName": "Ain't She Sweet"},
{
"id": "5",
"trackName": "Octopus' Garden"},
{
"id": "6",
"trackName": "Teen Spirit"},
{
"id": "7",
"trackName": "Knockin on Heaven's Door"}]
};
var $ul = $("<ul></ul > ");
$.each(treeObj.root, function(i, v) {
$ul.append(
$(" < li > < /li>").append($("<a></a > ").attr({
"
href ": v.id,
"
data - file ": v.trackFile
}).html(v.trackName)));
});
$("#player - handwriting - title ").empty().append($ul);
$("#player - handwriting - title a ").click(function() {
var name = $(this).html(),
filename = $(this).attr("
data - file ");
filename2 = "
upload - form / upload / " + filename;
$('#player-digital-title').html($(this).html());
document.getElementById('audio-player').src = filename2;
$("#audio - player ")[0].play();
return false;
});
});?
I think I'm very close but I just can't quite seem to get it to work.
我想我已经很接近了，但我似乎无法让它发挥作用。
采纳答案by Bruno
You need to do a .load() on the audio element after swapping the src and before doing .play(). But besides that, the code seems to be broken (you dont need script tags on the javascript field on jsfiddle, and when removing them, everything breaks) :(
在交换 src 之后和执行 .play() 之前，您需要在音频元素上执行 .load()。但除此之外，代码似乎已损坏（您不需要在 jsfiddle 上的 javascript 字段上使用脚本标记，并且在删除它们时，一切都会中断）:(
Perhaps you can try using jPlayer to do the job: http://jplayer.org/
也许您可以尝试使用 jPlayer 来完成这项工作：http://jplayer.org/
Also, take a look here: http://www.longtailvideo.com/html5/loading/View source and take a look at the setSrc function.
另外，请看这里：http: //www.longtailvideo.com/html5/loading/查看源代码并查看 setSrc 函数。
回答by Keyslinger
Someone seems to have worked out how it's done here.
似乎有人已经弄清楚它是如何在这里完成的。
They were also kind enough to provide an exhaustive review of the method used to accomplish this: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
他们也很友好地提供了用于完成此操作的方法的详尽评论：http: //jonhall.info/how_to/create_a_playlist_for_html5_audio
His approach begins by loading all the tracks into an array:
他的方法首先将所有轨道加载到一个数组中：
tracks = [
{"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"},
{"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"},
{"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"},
{"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"},
{"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"}
]
The "next" button advances the track using the current track's index in the array for reference:
“下一步”按钮使用数组中当前曲目的索引推进曲目以供参考：
btnNext = $('#btnNext').click(function() {
if((index + 1) < trackCount) {
index++;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
})
A function is used to replace the source attribute of the audio element with the new track:
一个函数用于用新轨道替换音频元素的源属性：
loadTrack = function(id) {
$('.plSel').removeClass('plSel');
$('#plUL li:eq(' + id + ')').addClass('plSel');
npTitle.text(tracks[id].name);
index = id;
audio.src = mediaPath + tracks[id].file + extension;
}
