网页音视频播放器jPlayer使用介绍

最近项目中需要播放音频.
视频之前的已经做了, 要加上播放音频的功能, 还要兼容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">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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调整过):

欢迎补充指正!