Javascriptで音を鳴らす
夏休みだし,javascriptでも勉強しようかと思ってゲームを作成中.
(物理演算ブロック崩し みたいなの)
そこで音を鳴らすのに苦労したので調査メモを残す.
chromeとfirefoxで確認
方法1 divを使う
一番簡単で,大抵の場所で動く方法.
htmlファイルに
<div id="sound_element"></div>
と記述し,javascriptから
document.getElementById("sound_element").innerHTML= "<embed src='"+sound_file_url+"' hidden=true autostart=true loop=false>";
を実行するだけ.
ただし,遅延は非常に大きい.
1回鳴らすだけで5秒ぐらい遅れるので効果音などにはまったく使えない.
方法2 audioタグを使う
html5が使えるならこれ.
newでAudioオブジェクトを作り,
var audio = new Audio(sound_file_url);
playで音を鳴らす
audio.play();
先に読み込みができるので,遅延はほとんどなし.
複数回同時にならしたいなら,複数個同じオブジェクトを用意すればよい.
しかし,先に複数用意するのは無駄だし,
その場で新しいのを作ることにするとサーバに負荷がかかる.
方法3 audioタグ+Data URI scheme
Data URI schemeはファイルのなかにリソースを埋め込んで別のファイルを読む負荷を減らそうというもの(たぶん)
これを使えばサーバへの負荷が軽減できる.
やり方はsound_file_urlの代わりに「base64でエンコードした音ファイルにヘッダをつけた文字列」を書くだけ
var s = "data:audio/wav;base64,UklGRiQXAABXQVZFZm10IBAAA...." //実際はとても長い var audio = new Audio(s); audio.play();
wavファイルのbase64へのエンコードなら次のスクリプトを使えば良い
#!/usr/bin/zsh for i in $* do echo -n "data:audio/wav;base64," base64 $i | tr -d '\n' echo "" done exit 0
欠点は,base64にエンコードするので少し長くなるのと,エンコードが面倒なこと.
後,1秒間に100回ぐらい再生しようとしたらブラウザがクラッシュした.