HTML5 Audio デモ

js HTML5

HTML5 で、ブラウザの機能として「音」を再生する仕様が追加されました

音を再生するには、<audio src="..." autoplay> を HTML に埋め込むか、new Audio(src).play() とします。

仕様 ⇒ http://www.w3.org/TR/html5/video.html

クロスブラウザ化する上での問題は2つ

1. 古いブラウザ向けに Silverlight(XAML) や Flash を使い、それらの違いも吸収しなければならない。
2. サポートしているコーデックの違いを吸収する仕掛けも必要。

Browser uu("Audio") HTML5Audio SilverlightAudio FlashAudio
Firefox3.0 mp3 - mp3 mp3
Firefox3.5+ mp3,ogg,wav ogg wav mp3 mp3
Safari3.x mp3 - mp3 mp3
Safari4+ (win) mp3, wav (mp3) wav mp3 mp3
Safari4+ (mac) mp3 - - - mp3
Chrome4+ mp3,ogg (mp3) ogg mp3 mp3
Opera9x-10.10 mp3 - - mp3
Opera10.50+ mp3,ogg,wav ogg wav - mp3
iPhone3 - - - -
IE6,IE7,IE8 mp3 - mp3 mp3
IE9 preview mp3 - mp3 mp3

できるだけ HTML5 の仕様に近づけつつ、ブラウザやプラグインの差を吸収するクロスブラウザな Audio API を目指してライブラリ化してみました。

デモ

http://pigs.sourceforge.jp/blog/20100411/demo.audio/TinyAudioPlayer.htm

簡単な説明

uu("Audio", source, audioOptionHash, callback)

とすると、source を再生可能なバックエンドを検索しオーディオバックエンドクラスをインスタンス化します。

オーディオバックエンドクラスには、HTML5Audio, SilverlightAudio, FlashAudio, NoAudio があります。
また、それらを束ねる Audio クラスがあります。
NoAudio は適切なバックエンドが存在しない場合に選択されます(要らない子)。

AudioOptionHash には、以下のプロパティを設定できます。

    AudioOptionHash = {
        node        - Node(= void): <audio> or <div>
        loop        - Boolean(= false):
        volume      - Number(= 1):
        autoplay    - Boolean(= true):
        startTime   - Number(= 0):
    }

より詳しくは、ソースをどうぞ。
http://pigs.sourceforge.jp/blog/20100411/class/Audio/

反省会

  • Mac の Safari4 が wav や mp3 をうまく再生できないんだけど… なんで?
  • Chrome5(dev) のオーディオストリームの遅延とか、再生位置や頭だしがアレレ

Hydrate-Kenny_Beltrey.mp3 と .wav は http://www.vorbis.com/music/ にある Hydrate-Kenny_Beltrey.ogg を変換したものです。作者は私ではありません。その辺は、色々とよろしくお願いします。