Kawanet Blog II

アクセスカウンタ

zoom RSS HTML5.Audio - JavaScriptからMP3再生ライブラリ(HTML5風)

<<   作成日時 : 2009/05/17 17:40   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 17 / トラックバック 0 / コメント 0

HTML5 では <audio> 要素 が使えるようになって、JavaScript からも再生操作ができるようになるわけですが、すぐには普及ブラウザでは使えないので、代わりに、Flash 経由で音声再生するライブラリ HTML5.Audio を書いてみました。

デモ1:HTML5.Audio で音を鳴らすデモ
デモ2:MP3 ファイルの URL を指定して再生するデモ

JavaScript から MP3 ファイルを再生する方法はいくつかあり、Flash 経由で再生するものも、
ウノウラボさんクジラ飛行机さん のライブラリが公開されています。
今回は、HTML5 の Audio オブジェクト風のインターフェースにしてみました。
IE 8、Firefox 3.0、Chrome 1.0 で動作確認しています。

使い方1:おまじない

 
HTML5.Audio を使うには、まず3つのJSファイルを読み込みます。
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jkl-js2as.js"></script>
<script type="text/javascript" src="js/html5-audio.js"></script>
html5-audio.js は jkl-js2as.js に依存するため、上記の順番で読み込む必要があります。

使い方2:MP3 を再生する

 
MP3 再生の方法は、HTML5 の Audio オブジェクトとほぼ同じです。
コンストラクタ引数に MP3 の URL を指定してください。
<script type="text/javascript"><!--

music = new HTML5.Audio('sound.mp3');
music.play();

--></script>
制限:HTML5.Audio ライブラリは、MP3 の再生のみに対応しています。
WAV ファイル等は再生できません。(ActionScript の Sound クラスに依存)

対応プロパティ

 
現在、HTML5 の Audio オブジェクトのうち、一部のプロパティに対応しています。
プロパティ値の設定・取得には、set()・get() メソッドを利用してください。
対応プロパティは、currentTime、volume、paused、ended、loop、duration です。
var ctime = music.get('currentTime');
music.set('volume',0.8);
制限:currentTime は再生開始・再生終了時のイベントのみで更新されます。

対応イベント

 
また、onloadstart、onload、onplay、onpause、onended のイベントに対応しています。
addEventListener() メソッドは使えないので、set() メソッドでプロパティにコールバック関数を指定します。
var onended = function () {
alert( 'sound ended' );
}
music.set( 'onended', onended );
制限:仕組み上、onloadstart、onload イベントは正常に捕捉されない場合があります。

オプション

 
HTML5.Audio ライブラリは内部的に、ActionScript 3.0 で書かれた html5-audio.swf を呼び出します。
html5-audio.swf の設置場所を指定する場合は、最初に new HTML5.Audio() で
インスタンスを生成する前に、getProxy() メソッドのパラメタでパスを指定してください。
<script type="text/javascript"><!--

HTML5.Audio.Proxy.getProxy({swfPath:'./html5-audio.swf',onready: init});

--></script>

また、getProxy() メソッドで、その他の設定を行うことができます。
onready プロパティでは、HTML5.Audio ライブラリが準備完了した際に呼び出される
コールバック関数を指定します。
getProxy() メソッド自体は、window.onload イベントの前でも呼び出せます。

ファイル一覧

 
実行時に必要なファイルは以下の通りです。
  • js/html5-audio.js - HTML5.Audio ライブラリ本体
  • js/jkl-js2as.js - 内部で使う JavaScript→ActionScript ブリッジ
  • js/swfobject.js - .swf ファイルの読み込み
  • swf/html5-audio.swf - HTML5.Audio ライブラリのフラッシュ部分
  • swf/expressInstall.swf - Flash をインストールしてね画面
ソースコードのコンパイルを行う場合は、checkout してください。
svn co http://svn.coderepos.org/share/lang/javascript/HTML5.Audio/trunk html5-audio

ActionScript のソースコードは以下の通りです。
  • src/HTML5_Audio.as3proj - FlashDevelop+Flex SDK 用プロジェクト
  • src/HTML5_Audio.as - HTML5 の Audio オブジェクトのエミュレーション(AS3)
  • src/HTML5_Audio_Proxy.as - JS ブリッジ用クラス
  • src/net/kawa/JS2AS/JS2AS_Proxy.as - JS→AS ブリッジ(AS側)
  • src/net/kawa/JS2AS/JS2AS_Item.as - JS→AS ブリッジのオブジェクトの入れ物
JavaScript から ActionScript を呼び出す汎用ライブラリの習作とも言う。
AS→JS のコールバック関数も書けるのは、面白いと思う。(メモリリーク有)

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 17
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた
ナイス ナイス ナイス
ガッツ(がんばれ!)

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
HTML5.Audio - JavaScriptからMP3再生ライブラリ(HTML5風) Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる