Introduction to the use of web audio and video player jPlayer

Recently, audio needs to be played in the project.
The video has been done before, and the function of playing audio must be added, and it must be compatible with ie8, and download is prohibited.

It doesn't matter if it is forbidden to download, because it is impossible to prohibit. If it
is compatible with ie8, it cannot be used <audio>. It is only supported by ie series ie9+ audio. For specific compatibility, please see: https://caniuse.com/#search=audio .

After looking for a long time, I found that jPlayer is compatible with the ie series, so I used it.
In fact, I also read it, MediaElement.js supports both audio/video, but it does not support ie8, so I gave up.
If you don't consider ie8, you can consider MediaElement.js , The example on the official website also supports mobile style, which feels good.

I will not explain too much about the detailed api of jPlayer here, but just show the basic usage.
If you have more needs, please check the corresponding development manual .

You can download the latest code compression package from its github: https://github.com/jplayer/jPlayer/releases ,
I am using version 2.9.2: https://github.com/jplayer/jPlayer/ After the archive/2.9.2.zip is
downloaded, the official example has a clear usage method. Here is my php code template, the reference is very simple:

The following is the specific code:

<?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}

Actual reference (assuming the template above is called tpl_audio_player.html):

<?php
$_p_audioUrl = 'http://yourdomain/path/to/xxx.mp3'
include '/path/to/tpl_audio_player.html';
?>

The screenshot of the actual effect is as follows (UI adjusted):

Additional corrections are welcome!