動画・音楽再生 jQuery プラグイン「jPlayer」を使う
jPlayer は動画や音楽を再生する jQuery プラグインです。HTML Audio に対応していること、HTML + CSS + JavaScript で UI を細かく作り込めることが特徴です。
現時点での最新バージョンは2.0.0。jQuery 1.3.2 以降で使えます。
音を鳴らす
まず jPlayer をダウンロードし、jquery.jplayer.min.js および Jplayer.swf を適当なディレクトリに配置します。
HTML 側は空の div を用意します。(中に何か書いても置き換えられる)
<div id="player"></div>
JavaScript は次のように書きます。swfPath には Jplayer.swf のあるディレクトリを指定、setMedia には再生するファイルを指定します。
$(function() { $("#player").jPlayer({ swfPath: "/common", ready: function() { $(this).jPlayer("setMedia", { m4a: "music.m4a", mp3: "music.mp3", oga: "music.oga" }).jPlayer("play"); } }); });
こうするとページ読み込み後に音声ファイルが再生されます。ファイルは複数指定されたものから、ユーザの環境で再生可能な形式が自動的に選択されます。
この時点では再生を制御するインターフェースは表示されません。次はインターフェースを作っていきます。
再生を制御するインターフェースを作る
その前に下準備として、HTML のマークアップを整えておきます。JavaScript や HTML Audio の使えない環境も想定して、次のようにマークアップすることにします。
<div id="player"> <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.oga" type="audio/ogg"> <a href="music.mp3" rel="audio">この曲を再生</a> </audio> </div>
いよいよここからスクリプトを書いていきます。
まず HTML から音声ファイルのリストを取得します。
var mediaList = {}; $("#player audio source").each(function() { var src = $(this).attr("src"); var m; if (m = src.match(/\.(\w+)$/)) { var ext = m[1]; mediaList[ext] = src; } });
このあと audio 要素は jPlayer 側で生成されるので取り除いてしまいます。
$("#player audio").remove();
プレーヤーにインターフェースを追加します。
$("#player").append( '<div id="jp-interface">...</div>' );
この際、ボタンなどの部品の id や class は、jPlayer のオプション cssSelectorAncestor, cssSelector の値に合わせます。オプションのデフォルト値は次の通りです。
options = { ... cssSelectorAncestor: "#jp_interface_1", cssSelector: { videoPlay: ".jp-video-play", play: ".jp-play", pause: ".jp-pause", stop: ".jp-stop", seekBar: ".jp-seek-bar", playBar: ".jp-play-bar", mute: ".jp-mute", unmute: ".jp-unmute", volumeBar: ".jp-volume-bar", volumeBarValue: ".jp-volume-bar-value", currentTime: ".jp-current-time", duration: ".jp-duration" }, ... }
ここでは cssSelectorAncestor を "#jp-interface" にした他はデフォルト値を用いました。
たとえば再生ボタンならこのようなマークアップになります。
<a href="#" class="jp-play">Play</a>
そして jPlayer のコアとなる部分を追加します。
$("#player").append( $('<div id="jplayer" class="jp-jplayer">').jPlayer({ swfPath: "/common", cssSelectorAncestor: "#jp-interface", ready: function() { $(this).jPlayer("setMedia", mediaList); }, }) );
最後に CSS で見た目を整えて完成です。
上記サンプルで使われている実際のファイルはこちらです。