jPlayer (2.5.0) を使ってみる

2013年12月15日

以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。

以下は「jPlayer 2.5.0 Quick Start Guide」から。

ダウンロードと配置

jPlayer をダウンロードして、JavaScript ファイル（jquery.jplayer.min.js）と SWF ファイル（Jplayer.swf）を適当なディレクトリに配置（/js/jquery.jplayer.min.js、/js/Jplayer.swf など）。

jPlayer Download ページ

jQuery の読み込み

head 要素内や body 要素の閉じタグの直前などに jQuery と jquery.jplayer.min.js を読み込む。

<head>
・・・省略・・・
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../../js/jquery.jplayer.min.js"></script>
</head>

jPlayer skin のダウンロードと配置

ダウンロードページから好きなスキンをダウンロードして適当なディレクトリ（この例では skin ディレクトリ）に CSS ファイル（例：jplayer.blue.monday.css）と image ファイルを配置。

配置した CSS を読み込む（JavaScript ファイルの前に読み込む）。

<link href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/js/jquery.jplayer.min.js"></script>

jPlayer を HTML に追加

jPlayer の構成に必要な2つの div 要素とその id 属性

<div id=”jquery_jplayer_1″ class=”jp-jplayer”></div>
<div id=”jp_container_1″ class=”jp-audio”> …</div>

1. jPlayer の div 要素：jPlayer に対するコマンドはこの id を使って指定。以下の例では「jquery_jplayer_1」

$("#jquery_jplayer_1")...

2. jPlayer のスタイルを指定する最上位の div 要素（cssSelectorAncestor）：この id を使って CSS を指定。以下の例では「jp_container_1」

またインターフェース（ボタンやバーなど）を利用するための、クラス属性（jp-controls、jp-playなど）がある。

Default cssSelector

HTML の記述例（クラス名によってボタンや領域が指定されているのでスタイルの調整に使う）
以下は「jp-audio jp-type-single」のスタイルが適用される。この他に「jp-audio-stream」「jp-video 」「jp-audio div.jp-type-playlist」などがあるが、それらは「デモ」や「サンプル」を見るとよい。

<body>
  <!--ここから-->
  <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 class="jp-time-holder"><!--時間表示部分-->
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles"><!--リピートボタン部分-->
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
      <div class="jp-title"><!--タイトル表示部分-->
        <ul>
          <li>Bubble</li>
        </ul>
      </div>
      <div class="jp-no-solution"><!--アップデートを促す表示部分-->
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
  </div>
  <!--ここまで-->
</body>

この時点では、以下のようにそれぞれのインターフェースが崩れた状態で表示され、クリックしても何も起きない。

JavaScript の追加

以下の JavaScript を jPlayer プラグインの読み込みの後に記述。

<script>
jQuery(function($){
   $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4a: "/audio/m4a/xxx-07-Bubble.m4a",
            oga: "/audio/ogg/xxx-07-Bubble.ogg"
          });
        },
        swfPath: "/js",
        supplied: "m4a, oga"
      });
});
</script>

$(“#jquery_jplayer_1”).jPlayer(options) ： jPlayer のコンストラクト

$("#jquery_jplayer_1").jPlayer({
  // オプション（JSON オブジェクト）
});

ready プロパティ： jPlayer ready イベントハンドラ
swfPath プロパティ： Flash のフォールバック用の SWF ファイルへのパスを指定
（重要）このパスの指定が間違っていると、HTML5 で再生されない場合にフラッシュで再生されない。
supplied プロパティ：再生するファイルのフォーマットを指定（上記の例の場合 M4A または OGA）

{
  ready: function () {
    // jPlayer の準備ができたら実行される処理を記述
    //　（再生する曲とそのメディアの指定や、再生の指定など）
  },
  swfPath: "/js",
  supplied: "m4v, oga"
}

ready イベントハンドラの $(this) は jPlayer の div 要素（#jquery_jplayer_1）
jPlayer(“setMedia”, media)： jPlayer のメディアを設定（supplied プロパティと合わせる）。ユーザの環境で再生可能な形式が自動的に選択される。

ready: function () {
  $(this).jPlayer("setMedia", {
    m4a: "/audio/m4a/Miaow-07-xxx.m4a",
    oga: "/audio/ogg/Miaow-07-xxx.oga"
  });
}

以上で再生が可能になるので、あとは再生する曲やメディアを指定する。

swfPath プロパティのパスの確認

Flash のフォールバック用の SWF ファイルへのパスの確認方法。

参考「swfPath」

コンストラクタのオプションに「solution:”flash, html”」を追加（テスト終了後は削除）
swfPath が正しくないとエラー（$.jPlayer.event.error）が発生する
ローカル環境でのエラーの例：NetworkError: 404 Not Found – http://localhost/xxxxx/js/Jplayer.swf

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            mp3:that.attr('data-src')
        }).jPlayer("play");
    },
    swfPath: "../../js",
    solution:"flash, html",  //テスト用オプション
    supplied: "mp3"
});

solution オプション

参考：「solution」

デフォルト値： “html, flash”

HTML と Flash のプライオリティを指定。
デフォルトでは最初に HTML を選択してフォールバックとして Flash を指定。
順番を入れ替える（”flash, html”）と Flash が優先される。
「supplied」のフォーマットやブラウザにより、jPlayer は両方を使用することもある。
片方だけの指定は推奨されない（両方を指定するようにする）。

supplied オプション

参考：「supplied」

デフォルト値：”mp3″

メディアのフォーマットを指定。複数記述する場合、左側の記述が優先される（プライオリティが高い）。

必須のメディアフォーマット

参考：「Essential jPlayer Media Formats」

より多くのブラウザで再生可能にするため jPlayer に指定する必須のメディアフォーマットは以下のとおり。

オーディオ：「MP3」または「M4A」を指定
ビデオ：「M4V」を指定

Note that for audio, you must supply either M4A or MP3 files to satisfy both HTML5 and Flash solutions.

カスタマイズ例

以下はオーディオを1曲ずつ再生する場合の、単純な例。

HTML

この例では、最大ボリュームやリピートは使用しないので、HTML の記述から外したり以下の様な変更をした。

曲のタイトルを表示する部分（class=”jp-title” の li 要素）は空白にしておく
フラッシュプレーヤーが古かったりした場合に表示されるメッセージを日本語に変更
コントロール部品の title 属性（マウスオーバー時に表示される）を追加したり日本語に変更

jPlayer の HTML

<div id="jplayer">
   <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-stop" tabindex="1" title="閉じる">stop</a></li>
          <li><a href="javascript:;" class="jp-play" tabindex="1" title="再生">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1" title="停止">pause</a></li>         
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="ミュート">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="ミュート解除">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 class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <!--リピートも削除<ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>-->
        </div>
      </div>
      <div class="jp-title">
        <ul>
          <li></li>
        </ul>
      </div>
      <div class="jp-no-solution">
        <span>アップデートが必要です</span>
        曲を再生するには、ブラウザを最新のものにアップデートするか、<a href="http://get.adobe.com/flashplayer/" target="_blank">フラッシュプレイヤー</a>を最新のものにする必要があります。
      </div>
    </div>
  </div>
</div>

再生する曲は ol 要素で記述して、内側の a 要素の「data-src」属性にオーディオファイルの URL を記述。（href 要素に記述しても良いと思う）

曲のリストのHTML

<div class="cd">
<ol>
<li><a href="#" data-src="01.mp3">Song 1</a></li>
<li><a href="#" data-src="02.mp3">Song 2</a></li>
<li><a href="#" data-src="03.mp3">Song 3</a></li>
......
<li class="last"><a href="#" data-src="03.mp8">Song 8</a></li>
</ol>
</div><!-- end of .cd -->

CSS

スタイルは「jplayer.blue.monday.css」を編集。この例ではビデオやプレイリストの機能は使用しないのでその部分は削除。（サンプル画像とは異なる）

CSS

/*-------audio jPlayer---------  */
div.jp-audio,
div.jp-audio-stream,
div.jp-video {
  font-size:1.25em; 
  font-family:Verdana, Arial, sans-serif;
  line-height:1.6;
  color: #666;
  padding: 5px;
}
//インターフェース（プレイヤー）の幅
div.jp-audio {  
  width:240px;
}
//インターフェースの色やポジションの指定等
div.jp-interface {  
  position: relative;
  background-color:#111;
  width:100%;
}
//インターフェースの高さ
div.jp-audio div.jp-type-single div.jp-interface {
  height:40px;
}
//コントロール部分の指定
div.jp-interface ul.jp-controls {
  list-style-type:none;
  margin:0;
  padding: 0;
  overflow:hidden;
}
div.jp-audio ul.jp-controls {
  width: 240px;
  padding:7px 0 0 10px;
}
div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {
  display:inline;
  float: left;
}
//ボタンなどの文字列は非表示にしている
div.jp-interface ul.jp-controls a {
  display:block;
  overflow:hidden;
  text-indent:-9999px;
}
//再生、ポーズボタン
a.jp-play,
a.jp-pause {
  width:15px;
  height:15px;
  padding-left: 10px;
  margin-left: 10px;
}
//再生、ポーズボタンの背景画像の指定
a.jp-play {
  background: url("../images/audio/play.png") 0 0 no-repeat;
}
a.jp-play:hover {
  background: url("../images/audio/play_hover.png") 0 0 no-repeat;
}
a.jp-pause {
  background: url("../images/audio/pause.png") 0 0 no-repeat;
  display: none;
}
a.jp-pause:hover {
  background: url("../images/audio/pause_hover.png") 0 0 no-repeat;
}
a.jp-stop {
  background: url("../images/audio/stop.png") 0 0 no-repeat;
  width:16px;
  height:16px;
}
a.jp-stop:hover {
  background: url("../images/audio/stop_hover.png") 0 0 no-repeat;
}
/* @group progress bar */
//プログレスバー（曲のどの位置かを表示する部分）の全体
div.jp-progress {
  overflow:hidden;
  background-color: #ddd;
}
div.jp-audio div.jp-progress {
  position: absolute;
  top:7px;
  height:12px;
}
div.jp-audio div.jp-type-single div.jp-progress {
  left:60px;
  width:100px;
}
//プログレスバーの内側
div.jp-seek-bar {
  background: url("../images/audio/jplayer.blue.monday.jpg") 0 -202px repeat-x;
  width:0px;
  height:100%;
  cursor: pointer;
}
//プログレスバーの内側（色の付いた部分）
div.jp-play-bar {
  background: url("../images/audio/jplayer.blue.monday.jpg") 0 -218px repeat-x ;
  width:0px;
  height:100%;
}
/* The seeking class is added/removed inside jPlayer */
//ロード中の表示
div.jp-seeking-bg {
  background: url("../images/audio/jplayer.blue.monday.seeking.gif");
}
/* @end */
//ボリュームやミュートの部分
/* @group volume controls */
a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
  width:18px;
  height:15px;
  margin-top:12px;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
  position: absolute;
  top: -5px;
  left: 170px;
}
a.jp-mute {
  background: url("../images/audio/volume.png") 0 0 no-repeat;
}
a.jp-mute:hover {
  background: url("../images/audio/mute_hover.png") 0 0 no-repeat;
}
a.jp-unmute {
  background: url("../images/audio/mute.png") 0 0 no-repeat;
  display: none;
}
a.jp-unmute:hover {
  background: url("../images/audio/volume_hover.png") 0 0 no-repeat;
}
div.jp-volume-bar {
  position: absolute;
  overflow:hidden;
  background: url("../images/audio/jplayer.blue.monday.jpg") 0 -250px repeat-x;  
  width:30px;
  height:5px;
  cursor: pointer;
}
div.jp-audio div.jp-volume-bar {
  top:12px;
  left:195px;
}
div.jp-volume-bar-value {
  background: url("../images/audio/jplayer.blue.monday.jpg") 0 -256px repeat-x;
  background: url("../images/audio/volume_bar.jpg") 0 0 repeat-x;
  width:0px;
  height:5px;
}
/* @end */
/* @group current time and duration */
//曲の長さと現在まで再生された時間を表示する部分
div.jp-audio div.jp-time-holder {
  position:absolute;
  top:20px;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
  left:60px;
  width:100px;
}
div.jp-current-time,
div.jp-duration {
  font-style:oblique;
  width:45px;
  font-size:.60em;
  color: #EEE;
}
div.jp-current-time {
  float: left;
  display:inline;
}
div.jp-duration {
  float: right;
  display:inline;
  text-align: right;
}

/* @group playlist */
//再生する曲のタイトル部分
div.jp-title {
  text-align:center;
}
div.jp-title,
div.jp-playlist {
  width:100%;
}
div.jp-title ul,
div.jp-playlist ul {
  list-style-type:none;
  margin:0;
  padding:0 20px;
  font-size:.68em;
}
div.jp-title li {
  padding:5px 0;
}
//曲のタイトルの前に音符を表示（audio.js からパクリ）
div.jp-title li:before { 
  content: '♬ : '; 
}
//<div id=”jquery_jplayer_1″ class=”jp-jplayer”></div>の高さと幅は 0
div.jp-jplayer audio,
div.jp-jplayer {
  width:0px;
  height:0px;
}
div.jp-jplayer {
  background-color: #000000;
}
/* @group NO SOLUTION error feedback */
//フラッシュのアップデートが必要ですなどのメッセージの部分
.jp-no-solution {
  padding:5px;
  font-size:.7em;
  background-color:#eee;
  border:2px solid #009be3;
  color:#000;
  display:none;
}
.jp-no-solution a {
  color:#000;
}
.jp-no-solution span {
  font-size:1em;
  display:block;
  text-align:center;
  font-weight:bold;
}
/* @end */

JavaScript

最初は #jplayer （全体を囲む div 要素）を非表示に
曲のリンクをクリックすると、まずメディアをクリア（その前に再生していた曲をクリア）
jPlayer を一度破棄
リンクのテキストから曲名を取得
jPlayer を ol 要素の後に追加してフェードインで表示
「setMedia」でリンク（a 要素）から取得したメディアの URL とメディアの種類（MP3)を指定
.jPlayer(“play”)ですぐに再生
ストップボタンをクリックしたら非表示に

jQuery(function($){
  $('#jplayer').css('display', 'none');      
  $('.cd ol li a').click(function() {
    var that = $(this);
    $("#jquery_jplayer_1").jPlayer( "clearMedia" );
    $("#jquery_jplayer_1").jPlayer("destroy");    
    var title = that.text();        
    $('#jplayer').insertAfter($(this).closest('div').find('ol')).fadeIn(700);

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            mp3:that.attr('data-src')
          }).jPlayer("play");
        },
        swfPath: "../../js",
        supplied: "mp3"
      });
   return false;
  });  
  $('#jp_container_1 a.jp-stop').click(function(){
    $('#jplayer').fadeOut('slow');
    return false;
  });
});

以下はもう少し手を加えた例。

曲のタイトルが日本語か英語で、タイトルとして表示する長さを調整
jPlayer が必ず表示されるように、ブラウザの外の場合はアニメーションで見えるように表示

jQuery(function($){
  $('#jplayer').css('display', 'none');      
  $('.cd ol li a').click(function() {
    var that = $(this);
    $("#jquery_jplayer_1").jPlayer( "clearMedia" );
    $("#jquery_jplayer_1").jPlayer("destroy");    
    var title = that.text();
      var title_language = false;  //日本語の場合「true」に設定
      for(var i=0; i < title.length; i++){
        if(title.charCodeAt(i) >=128) {
          title_language = true;
          break;
        }
      }
      //表示する文字数の調整
      if(title_language) {
        if(title.length > 20) {  //日本語の場合
          title = title.substr(0,15) + '～';
        }
      } else {
        if(title.length > 25) {
          title = title.substr(0,20) + '...';
        }
      }  
    if($(this).closest('div').find('ol li:last').offset().top > ($(window).scrollTop() + $(window).height())-150) {
        var window_bottom_y = $(window).scrollTop() + $(window).height();
        var audiojs_offset_y = $(this).closest('div').find('ol li:last').offset().top - window_bottom_y;
        var window_top = $(window).scrollTop() + audiojs_offset_y + 150;
        $('body,html').animate({
           scrollTop: (window_top)
        }, 500);
      }        
    $('#jp_container_1 .jp-title ul li:first').text(title);    
    $('#jplayer').insertAfter($(this).closest('div').find('ol')).fadeIn(700);

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            mp3:that.attr('data-src')
          }).jPlayer("play");
        },
        swfPath: "../../js",
        supplied: "mp3"
      });
   return false;
  });  
  $('#jp_container_1 a.jp-stop').click(function(){
    $('#jplayer').fadeOut('slow');
    return false;
  });
});

その他

jPlayer Playlist Add-on の解説ページ
これを利用するには、ダウンロードした中の「add-on」フォルダに入っている　「jplayer.playlist.min.js」が必要。

jPlayer 2.5.0 Developer Guide

Web Design Leaves