jQuery の jPlayer プラグインによるオーディオプレイヤー

投稿日: 2011年5月24日 作成者: alphasis

jQuery の jPlayer プラグインと Blue Monday Skin を使ったオーディオ・プレイヤー。

導入

  1. Download jPlayer より jPlayer プラグインと Blue Monday Skin をダウンロード。
  2. 入手した jquery.jplayer.min.js ファイルと Jplayer.swf ファイルと jPlayer.Blue.Monday.2.0.0 フォルダを、自分のサイトのサーバーにアップロードする。
  3. jquery.js と、jquery.jplayer.min.js と、jPlayer.Blue.Monday.2.0.0 フォルダ内にある jplayer.blue.monday.css ファイルを、使いたいページで読み込む。

実装例（サンプル）

実装例の動作について

再生ボタンを押すと、再生し、停止ボタンを押すと停止する。スピーカーのアイコンのボタンを押すと、ミュートする。その横のバーは、ボリューム調整用のスライダー。真ん中のバーは、全体のどのくらいを再生したか、視覚的にとらえることができ、クリックすると、そこから再生を始める。
再生が終了すると、再度、再生する。停止ボタンを押すまで、ループする。

実装例のソースコード

読み込み

<link rel="stylesheet" href="./jplayer/jPlayer.Blue.Monday.2.0.0/jplayer.blue.monday.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="./jplayer/jquery.jplayer.min.js"></script>

jquery.js と、jquery.jplayer.min.js と、jPlayer.Blue.Monday.2.0.0 フォルダ内にある jplayer.blue.monday.css ファイルを読み込む。
パスは、それぞれ、アップロードした場所を指定する。

JavaScript

<script type="text/javascript">
<!--
$( function() {
    $( '#jquery_jplayer_1' ) . jPlayer( {
        ready: function() {
            $( this ) . jPlayer( 'setMedia', {
                mp3: 'lmms-tutorial-techno-arpeggio.mp3' // MP3 オーディオ・ファイルへのパス
            });
        },
        ended: function ( event ) {
            $( this ) . jPlayer( 'play' );
        },
        swfPath: './jplayer', // Jplayer.swf ファイルへのパス
        supplied: 'mp3',
    } );
    $( '#jplayer_inspector' ) . jPlayerInspector( { jPlayer: $( '#jquery_jplayer_1' ) } );
});
// -->
</script>

Jplayer.swf ファイルへのパスと、MP3 オーディオ・ファイルへのパスは、それぞれ、アップロードした場所を指定する。

HTML

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-audio">
    <div class="jp-type-single">
        <div id="jp_interface_1" class="jp-interface">
            <ul class="jp-controls">
                <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                <li><a href="#" class="jp-unmute" tabindex="1">unmute</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-current-time"></div>
            <div class="jp-duration"></div>
        </div>
        <div id="jp_playlist_1" class="jp-playlist">
            <ul>
                <li>曲のタイトル</li>
            </ul>
        </div>
    </div>
</div>

スポンサード リンク

カテゴリー: JavaScript, jPlayer, jQuery, プラグイン, 音 パーマリンク