jPlayer 作業メモ。

audioタグをつかって音のでるサイトをつくってみたものの、急遽IE8に対応しなければならなくなったりすること。そんなことってありますよね。

今回はjPlayerをつかって、audioタグがつかえる環境ではaudioタグで、つかえない環境ではFlashで音源を再生してみましょう。

jPlayer導入方法

1. jPlayerを こちら からダウンロード。
2. Jplayer.swf と jquery.jplayer.js を適当に設置。（jQueryの読み込みが必須です）
3. 下記のように再生したい音源を記述

$("オーディオに置換する要素のセレクタ").jPlayer({
    ready: function() {
        $(this).jPlayer("setMedia", {
            mp3: "./assets/mp3/audio.mp3", // mp3ファイルまでのパス
            ogg: "./assets/mp3/audio.ogg", // oggファイルまでのパス
        });
    },
    ended: function(evt) { // 再生終了時の処理
        $(this).jPlayer("play"); // ループ再生にするために再生
    },
    preload: "auto",
    swfPath: "./assets/swf/Jplayer.swf", // swfまでのパス
    solutitin: "html, flash", // htmlをflashよりも優先する
    supplied: "mp3, ogg" // mp3をogg寄りも優先する
});

これだけで、ステキな音がループ再生されます。お手軽ですね。