使用javascript和jquery將下一個和上一個按鈕添加到來自JSON的HTML5音頻播放器

Question

我正在構建需要下一個和上一個按鈕的音樂播放器。我的播放列表作爲JSON對象從我的數據庫中返回。我遇到的問題是獲取下一個和上一個按鈕的工作。我創建了一個jsFiddle with the code。有人知道如何使下一個和上一個按鈕有效嗎？

UPDATE：

這個問題涉及更多關於如何獲得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（）。但除此之外，代碼似乎被打破（你不需要腳本標籤上的JavaScript領域上的jsfiddle，並刪除它們時，一切都休息）:(

或許你可以嘗試使用jPlayer做的工作：http://jplayer.org/

而且，看看這裏：http://www.longtailvideo.com/html5/loading/ 查看源代碼，並採取看看setSrc功能

Answer 2

似乎有人計算出它是如何做here

他們也是好心提供的。詳盡的審查方法OD用於實現此目的： 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; 
}