HTML5使用jplayer播放音频、视频
一、简介
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>
