建立網站的自定義mp3播放器 - 無法弄清楚如何編寫播放最後一首歌曲，播放下一首歌曲的功能

Question

我在我的網站ustreet.com上建立一個可以通過自定義按鈕控制的mp3播放器放在我的HTML。

這裏是什麼樣子的圖片：

JSript內置了音頻對象控件播放和暫停，我已經想通了這些，你可以看到：

   <div class = "mp3Player" style="display: inline-block; width:100%"> 

        <audio id="music" src = "LetsDance.mp3" type = "audio/mp3"></audio> 

        <a class = "last" style="margin-left: 1em; float: left; display: inline-block; vertical-align:158%; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); font-size: 100%" onclick="previous()" class="button">►►</a>      
        <a class = "play" style="display: inline-block; vertical-align:134%;" onclick="music.play()" class="button">►</a> 
        <a class = "pause" style="font-weight: bold; display: inline-block; vertical-align:134%;" onclick="music.pause()" class="button">ll</a> 
        <a class = "next" style="margin-right: 1em; float: right; display: inline-block; vertical-align:145%; font-size: 100%" onclick = "next()" class="button">►►</a>      

       </div> 

我有MP3文件的源名稱也數組：

mp3sources = ["a.mp3","b.mp3","c.mp3","d.mp3"]; 

我想弄清楚如何編寫一個函數來同步這些按鈕與這個數組被調用的音頻對象。當網站首次加載時，播放按鈕將在mp3sources中提示第一個字符串。點擊下一個按鈕會提示列表中的下一首歌曲播放，點擊最後一首歌曲會提示陣列中的上一首歌曲。請幫我寫這個函數 - 我不太擅長JScript。我在PHP更好。

Answer 1

這是完全正常工作的代碼（與舊瀏覽器兼容，你可以使用一些flash fallback）：

HTML：

<div class="mp3Player"> 
    <audio id="music"></audio> 
    <a id="last" class="last" class="button">◄◄</a> 
    <a id="play" class="play" class="button">►</a> 
    <a id="pause" class="pause" class="button">ll</a> 
    <span id="info"></span> 
    <a id="next" class="next" class="button">►►</a> 
</div> 

JS：

function run() { 
    var i = 0; // current song index 
    var songList = [ 
     'a.mp3', 
     'b.mp3', 
     'c.mp3', 
     'd.mp3']; 

    var audiocontainer = document.getElementById('mp3Player'); 
    var ae = document.getElementById('music'); 
    ae.src = songList[0]; 
    var infoDiv = document.getElementById('info'); 
    var btnLast = document.getElementById('last'); 
    var btnPlay = document.getElementById('play'); 
    var btnPause = document.getElementById('pause'); 
    var btnNext = document.getElementById('next'); 

    //add event handlers 
    ae.onplay = function() { 
     infoDiv.innerHTML = 'Now playing #' + (i + 1) + ' ' + songList[i]; 
    }; 
    ae.onended = function() { 
     next(); 
    }; 
    btnPlay.onclick = function() { 
     //if (ae.paused) 
     ae.play(); 
     //else ae.pause(); 
    }; 
    btnPause.onclick = function() { 
     ae.pause(); 
    }; 
    btnLast.onclick = previous; 
    btnNext.onclick = next; 
    //ae.play(); //to start playing automatically when when page is loaded 

    function previous() { 
     i = (i > 0) ? i - 1 : songList.length - 1; // choose previous index 
     ae.setAttribute("src", songList[i]); 
     ae.play(); 
    } 

    function next() { 
     i = (i < songList.length - 1) ? i + 1 : 0; // choose next index 
     ae.setAttribute("src", songList[i]); 
     ae.play(); 
    } 
} 

http://jsfiddle.net/F35Fw/5/（只有基本css造型）
http://jsfiddle.net/F35Fw/5/show（源碼下載到電腦頁面）