Web Audio API でサウンドデザイナになるために音のデジタル化について知る

現在策定が進行中の API 群を利用することで、ブラウザで音を生成したり、声や電子楽器からの入力を処理したりすることができるようになっていくみたいです。

これらが一般的に使用されるようになれば、近い将来 Web 上でのジャムセッションやリアルタイムの大合唱、作曲なんかも可能になるんでしょう。

2020 年の オリンピックでは、ブラウザを介して視聴者が大合唱しているかもしれません。感動もひとしおですね。

音楽系で利用できそうなもので策定が進んでいるものは

等があります。

現在ではまだ勧告になっていないものばかりなので、今後仕様が変更される可能性があり、未実装の機能もありますか Web RTC などは既にサービスが始まってるみたいです。各ブラウザの対応状況については Can I use… で確認できます。

まずサウンドデザイナになるためには、音について知る必要があります。音をデジタルに変換するというのはどういうことなのでしょうか?

音のデジタル変換について

アナログの音をデジタルに変換することをサンプリングといいます。

音は物理学的には波とされるので、音のある時点での状態を観測し、連続した数値に変換したものを波の表現とします。

この際数値化された間隔の細かさをサンプリング周波数と呼び、単位はヘルツ(Hz)です。

例えば音楽CDで使用されるサンプリング周波数は 44.1kHzで 1 秒につき 4 万 4 千百の数で記録されています。

ビット深度 電圧 時間

1kHzで 1 秒につき 4 万 4 千百の数で記録されています。

ビット深度
電圧
時間

サンプリングされた各瞬間の数値は一定の範囲内に収める必要があり、この範囲のことをビット深度と呼びます。

ビット深度を大きくするほど波の表現が滑らかになるため原型の波形に近づきますが、データ量が増加するためパフォーマンスとのトレードオフになっていきます。

ちなみに CD のビット深度は 16bit でこれ以上の大きさは一般のひとでは違いが分からないとされているそうです。

音のデジタル化は上記のようになるので、JavaScript では配列の値を電圧、連続を時間とすることで、音にしています。

では最後に API の具体的な使い方をコードを交えて解説したいと思います。

サンプル

クリックすると音が鳴ります

(function() {
//ベンダプレフィックスを吸収
var AudioContextClass = (
window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext
);
var button = document.querySelector('#osc-play');
//エラーハンドリング
if( !AudioContextClass ) {
button.innerHTML ='AudioContext がサポートされていません';
return 0;
}
//インスタンス生成
var context = new AudioContextClass();
//クリック関数
function oscPlay() {
var oscillator = context.createOscillator();//OscillatorNode を作成
oscillator.connect(context.destination);//接続
oscillator.frequency.value = 440;//周波数を440Hzに
oscillator.type = oscillator.TRIANGLE;//オシレータの波形を選択
oscillator.start(0);//再生
setTimeout(function(){//100ミリ秒後に停止
oscillator.stop(0);
},100);
}
button.addEventListener('click', oscPlay);
})();