シンプルなプレイヤーjPlayer

HTML5のaudioタグは様々なメディアを再生できる非常に便利なタグです。
しかし、ブラウザによって見た目が異なっていたり、
もっと単純な再生と停止だけの機能が欲しい時に少し使いづらい面もあります。

今回は独自のデザインで様々なメディアを再生できるjQueryのPlayer、「jPlayer」を紹介します。

jPlayerの設置方法

ライブラリーのダウンロードと設置

まずは「jPlayer」をダウンロードします。
必要ファイルをダウンロードしたら、jQueryとライブラリを読み込みます。

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

プレイヤーの設定

次に、再生するメディアへのパス、メディアの種類、ボタンを押した時の動作などを設定します。
メディアの種類は「 mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav」に対応しています。

js

jQuery(function($){
    $('#player').jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: '/mp3/filename.mp3'//再生するMP3のパスを指定します
            });
        },
        loop: false, // ループ再生をするかどうかの設定
        volume: 0.5, // ボリュームの設定 0~1で指定します
        swfPath: "/js/jquery.jplayer.swf",
        ssupplied: 'mp3',//再生するメディアの設定
        play: function(){// 再生時の処理
            $('.btn').addClass('play').text('停止');
        },
        ended: function(){// 終了時の処理
            $('.btn').removeClass('play').text('再生');
        }
    }); 
    $('.btn').on('click',function(){
        if($(this).hasClass('play')){// 停止ボタンを押した時の処理
            $('.btn').removeClass('play').text('再生');
            $('#player').jPlayer('stop');
        } else {// 再生ボタンを押した時の処理
            $(this).text('停止');
            $('#player').jPlayer('play');
        }
    });
});

html

html側は非常にシンプルです。自由にスタイルを設定することで、任意のボタンのデザイン実現できます。

<div id="player"></div>
<div class="btn">再生</div>

手軽にplayerを実現するにはaudioタグを使用することで実現できますが、より細かくこだわる場合はこのライブラリを使用して細かく設定すると実現できます。 是非利用してみてください。