最近项目中需要播放音频.
视频之前的已经做了, 要加上播放音频的功能, 还要兼容ie8, 还要禁止下载.
禁止下载这个就不管了, 因为不可能禁止.
要兼容ie8, 就不能用<audio>
了, ie系列ie9+才支持audio
, 具体兼容性请看: https://caniuse.com/#search=audio.
找了半天, 发现jPlayer兼容ie系列, 就用它了.
其实也看了下, MediaElement.js音频/视频都支持, 不过它不支持ie8, 无奈放弃了.
如果不考虑ie8, 可以考虑MediaElement.js, 官网的例子还支持移动端样式, 感觉不错.
关于jPlayer详细api这里不做过多解释, 只是展示下基本使用.
如果有更多的需要, 请查看相应的开发手册.
从它的github就可以下载到最新的代码压缩包: https://github.com/jplayer/jPlayer/releases,
我用的是2.9.2版本的: https://github.com/jplayer/jPlayer/archive/2.9.2.zip
下载之后, 官方给的示例已经有明确的使用方式了, 这里是我的php代码模板, 引用非常简单:
下面是具体代码:
<?php
/*
需要传入$_p_audioUrl作为播放地址
**此插件需要jquery在其之前加载**
*/
?>
<?php
// jplayer插件根目录
$_p_jplayerRootPath = 'http://yourdomain/path/to/jplayer';
?>
{if $_p_audioUrl}
<link href="{$_p_jplayerRootPath}/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$_p_jplayerRootPath}/jplayer/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<!-- <div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div> -->
</div>
</div>
<div class="jp-no-solution">
<span>提示</span>
您需要升级浏览器或者安装<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>来播放这段音频
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var stream = {
mp3: "{$_p_audioUrl}"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "{$_p_jplayerRootPath}/jplayer",
supplied: "mp3",
preload: "none",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
keyEnabled: true
});
});
//]]>
</script>
{/if}
实际引用(假定上面的模板叫tpl_audio_player.html
):
<?php
$_p_audioUrl = 'http://yourdomain/path/to/xxx.mp3'
include '/path/to/tpl_audio_player.html';
?>
实际效果截图如下(ui调整过):
欢迎补充指正!