読者です 読者をやめる 読者になる 読者になる

Javascriptで音を鳴らす

夏休みだし,javascriptでも勉強しようかと思ってゲームを作成中.
物理演算ブロック崩し みたいなの)
そこで音を鳴らすのに苦労したので調査メモを残す.
chromefirefoxで確認

方法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回ぐらい再生しようとしたらブラウザがクラッシュした.

方法4 javaアプレットflashを利用する

試してないので不明