不知為什麽忽然想做一個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);
});