動画・音楽再生 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 で見た目を整えて完成です。
上記サンプルで使われている実際のファイルはこちらです。