「jPlayer」プラグインの使い方

「jPlayer」はウェブページ上でメディアファイルを再生・コントロールできる機能的で汎用性の高いプラグインです。HTML5をサポートし、HTML5未対応のブラウザでもflashをサポートしています。数あるメリットの中でも、プレイヤーの表示をHTMLとCSSでカスタマイズできることが魅力です。詳細は公式ウェブサイトをご覧ください。

javascript

scriptタグのsrc属性を使って、jplayer.min.jsと、jQueryのフレームワークを参照させます。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jplayer.min.js"></script>

初期化用スクリプトを記述します。myPlayList(下記4から6行目参照)に歌のリストを配列として記述します。このときmp3とoggの2種類の音声ファイルを選択します。media.ioなどのファイル形式変換ツールを使うとよいでしょう。

$(document).ready(function(){
    var playItem = 0;
    var myPlayList = [
        {name:"Black Plant",mp3:"audio/black_plant.mp3",ogg:"audio/black_plant.ogg"},
        {name:"Hidden",mp3:"audio/hidden.mp3",ogg:"audio/hidden.ogg"},
        {name:"The Separation",mp3:"audio/separation.mp3",ogg:"audio/separation.ogg"}
    ];
 
    // Local copy of jQuery selectors, for performance.
    var jpPlayTime = $("#jplayer_play_time");
    var jpTotalTime = $("#jplayer_total_time");
 
    $("#jquery_jplayer").jPlayer({
        ready: function() {
            displayPlayList();
            playListInit(true); // Parameter is a boolean for autoplay.
        },
        oggSupport: true
    })
    .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
        jpPlayTime.text($.jPlayer.convertTime(playedTime));
        jpTotalTime.text($.jPlayer.convertTime(totalTime));
    })
    .jPlayer("onSoundComplete", function() {
        playListNext();
    });
 
    $("#jplayer_previous").click( function() {
        playListPrev();
        $(this).blur();
        return false;
    });
 
    $("#jplayer_next").click( function() {
        playListNext();
        $(this).blur();
        return false;
    });
 
    function displayPlayList() {
        $("#jplayer_playlist ul").empty();
        for (i=0; i < myPlayList.length; i++) {
            var listItem = (i == myPlayList.length-1) ? "
<li class="jplayer_playlist_item_last">" : "
</li><li>";
            listItem += "<a href="#" id="jplayer_playlist_item_"+i+"" tabindex="1">"+ myPlayList[i].name +"</a></li>
 
";
            $("#jplayer_playlist ul").append(listItem);
            $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
                var index = $(this).data("index");
                if (playItem != index) {
                    playListChange( index );
                } else {
                    $("#jquery_jplayer").jPlayer("play");
                }
                $(this).blur();
                return false;
            });
        }
    }
 
    function playListInit(autoplay) {
        if(autoplay) {
            playListChange( playItem );
        } else {
            playListConfig( playItem );
        }
    }
 
    function playListConfig( index ) {
        $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
        $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
        playItem = index;
        $("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
    }
 
    function playListChange( index ) {
        playListConfig( index );
        $("#jquery_jplayer").jPlayer("play");
    }
 
    function playListNext() {
        var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
        playListChange( index );
    }
 
    function playListPrev() {
        var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
        playListChange( index );
    }
 
});

html

以下にhtmlの記述例を示します。

<div id="jquery_jplayer"></div>
<div class="jp-single-player">
  <div class="jp-interface">
    <ul class="jp-controls">
      <li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
      <li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
      <li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
      <li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
      <li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
    </ul>
    <div class="jp-progress">
      <div id="jplayer_load_bar" class="jp-load-bar">
        <div id="jplayer_play_bar" class="jp-play-bar"></div>
      </div>
    </div>
    <div id="jplayer_volume_bar" class="jp-volume-bar">
      <div id="jplayer_volume_bar_value" class="jp-volume-bar-value">
      </div>
    </div>
    <div id="jplayer_play_time" class="jp-play-time"></div>
    <div id="jplayer_total_time" class="jp-total-time"></div>
  </div>
  <div id="jplayer_playlist" class="jp-playlist">
    <ul>
      <li>Bubble</li>
    </ul>
  </div>
</div>

上記のスクリプトの属性は以下のような値を定義しています。

css

htmlに初期設定のプレイヤーテーマのcssファイルを関連付けます。

<link href="path/to/file/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

Comments are closed.