こんにちは。きんくまです。
ちょっと前に調べたことがありまして。タイトルのとおり、html5 / JavaScriptで音を鳴らす方法についてです。
いきなりなんですけど、html5 / JavaScriptって、動画 / 音声関連が非常に不安定だと思ってます。不安定というか、各ブラウザに同じように対応させようと思うと、キツいといいいますか。Chromeみたいに突っ走っているブラウザばっかりじゃないんですよね。モバイル関連とか、IEとかIEとか。
愚痴はこのぐらいにして、調査報告です。
まず、htmlで音を鳴らすには２種類の方法があります。
1) HTML5のaudioタグ
2) JavaScript APIのWeb Audio API
1) HTML5のaudioタグ
audioタグは、<audio src=”sample/xxxx.ogg” > とかやれば、勝手にいろいろとやってくれるものです。
ただ、いろいろと制限がございます。
1) ページに1つのみもつことが可能
2) モバイルではキャッシュ不可。毎回読み込む必要がある。（プリロードができない）
3) 細かな時間のシークが不安定 0.1秒単位などで指定してもずれることがある
4) モバイルでは何かアクションを起こさないと再生できない（タップなど）
5) モバイルでは音量調整はデバイスの方でおこなう
6) IE7,8未対応
1が相当ネックでして、2つ以上音鳴らしたいときはどうするんじゃい。みたいになります。
で、それを解決するのが、オーディオスプライトという方法です。
JSでも画像のスプライトシートというのがあって、1枚の画像に複数の画像を書き込んでおいて、表示する位置を変更するというテクがありますが、あれの音版です。
1つの音声ファイルに複数の音をいれておいて、再生位置を変更することで、ページに1つの制限をなんとかするというテクです。
くわしくは下記のページにのってました。
>> Overcoming iOS HTML5 audio limitations
ここに、audioタグで用意するサウンドファイル形式はOggとAACの2種類でOKなどとも書いてありました。
ほか、いろいろとお役立ち情報が載っています。
2) JavaScript APIのWeb Audio API
もう一つのやり方は、Web Audio APIです。これは、さきほどのaudioタグと比べると、大分制限がなくなって、効果音などにも使えそうな感じです。いろいろと音をいじったりとかスゴイことができるみたい。
ただし！対応ブラウザがまだ少ないのです、、。
>> Can I use… Support tables for HTML5, CSS3, etc
うはー、ｵﾜﾀ＼(^o^)／
ちなみに、このサイトこういうブラウザ間の差異を確認できて、大変便利です。
さきほどのaudioタグのページやCanvasタグのあたりを見てみるのもよいかもしれないです。
結論
で、音関連のライブラリを探してみたところ、いろいろなものがありました。
audioタグがなかったらFlash代替してくれるもの、Web Audio API一択のものなど。
上のどちらのやり方で音を出すのかも確認しておいた方がよさそうです。
その上で、自分がやりたいことを明確にして、条件に合うものを選ぶ必要があります。
例）どのブラウザが対象？
PC or モバイル or 両方。もしモバイルだったらiOS or Android or 両方。そのブラウザのバージョンは？ とか
そんな感じで、実装をPCとモバイルで分けたり、仕様を削っていき、簡単なものにして1つのソースでまかなうようにするとか考える必要があると思いました。
という感じで報告おわりです。ではでは。
■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！
■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ
