HTMLのaudioオブジェクトで悩む

数字列をメロディにするっていうのを以前に書いたのだが、性能・機能共に満足いかなくてなんとかしたいものだと思っている。

前回書いたものはMIDI.jsという「JavaScriptでMIDIを鳴らす」という仕掛けを使ったのだが、私としては単音のメロディを出せればいいのでいろいろな音色を出せる必要はない。MIDI.jsの基になっているHTMLaudioElementを使えばいいかな、と思った。

で、まずは音源を作ってみた。こんな音だ。とりあえず0.5秒。

T60.mp3」をダウンロード

この音は計算だけで作っているので、予めデータを用意しなくても、音を出す現場でちゃっちゃっと計算して作ることもできる、と思う。音の分解能を落としているので0.5秒の音声データ(WAV)で21.5Kbyte、圧縮してmp3にするとわずか3.32Kbyteになったりする。

で、この音源を、

<audio src=..../T60.mp3 autoplay=true>

というふうにWEBpageに埋め込むと、とりあえず音を鳴らすことができる。ここをクリック。

ただし、このaudioオブジェクトというのはまだ発展途上で、すべてのブラウザで動作するわけではない。ブラウザによってサポートしているファイル形式が違っていたりするので、上のリンクをクリックしても音が出るとは限らない。

さらに、このaudioオブジェクトというのは仕様がおかしくて、例えば先のautoplayをfalseにしたら音が鳴らないはずだが、実際には鳴ってしまう。ここをクリック。

TrueにしろFalseにしろAutPlayを指定してしまうとページを開いたとたんに鳴ってしまうので、Autoplayの指定はできないことになる。

この仕様がもうちょっと出来が良ければ、出したい音程の数だけaudioオブジェクトを並べて、鳴らしたい音を順次playさせていけばいいと思うのだが、これがなかなかうまく行かないのだ。

音を鳴らしたいタイミングでDocument.writeでaudioオブジェクトを生成するという荒業もできなくはないが、いろんな処理が走るので音が出るまでの時間が不確定だ。すぐに鳴ったり遅れてなったりとかのへたくそな音列になりそうで躊躇している。

以前にも紹介しているが、オブジェクトのプロパティを列挙する仕掛けを作ってあるのだが、このaudioオブジェクトの素性を探ってやろうと思ってこの仕掛けを適用してもうまくいかない。何か特殊なやりかたが必要なんだろうか？ と悩み中。

7月17日追記：

audioオブジェクトって、タグで定義するのではなくて、newしてコンストラクタを呼び出して作るものらしい。実際、そうやってみるとAudioオブジェクトのプロパティを表示することができた。また、このオブジェクトを配列として任意の音をJavascriptから発音させることもできた。

らだ、なぜかD3(レ）の音がオクターブ高くなったりする。これはWAVをmp3にするあたりで何か失敗をやらかしているらしい。横着をしてWAVをmp3に一括変換したのがいけなかったのかな？

まぁいろいろと道が開けたので、もっと遊んでみようと思う。