サイト内で音楽や効果音を鳴らすjQueryプラグイン「jPlayer」の使い方

jplayer

HTML5でサイト内で音を鳴らしたり、動画を埋め込んだりできるjQueryプラグイン「jPlayer」のご紹介です。クロスブラウザ対応で様々なOSに対応していますし、プレイヤーの見た目のカスタマイズやイベントの制御なども出来ます。今回はjPlayerを使ってオーディオプレイヤーを作ってみたいと思います。

ダウンロードと配置

「jPlayer」をダウンロードします。
内包されている「jquery.jplayer.min.js」と「jquery.jplayer.swf」を使いますので、2つのファイルを適当なディレクトリに配置します。(/jplayer/jquery.jplayer.min.js、/jplayer/jquery.jplayer.swf など)
今回は現時点(2015年2月)で最新のjPlayer-2.9.2をダウンロードしました。ダウンロードしたjquery.jplayer.min.jsを <head> 要素内などにjQueryの後に読み込みます。ライセンスはMITです。

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

オーディオプレイヤーを作ってみる

簡単なプレイヤーを作ってみます。

HTML

htmlaudio 要素が入る div とプレイヤーを作成します。今回は jquery_jplayer_1 とidを付けています。
下記の例は再生と一時停止だけ出来るようにしたいので jp-playjp-pause のclassが付いた要素を <div id="jp_container_1"></div> でラップします。他にも jp-stop (停止)、 jp-mute (消音)などがあります。

<div id="jquery_jplayer_1"></div><!-- ここにaudioタグが入ります -->
<div id="jp_container_1"><!-- インターフェース部分 -->
  <div class="jp-play">Play</div><!-- 再生 -->
  <div class="jp-pause">Pause</div><!-- 一時停止 -->
</div>

JavaScript

jPlayerのコンストラクタを定義します。 $(id).jPlayer( Object: options ) : jQuery
ここで様々なオプションが設定できますので公式サイトを参考にしてみてください。
今回は割と使いそうなオプションを設定しています。

    jQuery(function($){
        $("#jquery_jplayer_1").jPlayer({
            ready: function () {// jPlayer の準備ができたら実行される処理を記述
               $(this).jPlayer("setMedia", {
                    mp3: "/media/jplayer/tw034.mp3" //再生するメディアを指定 カンマ区切りで複数指定できる。
                });
            },
            cssSelectorAncestor: '#jp_container_1', // コントロール部分をラップしているコンテナ
            cssSelector: {play: '.jp-play',pause: '.jp-pause'}, // cssセレクタを指定、それぞれメソッドに対応
            loop: false, // ループ再生
            volume: 0.2, // ボリューム 0~1で指定
            swfPath: "/jplayer", // Jplayer.swfのパス html5で再生されなかった場合、フラッシュで再生される
            ssupplied: 'mp3', // フォーマット(カンマ区切りで複数指定できる、優先度は左が高い)
            play: function(){
                // 再生時の処理
                $('.track-name').addClass('active');
            },
            pause: function(){
                // ポーズ時の処理
                $('.track-name').removeClass('active');
            },
            ended: function(){
                // 終了時の処理
                $('.track-name').removeClass('active');
            }
        });
    });

CSS

最後にCSSで見た目を調整してあげます。

#jp_container_1{
    border:solid 5px #ccc;
    width:300px;
    margin:15px auto;
    position:relative;
    background:#000;
}
.track-name{
    color:#fff;
    font-size: 15px;
    padding:15px 42px;
    font-weight: bold;
    line-height: 30px;
    -webkit-transition: all 0.3s ease;
    -webkit-transition-delay: 0s;
    transition: all 0.3s ease 0s;
}
.track-name.active{
    color:#59e2fb;
}
.jp-play{
    position: absolute;
    left: 5px;
    top: 18px;
    width: 33px;
    height: 30px;
    background: url(/image/jplayer/play.png) center top no-repeat;
    cursor: pointer;
}
.jp-pause{
    position: absolute;
    left: 5px;
    top: 18px;
    width: 33px;
    height: 30px;
    background: url(/image/jplayer/play.png) center bottom no-repeat;
    cursor: pointer;
    display: none;
}

jPlayerオーディオプレイヤーのサンプル1

出来たサンプルがこちら。【BGM : MusMus
※音が鳴ります

上のサンプルでは再生時に addClass.track-name.active を追加しています。一時停止時と終了時に removeClass.active を削除し、 .active をトリガーとした色のアニメーションを実装しています。

jPlayerオーディオプレイヤーのサンプル2

今度はJavaScript側でBGMのON/OFFを制御したいと思います。【BGM : MusMus
※音が鳴ります

上のサンプルではBGMボタンを作成し、click時に .track-name.active が付いていればBGM OFFに、付いていなければBGM ONにしています。先ほどと違うところはJavaScript側で $(id).jPlayer('play') メソッドと $(id).jPlayer('pause') メソッドで制御しているところです。

まとめ

以上でざっくりとしたjPlayerオーディオプレイヤーの使い方です。現時点でaudioタグの実装は、ブラウザ間で同一のメディア形式をサポートする状態ではないので、こういったプラグインはありがたいですね!
ただ、音源を使う際は著作権などの問題がありますので、事前に調べた上で使用しましょう。また、自動再生などユーザーにとっては迷惑な場合があるので、個人的には再生ボタンや、BGMボタンを付けてユーザーの意思で音が流せる仕様が好ましいと思います。ちなみにjPlayerでも自動再生できます。
jPlayerは他にも様々なオプションやadd-onを使ったプレイリストの作成、動画の挿入など出来ますので、色々と試してみてください。このブログでも後日紹介したいと思います。

シェア

コメント

  • magenta9

    jPlayerオーディオプレイヤーのサンプル1
    を同一ページに複数配置したい場合は、どのように書けば良いのでしょうか。
    いくつもの試行錯誤をしましたが出来ませんでした。ご教授ください。
    よろしくお願いいたします。