技術
Web Audio API：コーディングできるのになぜ作成するのですか？
WebオーディオAPIの最初のドラフトは、2011年にW3Cに登場しました。Webページのオーディオは長い間サポートされてきましたが、Webブラウザからオーディオを生成する適切な方法はごく最近まで利用できませんでした。私は個人的にこれをグーグルクロームに帰します、なぜならグーグルの利益に関しては、ブラウザがコンピュータの最も重要な部分になり始めたからです。覚えているかもしれませんが、ウェブブラウザの領域は、GoogleChromeが登場するまであまり変化し始めませんでした。今回、Webページでサウンドを使用した場合、設計上の決定は不十分でした。しかし、Web実験のアイデアが登場して以来、Webオーディオは再び意味をなし始めました。最近のWebブラウザーは、芸術的な表現のためのもう1つのツールであり、Webブラウザーのビデオとオーディオはその中で重要な役割を果たします。
Web Audio APIはまだ開発中であるため、いくつかの目的で使用するのは非常に難しい場合がありますが、作業を簡単にするために多くのJavaScriptライブラリがすでに存在します。この場合、と呼ばれるライブラリを使用してWeb AudioAPIを開始する方法を紹介します。 Tone.js 。これにより、基本を学ぶだけで、ブラウザのサウンドのニーズのほとんどをカバーできるようになります。
Hello Web Audio API
入門
ライブラリを使用せずに開始します。最初の実験では、3つの正弦波を作成します。これは簡単な例であるため、hello.htmlという名前のファイルを1つだけ作成します。これは、少量のマークアップを含む裸のHTMLファイルです。
Hello web audio Web AudioAPIのコアは オーディオコンテキスト 。オーディオコンテキストは、Webオーディオに関連するすべてのものを含むオブジェクトです。 1つのプロジェクトに複数のオーディオコンテキストを含めることは良い習慣とは見なされません。まず、MozillaのWeb AudioAPIドキュメントに記載されている推奨事項に従ってオーディオコンテキストをインスタンス化します。
var audioCtx = new (window.AudioContext || window.webkitAudioContext); 発振器を作る
オーディオコンテキストがインスタンス化されると、オーディオコンポーネントがすでにあります：audioCtx.destination。これはあなたのスピーカーのようなものです。音を出すには、audioCtx.destinationに接続する必要があります。サウンドを生成するために、オシレーターを作成しましょう。
var sine = audioCtx.createOscillator(); 素晴らしいですが、十分ではありません。また、開始してaudioCtx.destinationに接続する必要があります。
sine.start(); sine.connect(audioCtx.destination); これらの4行を使用すると、正弦波を再生する非常に迷惑なWebページが作成されますが、モジュールが相互に接続する方法を理解できました。次のスクリプトでは、出力に接続された3つの正弦波のトーンがあり、それぞれが異なるトーンを持っています。コードは非常に自明です：
//create the context for the web audio var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //create, tune, start and connect each oscillator sinea, sineb and sinec var sinea = audioCtx.createOscillator(); sinea.frequency.value = 440; sinea.type = 'sine'; sinea.start(); sinea.connect(audioCtx.destination); var sineb = audioCtx.createOscillator(); sineb.frequency.value = 523.25; sineb.type = 'sine'; sineb.start(); sineb.connect(audioCtx.destination); var sinec = audioCtx.createOscillator(); sinec.frequency.value = 698.46; sinec.type = 'sine'; sinec.start(); sinec.connect(audioCtx.destination); 発振器は正弦波に限定されず、三角形、のこぎり波、正方形、カスタム形状にすることもできます。 MDNに記載されているように 。
Webオーディオのパッチロジック
次に、Webオーディオコンポーネントのオーケストラにゲインモジュールを追加します。このモジュールを使用すると、サウンドの振幅を変更できます。ボリュームノブに似ています。すでに接続機能を使用して、オシレーターをオーディオ出力に接続しています。同じ接続機能を使用して、任意のオーディオコンポーネントを接続できます。 Firefoxを使用していて、Webオーディオコンソールを見ると、次のことがわかります。
音量を変更したい場合、パッチは次のようになります。
つまり、オシレーターはオーディオデスティネーションに接続されなくなり、代わりにゲインモジュールに接続され、そのゲインモジュールはデスティネーションに接続されます。これをギターのペダルとケーブルで行うことを常に想像するのは良いことです。コードは次のようになります。
var audioCtx = new (window.AudioContext || window.webkitAudioContext) // we create the gain module, named as volume, and connect it to our var volume = audioCtx.createGain(); volume.connect(audioCtx.destination); //these sines are the same, exept for the last connect statement. //Now they are connected to the volume gain module and not to the au var sinea = audioCtx.createOscillator(); sinea.frequency.value = 440; sinea.type = 'sine'; sinea.start(); sinea.connect(volume); var sineb = audioCtx.createOscillator(); sineb.frequency.value = 523.25; sineb.type = 'sine'; sineb.start(); sineb.connect(volume); var sinec = audioCtx.createOscillator(); sinec.frequency.value = 698.46; sinec.type = 'sine'; sinec.start(); sinec.connect(volume); volume.gain.value=0.2; 解決策はhttps://github.com/autotel/simple-webaudioapi/にあります。
GainNodeは最も基本的なエフェクトユニットですが、ディレイ、コンボルバー、バイクアッドフィルター、ステレオパンナー、ウェーブシェイパーなどもあります。 Tone.jsなどのライブラリから新しいエフェクトを取得できます。
これらのサウンドパッチの1つを独自のオブジェクトに保存すると、必要に応じてそれらを再利用し、より少ないコードでより複雑なオーケストレーションを作成できます。これは、将来の投稿のトピックになる可能性があります。
Tone.jsで物事を簡単にする
バニラWebオーディオモジュールがどのように機能するかを簡単に見てきたので、素晴らしいWebオーディオフレームワークであるTone.jsを見てみましょう。これで（そして NexusUI ユーザーインターフェイスコンポーネントの場合）、より興味深いシンセやサウンドを非常に簡単に作成できます。試してみるために、サンプラーを作成してユーザーインタラクティブ効果を適用してから、このサンプルにいくつかの簡単なコントロールを追加します。
Tone.jsサンプラー
簡単なプロジェクト構造を作成することから始めることができます。
simpleSampler |-- js |-- nexusUI.js |-- Tone.js |-- noisecollector_hit4.wav |-- sampler.html 私たちのJavaScriptライブラリは js ディレクトリ。このデモの目的のために、私たちは使用することができます NoiseCollectorのhit4.wav Freesound.orgからダウンロードできるファイル。
Tone.jsは、Playerオブジェクトを介してその機能を提供します。オブジェクトの基本的な機能は、サンプルをロードし、ループまたは1回再生することです。ここでの最初のステップは、sampler.htmlファイル内の「sampler」変数にプレーヤーオブジェクトを作成することです。
クリスタル（プログラミング言語）
Sampler var sampler = new Tone.Player('noisecollector_hit4.wav', function() { console.log('samples loaded'); }); プレーヤーコンストラクターの最初のパラメーターは、の名前であることに注意してください。 WAVファイル 、2番目はコールバック関数です。サポートされているファイルの種類はWAVだけではありません。互換性は、ライブラリよりもWebブラウザに依存します。コールバック関数は、プレーヤーがサンプルをバッファーにロードし終えると実行されます。
また、サンプラーを出力に接続する必要があります。これを行うTone.jsの方法は次のとおりです。
sampler.toMaster(); …ここで、サンプラーは10行目以降のTone.Playerオブジェクトです。toMaster関数はconnect（Tone.Master）の省略形です。
開発者コンソールを開いた状態でWebブラウザーを開くと、プレーヤーが正しく作成されたことを示す「サンプルが読み込まれました」というメッセージが表示されます。この時点で、サンプルを聞きたいと思うかもしれません。そのためには、Webページにボタンを追加し、一度押すとサンプルを再生するようにプログラムする必要があります。本文でNexusUIボタンを使用します。
button1.on('*',function(data) { console.log('button pressed!'); }) これで、丸いボタンがドキュメントにレンダリングされているのがわかります。サンプルを再生するようにプログラムするには、次のようなNexusUIリスナーを追加します。
nx.onload = function() { button1.on('*',function(data) { console.log('button pressed!'); sampler.start(); }); } NexusUIの優れた点は、NexusUI要素ごとにグローバル変数を作成することです。これを行わないようにNexusUIを設定し、代わりにnx.globalWidgetsをfalseに設定することで、これらの変数をnx.widgets []にのみ含めることができます。ここでは、いくつかの要素を作成するので、この動作に固執します。
jQueryの場合と同様に、これらの.onイベントを配置でき、最初の引数はイベント名になります。ここでは、ボタンに対して行われたすべての機能に関数を割り当てています。これは「*」と書かれているものは何でも。 NexusUIAPIの各要素のイベントについて詳しく知ることができます。ボタンを押したときにメッセージをログに記録する代わりにサンプルを再生するには、サンプラーの開始機能を実行する必要があります。
var delay= new Tone.FeedbackDelay('16n',0.5).toMaster(); また、リスナーがonloadコールバック内に入ることに注意してください。 NexusUI要素はキャンバスに描画され、nxがonload関数を呼び出すまでそれらを参照することはできません。 jQueryのDOM要素で行うのと同じように。
このイベントは、マウスを押したときと離したときにトリガーされます。プレス時にのみトリガーされるようにする場合は、event.pressが1に等しいかどうかを評価する必要があります。
これにより、押すたびにサンプルを再生するボタンが必要になります。 sampler.retriggerをtrueに設定すると、サンプルが再生されているかどうかに関係なく、サンプルを再生できるようになります。それ以外の場合は、サンプルが終了するまで待ってから再トリガーする必要があります。
エフェクトの適用
Tone.jsを使用すると、簡単に遅延を作成できます。
sampler.connect(delay); 最初の引数は遅延時間です。これは、ここに示すように記譜法で書くことができます。 2つ目はウェットレベルです。これは、元のサウンドとそれに影響を与えるサウンドの混合を意味します。ディレイの場合、通常は100％ウェットにする必要はありません。これは、ディレイが元のサウンドに関して興味深いものであり、ウェットだけでは両方が一緒になってあまり魅力的ではないためです。
次のステップは、サンプラーをマスターから取り外し、代わりにディレイに接続することです。サンプラーがマスターに接続されているラインを微調整します。
dial1.on('*',function(data) { delay.delayTime.value=data.value; }) dial2.on('*',function(data) { delay.feedback.value=data.value; }) ボタンをもう一度試して、違いを確認してください。
次に、ドキュメントの本文に2つのダイヤルを追加します。
dial3.on('*',function(data) { sampler.playbackRate=data.value; }) そして、NexusUIlistenerを使用して、ダイヤルの値を遅延効果に適用します。
|_+_|
各イベントで微調整できるパラメーターは、Tone.jsのドキュメントに記載されています。遅れるのは ここに 。これで、例を試して、NexusUIダイヤルで遅延パラメーターを微調整する準備ができました。このプロセスは、エフェクトだけでなく、各NexusUI要素で簡単に実行できます。たとえば、次のように別のダイヤルを追加し、そのリスナーを追加してみてください。
|_+_|
これらのファイルは次の場所にあります。 github.com/autotel/simpleSampler
結論
これらのAPIを試したとき、頭に浮かんだすべての可能性とアイデアに圧倒され始めました。このオーディオの実装と従来のデジタルオーディオの実装の大きな違いは、オーディオ自体ではなく、コンテキストにあります。ここに合成を行う新しい方法はありません。むしろ革新は、オーディオと音楽の制作が今会っているということです Webテクノロジー 。
私は個人的に電子音楽制作に携わっていますが、この分野では、実際に音楽を演奏することと、録音したトラックを再生することとの間のあいまいさという矛盾が常にありました。ライブの電子音楽を実際に作成したい場合は、ライブの即興演奏用に独自のパフォーマンスツールまたは「音楽作成ロボット」を作成できる必要があります。しかし、電子音楽の演奏が、事前に準備された音楽作成アルゴリズムのパラメータを調整するだけになる場合は、聴衆もこのプロセスに関与することができます。私はクラウドソーシングされた音楽のためのウェブとオーディオのこの統合に関する小さな実験に取り組んできました、そしておそらくすぐに私たちは音楽が彼らのスマートフォンを通して聴衆から来るパーティーに参加するでしょう。結局のところ、洞窟時代に楽しんでいたかもしれないリズミカルなジャムとそれほど違いはありません。
