本 日 の h o g e

■ [小ネタ][JS] Web Audio API

うんこを流す計画その 3．

ひょんなことから Web Audio API に興味を持ったので，Web Audio API を使った 変なもの を作ってみた (きっと chrome とかでしか動かないと思う)．

色々思うところはあるのだけれど，何というかコンテキストが「Web Audio API」というよりもはや「いかにして波形を作り合成するか」になってしまい，もう疲れたので一旦区切りを付けた感じ．

まあ何のことはない，右上部のテキストエリアに書かれた JSON データを 1 つの RIFF WAVE データに変換して Web Audio API で鳴らすというもの． JSON は全て配列で表現されていて，ルールは以下のようになっている． 休符はない．相手は死ぬ．

トップ:
  [旋律1, 旋律2, ...]

旋律:
  [音1, 音2, ...]

音:
  [長さ(秒), 周波数群]

周波数群:
  [周波数1, 周波数2, ...]

複数の周波数は同時に鳴るので，これで和音を表現する． 複数の旋律も同時に鳴る．

MML とかじゃねーのかよ，という件については，僕が MML を知らないという理由以外にも理由があって，そもそもの動機がデータを音にしたいだけだったからです． テキストエリアにデフォルトで入っているデータを見ると，IPv4 アドレスっぽいものが入ってたりする． そう，こういうそこら中にある雑多なデータを数値化して音にするとどういう感じになるのかなーという． まあ結果は「意味わからんww」でしたけど :-P

音を作る

まず，周波数と長さというただの数値を音に変えるにはどうすれば良いか． 音というのは波なので，周波数，サンプリングレート，長さから正弦波なり矩形波なりを生成すれば良い．

なお，ただの正弦波だとだいぶのっぺりした音になる． 今回はこの正弦波に 2 次ベジェ曲線のカーブ具合を係数に加えて，徐々に音が弱まるような感じにしてある (これのせいで結構変な音が出たりするのだけれど...)．

コードを抜粋すると，大体以下のような感じ．

this.duration;   // 長さ
this.frequency;  // 周波数
this.maxamp;     // 最大振幅
this.hz;         // サンプリングレート

this.signals = new Array(Math.round(this.duration * this.hz));
                 // サンプリングレート x 長さ分の配列を生成する

var len = this.signals.length;
var f   = this.frequency * 2.0 * Math.PI / this.hz;
var p   = 0;

// 2 次ベジェ曲線用
var pt1 = {x: 0,   y: 0};
var pt2 = {x: len, y: this.maxamp};
var pt3 = {x: len, y: 0};

for (var i = 0; i < len; i++) {
    // ベジェの計算
    var t  = i / len;
    var tp = 1 - t;
    var x  = Math.round(tp * tp * pt1.x + 2 * t * tp * pt2.x + t * t * pt3.x);
    var y  = Math.round(tp * tp * pt1.y + 2 * t * tp * pt2.y + t * t * pt3.y);
    var d  = (len - x) / len * y;

    // sin にカーブ具合を係数として与えて保存
    this.signals[i] = Math.round(Math.sin(p) * d);

    p += f;
}

複数の旋律を同時に鳴らす

音を合成するには，その波同士を足し合わせれば良いらしい (これを加算合成というらしい) のだけれど，問題は 8bit データの加算合成．

16bit の wav データは signed で -32768 〜 32767 を取るのでそうそう溢れるようなことはないのだけれど，8bit の wav データは unsigned で 0 〜 255 を取る． 8bit のデータ同士を単に加算合成してしまうと，すぐに溢れてしまうどころか，無音を示すのが 128 なので，無音同士を合成すると音が鳴るという大変なことになる．

これについてはあまり良い方法を思いつかなかったので，今回は 8bit データも内部的には signed で持っておいて合成をやりやすくしておいた上で，最終的にバイナリに変換する際に +128 した．

RIFF WAVE データ形式に変換する

作った配列をバイナリに変換してヘッダを付加してやる．

どうも JavaScript はバイナリを扱うのが得意ではないようで，例えば Python で言う struct モジュールみたいなものはないようだ．

数値をバイナリにパックするには，String.fromCharCode() を使うことができる．このメソッドは 16bit unsigned 列を受け取って，対応する文字列を返してくれるらしい．

が，ヘッダを 8bit データとして付加する関係上，データを 16bit unsigned にしてパックしてしまうと，後で Web Audio API に食わせる際に障害となるので，8bit unsigned としてパックしてやる． 16bit のデータを 8bit のデータに分解することは，ビットシフト/マスクを駆使すればできるのだけれど，今回は typed array というものを使ってみることにする．

var buf = new ArrayBuffer(2);
var u16 = new Uint16Array(buf);
var u8  = new Uint8Array(buf);
u16[0] = 65535;  // 65535 を入れると，
[u8[0], u8[1]];  // [255, 255] に分解される

後は wav ファイルフォーマット を参考にさせて貰いつつパックしていく．

データを Web Audio API に食わせる

実際に音を鳴らすには webkitAudioContext を使う． webkitAudioContext の使い方は 仕様書 を見るとして，問題は，先ほどまでに作った音データをどうやって食わせるのか．

音データは AudioBuffer というもので表現されるらしく， webkitAudioContext の持つ createBuffer() メソッドで作成することができる． この AudioBuffer を音源ノードに乗せて，webkitAudioContext の destination に繋いでやれば良いというわけ．

ただしこの AudioBuffer には先ほど作ったバイナリを直接乗せることはできないようで，どうも ArrayBuffer として渡してやらないといけないようだ．

つまり以下のような感じになる．

var data;  // 作ったバイナリ

// ArrayBuffer に変換
// ここでバイナリがヘッダ 8bit，データ 16bit だとおかしなことになってしまう
var arrbuf = new ArrayBuffer(data.length);
var bytes  = new Uint8Array(arrbuf);
for (var i = 0; i < data.length; i++)
    bytes[i] = data.charCodeAt(i);

// webkitAudioContext を調整
var audioCtx = new webkitAudioContext();
var gainNode = audioCtx.createGainNode();
gainNode.gain.value = 1.0;
gainNode.connect(audioCtx.destination);

// 音源ノードを作る
var voice = audioCtx.createBufferSource();

// 音データを乗せる
voice.buffer = audioCtx.createBuffer(arrbuf, false);

// 音源ノードを繋ぐ
voice.connect(gainNode);

// 鳴らす!!
voice.noteOn(0);

(追記) ローパスフィルタを通す

Web Audio API には各種フィルタも実装されているようだ． 例えばローパスフィルタを通したい場合は，ノードの繋ぎを変えて，フィルタを間に挟んでやれば良い．

var audioCtx = new webkitAudioContext();

var lowpassFilter = audioCtx.createBiquadFilter();
lowpassFilter.type = lowpassFilter.LOWPASS;        // ローパスに設定
lowpassFilter.frequency.value = 440;               // 440hz より上を遮断
lowpassFilter.connect(audioCtx.destination);

var gainNode = audioCtx.createGainNode();
gainNode.gain.value = 1.0;
gainNode.connect(lowpassFilter);

(追記2) 音色 (を生成する関数) を textarea からいじれるようにした

この文章を書いてからまた少しいじっていたのだけれど，いかんせんとにかく面倒臭いので textarea から動的に関数を生成することにした． textarea の中身を変更すると音色がもにょっと変わります．

正弦波なら↓という感じにすれば良いし，

return Math.round(Math.sin(count * delta) * wmaker.maxamp);

矩形波なら↓という感じにすれば良い．

var sig  = Math.round(Math.sin(count * delta) * wmaker.maxamp);
var base = Math.floor(wmaker.maxamp / 2);
return sig < base ? -base : base;

しかし JavaScript ってすごいね，↓で関数作れるとか... eval 並に邪悪なコードをいくらでも書けそうだぜ!

new Function("引数名1", "引数名2", ..., "関数の中身");

(追記3) アホなミス & 勘違いをしていた

Web Audio API を色々いじって遊んでいた際に playbackrate (再生速度) を 0.5 に設定していたのを忘れていた． 音が正常 (?) に鳴った時に「ウムこれでいいのだ」とか思っていたのだけれど，実際は全然良くなかった．

ヘッダ 8bit, データ 16bit でパックしたものを Uint8Array で ArrayBuffer 化したため，謎のデータになっていたみたい． charCodeAt() での変換時に 16bit unsigned が 8bit unsigned に丸められてたのだと思う (ただこれで倍速とはいえ音程がちゃんとする理由はイマイチよく理解できていない)．

なのでそこら辺を修正して，日記の内容も編集した (「RIFF WAVE データ形式に変換する」項)． ついでに lowpass を 0 にすることでフィルタを切れるようにもしておいた．

ところでこの辺のデバッグ作業をやっていて思ったのが，やはりどうにもデバッグがやりづらいということ． というのも，生成したデータを wav ファイルに落として別プレイヤーで再生してみる，ということができないんですな． バイナリなので console.log() に出してもダメ．

しょうがないので base64 encode して console.log() に出して，それを保存した上で base64 -d file.txt | aplay とかちまちま打っていたのでした．

雑感

とにかく全てが分からなかったのでもう何が何だか．

音がなんたるかが分からない． そもそも音って何だっけ? 合成って何それおいしいの? という感じ． 音の強さ辺りとか，多分今も理解できてないと思う．

JavaScript が分からない． バイナリの扱いどころか配列の扱いすらおぼつかない． けどこれはまあだいぶ慣れたかな．

Web Audio API が分からない． 概念やその使い方など，いまだに自分の理解が合ってるかどうかすら分からない．

とりあえず，やっぱり自分は物理/数学的な感性を持ち合わせていないんだなということだけは分かりました． 波形を操作するにあたって数式を色々もにょもにょしてた時間が一番長かったと思う...

■ [小ネタ] Visualization & Sonification/Auralization

うんこを流す計画その 4．

こないだ Web Audio API をいじって遊んでいたのは，別に MML もどきを作りたくてのことではなくて，巷に溢れている適当なデータを感覚器に訴える何かに変換したかったから．

「可視化」は語るに及ばずだけれど，「可聴化」というのも情報工学的な研究分野として 10 年以上前から存在する． 可視化は Visualization と言うけれど，可聴化は Sonification とか Auralization とか言う． 可視化に比べて可聴化がマイナーなのは，視覚情報よりも聴覚情報のほうが更に曖昧だとか難しいとか効果を測定しづらいとかそういう理由で注目されにくいからかなぁと個人的には思う． 聴覚情報はどちらかというと主に感情に訴える情報のように思えるし．

公開できるような状態にないのでコードやサービスを公開してはいないけれど，実は以前，遊びで ネットワーク可視化を HTML5 canvas の上でやってみた ことがある． これは単純に libpcap でキャプチャしたデータを WebSocket 経由で随時配信し，クライアント (ブラウザ) サイドでリアルタイムにグラフ化していく． こんな感じ にサーバサイドでキャプチャしたデータをクライアントに送りつける形になっていて，サーバがそのまま WebSocket クライアントになることもできるのでツリー型の分散構成を取ることも (ブラウザから直接到達性のないネットワークの可視化も) できる． まあ，要は EtherApe の Web 版，分散版だ．

そんでまあ課題はいくつかあるものの一通り意図通りグリグリ動くところまで出来たのだけれど，だんだんグリグリ動くだけなのに飽きてきたので，今度は音でも鳴らしてやろうかと思ってしまった次第． それが 以前の日記 の元だったわけです．

Sonification/Auralization をまとも (?) に実装したのは初めてで方法論的なものが全く分からないので，とりあえず，

1. IPv4 アドレスをオクテット単位に分割
2. 各オクテットを 6 倍する (つまり 0 〜 1530 になる)
3. プロトコル番号 6 (TCP) であれば音色を弾くような，それ以外なら笛のような音に設定
4. 2. で作った 4 つの数値を周波数に見立て，波を作り，和音として合成
5. IPv4 ヘッダの total_len フィールドを使い，ゲインを log(total_len+1) / 7 に設定 (つまり 0 〜 1.6 くらい，データリンクがイーサなら 1.1 以下になる)

こんな感じで作った波を src → dst で繋げて鳴らしてみた．

結果はというと，音なので直接さっくり伝えることができないのがもどかしいのだけれど，まあ酷いもんで，とにかくうるさくてしょうがない． サーバにログインして top とかしてると 2 秒毎にソナー音． 動画サイトにでも行こうものなら，src/dst が同じパケットが大量に現れるので，なかなかの耳レイプっぷりを発揮する．

その昔 ネットワーク監視を音楽で行う という研究があったようだけれど，この域に達するにはまだまだ考慮が足りないなあという感じ (この研究も実用域なのかどうかは知らんけど) でしたとさ．

というところで，ネットワークを Visualization & Sonification/Auralization して遊ぶのも飽きてきたので，次は別のデータを扱おうと画策している次第． ネタはとりあえずいくつかあるのでまあ何かまとまったらまた何か書くかも．