一、簡介
jPlayer : 基於HTML5/Flash的音頻、視頻播放器
jPlayer是一個JavaScript寫的完全免費和開源 (MIT) 的jQuery多媒體庫插件 (現在也是一個Zepto插件);
jPlayer可以讓你迅速編寫一個跨平台的支持音頻和視頻播放的網頁.
jPlayer的豐富API可以讓你創建一個個性化多媒體應用，因此也獲得越來越多的社區成員的支持和鼓勵。
官網:www.jplayer.cn
英文：www.jplayer.org
二、示例
jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官網下載），還要准備一個音頻文件
<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
各個瀏覽器的支持各有有所不同
HTML5實現簡單的語音播放
<div> <audio id="myaudio" src="@Url.Content("~/Content/audio/dingdong.wav")" controls="controls" preload="auto" hidden="true"></audio> <input type="button" onclick="autoPlay()" value="播放"/> </div> <script language="javascript" type="text/javascript"> var myAuto = document.getElementById('myaudio'); function autoPlay(){ myAuto.play(); } </script>
關於蘋果sarify自動播放問題
原文：https://www.cnblogs.com/wtm930302/p/7722922.html
<audio id="bgaudio" autoplay preload loop src="/content/love.mp3"></audio>
<script type="text/javascript">
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 還需要額外的 load 一下, 否則直接 play 無效
audioEl.play(); // iOS 7/8 僅需要 play 一下
}
var audioEl = document.getElementById('bgaudio');
// 可以自動播放時正確的事件順序是
// loadstart
// loadedmetadata
// loadeddata
// canplay
// play
// playing
//
// 不能自動播放時觸發的事件是
// iPhone5 iOS 7.0.6 loadstart
// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
audioEl.addEventListener('loadstart', function() {
log('loadstart');
}, false);
audioEl.addEventListener('loadeddata', function() {
log('loadeddata');
}, false);
audioEl.addEventListener('loadedmetadata', function() {
log('loadedmetadata');
}, false);
audioEl.addEventListener('canplay', function() {
log('canplay');
}, false);
audioEl.addEventListener('play', function() {
log('play');
// 當 audio 能夠播放后, 移除這個事件
window.removeEventListener('touchstart', forceSafariPlayAudio, false);
}, false);
audioEl.addEventListener('playing', function() {
log('playing');
}, false);
audioEl.addEventListener('pause', function() {
log('pause');
}, false);
// 由於 iOS Safari 限制不允許 audio autoplay, 必須用戶主動交互(例如 click)后才能播放 audio,
// 因此我們通過一個用戶交互事件來主動 play 一下 audio.
window.addEventListener('touchstart', forceSafariPlayAudio, false);
//audioEl.src = 'http://www.w3school.com.cn/i/song.mp3';
})();
</script>