首先推上神器 jPlayer : 基於HTML5/Flash的音頻、視頻播放器 jPlayer是一個JavaScript寫的完全免費和開源 (MIT) 的jQuery多媒體庫插件 (現在也是一個Zepto插件); jPlayer可以讓你迅速編寫一個跨平臺的支持音頻和視頻播放的網頁. jPlayer的 ...
首先推上神器
jPlayer : 基於HTML5/Flash的音頻、視頻播放器
jPlayer是一個JavaScript寫的完全免費和開源 (MIT) 的jQuery多媒體庫插件 (現在也是一個Zepto插件);
jPlayer可以讓你迅速編寫一個跨平臺的支持音頻和視頻播放的網頁.
jPlayer的豐富API可以讓你創建一個個性化多媒體應用，因此也獲得越來越多的社區成員的支持和鼓勵。
官網:www.jplayer.cn
英文：www.jplayer.org
1.準備
jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官網下載）
還有一個音頻文件
2.代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>清冽叮咚簡訊音</title>
</head>
<body>
<div id="play-box">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jplayer.min.js" type="text/javascript"></script>
<script type="text/javascript">
function toplay(){
var playerc = $("#jquery_jplayer_1");
if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) {
playerc.jPlayer("setMedia", {
m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用網路資源，自行設定音頻文件
}).jPlayer("play");//jPlayer("play") 用來自動播放
}else {
playerc.jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上
}).jPlayer("play");//同上
},
swfPath: "include/javascript",
supplied: "m4a" //acc屬於M4A
});
}
}
setInterval(function(){
toplay();
},3000);//3秒迴圈播放
</script>
</body>
</html>
附：HTML5支持的音頻文件
文件格式 媒體類型
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
各個瀏覽器的支持各有有所不同
