使用 javascript 和 jquery 从 JSON 向 HTML5 音频播放器添加下一个和上一个按钮

Question

我正在构建一个需要下一个和上一个按钮的音乐播放器。我的播放列表作为 JSON 对象从我的数据库返回。我遇到的问题是让下一个和上一个按钮工作。我创建了一个jsFiddle with the code。有人知道如何使下一个和上一个按钮起作用吗？

更新：

这个问题更多地涉及如何获取 JSON 数组中的下一个前一个值。我真的只需要在 JSON 数组中显示下一首和上一首歌曲的名称。

标记：

<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>​

代码：

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;
    });
});​

我想我已经很接近了，但我似乎无法让它发挥作用。

Answer 1

您需要在交换 src 之后和执行 .play() 之前对音频元素执行 .load()。但除此之外，代码似乎被破坏了（你不需要 jsfiddle 上的 javascript 字段上的脚本标签，当删除它们时，一切都会中断）:(

也许你可以尝试使用 jPlayer 来完成这项工作：http://jplayer.org/

另外，请看这里：http://www.longtailvideo.com/html5/loading/ 查看源码，看看setSrc函数。

Answer 2

似乎有人知道它是如何做到的here。

他们也很友好地对用于实现此目的的方法进行了详尽的审查： http://jonhall.info/how_to/create_a_playlist_for_html5_audio

他的方法首先将所有曲目加载到一个数组中：

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"}
]

“下一步”按钮使用当前曲目在数组中的索引前进曲目以供参考：

btnNext = $('#btnNext').click(function() {
    if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        if(playing) {
            audio.play();
        }
    } else {
        audio.pause();
        index = 0;
        loadTrack(index);
    }
})

一个函数用于将音频元素的源属性替换为新的轨道：

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;
}