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に一括変換したのがいけなかったのかな?
まぁいろいろと道が開けたので、もっと遊んでみようと思う。
JavaScriptはブラウザ上で動作するプログラムだ。cgiと違ってサーバと通信しなくてもブラウザ上で利用者の操作に反応して動けるので反応がよく、音楽を扱ったりするのにはいいと思った。


紺色のグラフが右下がりになっているところへ、ピンクの線(二文字苗字の二文字目)が右

「シュワ」って何? 日本語ですかそれ? ボーカロイドが手話? シュワルツネガーと何か関係がある? 他の母音記号にはなんにもコメントがなくて「@」にだけ「シュワ」って? などなど突っ込みどころ多数なのだが、結局のところなんだかサッパリ分からない(ガリレオふう)。

なので、この図に示すように例えば上段の3つの3×3ボックス間で縦3個の数字を他のボックスの同じ位置にある縦3個と入れ替える。図中では赤、緑、青で示した3個ずつの数字を同じ色同士で入れ替えることになる。


最近のコメント