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