2

次と前のボタンが必要な音楽プレーヤーを構築しています。プレイリストはデータベースから JSON オブジェクトとして返されます。私が直面している問題は、次のボタンと前のボタンを機能させることです。コードで jsFiddle を作成しました。次と前のボタンを機能させる方法を知っている人はいますか?

アップデート：

この質問は、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;
    });
});​

私は非常に近いと思いますが、うまく機能させることができないようです。

4

2 に答える 2

1

src を交換した後、.play() を実行する前に、オーディオ要素に対して .load() を実行する必要があります。しかし、それに加えて、コードが壊れているようです（jsfiddleのjavascriptフィールドにスクリプトタグは必要ありません。それらを削除すると、すべてが壊れます）:(

おそらく、jPlayer を使って仕事をすることができます: http://jplayer.org/

また、こちらもご覧ください: http://www.longtailvideo.com/html5/loading/ ソースを表示し、setSrc 関数を見てください。

于 2012-06-14T15:26:29.427 に答える