Html5 Audio Player Air

不知為什麽忽然想做一個audio標簽的簡單播放器。

簡單的框架很容易做,之後就開始javascript部分,本來就不太熟悉javascript,都是看著資料照抄的多。依照這裏的內容很簡單就做了一個按鈕,單純的一個播放暫停按鈕就夠了。

但是遇到一個問題,就是當播放完畢之後怎樣讓暫停按鈕變回播放按鈕?單純看著這裏寫著ended根本不知道是什麽。

之後繼續找到一個說名得比較詳細的資料(不記得地址了),但是對javascript的不熟悉而看不明白。最後還是覺得找一下英文資料可能會有。

直接找到: http://stackoverflow.com/quest…

簡單一段javascript就完成(本來就不復雜,只是我對javascript只懂皮毛)。

myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

    <div id="Main">
      <div class="audio">
        <audio id="music" onended="ended()">
          <source src="https://dl.dropbox.com/u/6450050/audios/lady_fox_X_me_SS_Phone_Ring.ogg" />
          <!-- firefox不支持mp3格式所以必須有一個ogg格式 -->
          <source src="https://dl.dropbox.com/u/6450050/audios/lady_fox_X_me_SS_Phone_Ring.mp3" />
          您的設備不支持音HTML5!
        </audio>
        <div id="audio_play_stop"></div>
        Lady fox X me SS Phone Ring
      </div>
    </div>
.audio {
    width: 292px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.3);
    background-color: #444;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#444), to(#111));
    background: -moz-linear-gradient(top, #444, #111);
    border-bottom: 1px solid #000;
    overflow: hidden;
    padding: 4px;
    margin: 10px 0px;
    border-radius: 5px;
    color: #fff;
}
#audio_play_stop {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 5px;
    display: block; 
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(audio_play_stop.png);
}
jQuery(function($) {
  var music = document.getElementById("music");
  $("#audio_play_stop").click(function(){
    if (music.paused) {
          $(this).css("background-position","0px -16px");
          music.play();
        }
        else {
          $(this).css("background-position","0px 0px");
          music.pause();
        } 
  });
    music.addEventListener('ended', function() {
          $("#audio_play_stop").css("background-position","0px 0px");
      }, false);
});