JavaScriptシンセサイザーの作成

ブラウザーシンセサイザーを作成するというアイデアは、Audio APIがまだ初期段階にあり、ブラウザーから音声を抽出するほとんどの機会（既製のファイルを再生する場合を除く）がbase64でのエンコードとオーディオタグでの記録を伴うWAVの生成であった場合でも、かなり前に思いついたものです。 そして、合成とコーディングが問題なく機能した場合（WAV形式は非常に単純です）、リアルタイムで音楽を再生するためのオーディオのストリーミングでは、すべてが悪化し、シームレスなバッファリングを達成できるトリックはなかったため、アイデアは生まれる前に消滅しました。 長年にわたって、Audio APIをサポートするブラウザーが大幅に追加され、その結果、この分野での新しい実験に触発されました。 この記事では、HTML5を使用してブラウザーシンセサイザーを作成する手順を説明します。単純な正弦波の生成から始まり、信号の切り替えと変調、オーディオエフェクトで終わります。



趣味のミュージシャンであるが、フルタイムのプログラマーである私は、実装を見積もる、理想的には録音する楽器が手元にないときに、仕事中に音楽のアイデアをしばしば追い越します。 したがって、最初はオンラインMIDIシーケンサーのアイデアが生まれました。これにより、ほとんどのアイデアをスケッチして保存することができます。 しかし、少なくともキーボード付きのマウスを使用して、「キャッシュデスクを離れることなく」リアルタイムで思い浮かんだメロディを再生および録音する機能を持たない、どのようなシーケンサーでしょうか。 その結果、最も単純なシンセサイザーを開発する過程で、少し考えが忍び込んでしまいました。大きなものに揺れるべきかどうかではありません。 もちろん、JavaScriptシンセサイザーのアイデアは新しいものではなく、さまざまな説得レベルの実装が時折あちこちで発生しましたが、少なくともここでは、ハブに関して、オーディオAPIのトピックに関する記事は数件しか見つかりませんでした。そしてこのテキストのために座るように促しました。



序文で簡単に述べたように、私が最初に考えたのは、サウンドを完全に分析的に処理してからWAV形式に直接エンコードすることでしたが、この形式のストリーミング再生と関連トピックのドキュメントを組み合わせて苦労する過程で、私は突然、実装が良いと思いましたMDNで説明されているオーディオAPIブラウザ。 不要なトリックや最小限の手段を使用しないAudio APIにより、機能ブロックから仮想オーディオパスを作成し、それらを好みに合わせて調整および切り替えることができます。 APIには、ほぼすべての必要な基本要素（オシレーター、アンプ、スプリッターなど）が記載されています。完全なリストと使用例については、 MDNの対応するセクションを参照することをお勧めします。そのため、主な問題は、効果的で適切なスイッチングと作成と管理です。



最初のバージョンでは、実装する最小限の機能を決定する必要があります。 私に関しては、波形（正弦波、のこぎり波、蛇行）、およびビブラート（トーンの変動）、トレモロ（ボリュームの変動）、エコーなどのエフェクトを選択することが絶対に必要です。 さらに、古典的な機能から、ADSRエンベロープ設定を見たいと思います。これは、実際の楽器で演奏される音の音の強さの位相の単純化された近似です。



トレモロとビブラートが変調効果（それぞれ振幅とピッチ）であることを考えると、システムパラメーターのいずれかに対するユニバーサルモジュレーターの実装は、最も自然で柔軟なソリューションのようです。 モジュレーターの全体的な特徴は、信号パラメーターだけでなく、他の自己相似モジュレーターのパラメーターにも直接影響を与え、想像力によってのみ制限される音の形成の可能性を制限できることです。 かつて、このアイデアはアナログシンセサイザーの基礎にもありましたが、切り替えは次のようになりました。







私たちにとっては、次のようになります。

synth.connect(volume); volume.connect(delay.input); delay.connect(pan); pan.connect(audioCtx.destination); var vibrato = new SineModulator(); vibrato.modulate(synth, 'pitchShift');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、単純なサウンド合成から始めましょう。このオブジェクトでは、AudioContextオブジェクトを作成し、その中でオシレーターを作成し、その周波数を設定し、オーディオ出力に接続してから発振させ、サウンドを生成します。

  audioContext = new AudioContext(); var oscillator = audioContext.createOscillator() ; oscillator.frequency.value = 440; oscillator.connect(audioContext.destination); oscillator.start(0);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが正しく行われた場合、電話のビープ音の周波数に精通しているすべての人（まあ、または音叉-それは誰にでも近い）にスピーカー/ヘッドフォンで心地よい音が聞こえるはずです。 このプロセスは、同じオブジェクトの対応する.stop（）ハニーを呼び出すことで停止できます。 ちなみに、開始関数と停止関数に渡されるパラメーターは秒単位の時間です。その後、シグナルに関して指定されたアクションを実行する必要があります。 まだ必要ないので、パラメーターを0に設定しますが、まったく省略できます。 .connect（）および.disconnect（）メソッドにも注意を払う必要があります。これらのメソッドは、すべてのノードに共通のAudioNodeインターフェースの一部であり、入力と出力を切り替えるのに役立ちます。 オシレーターの.connect（）を呼び出すことにより、結果のオーディオ信号をパラメーターとして渡されたノード、この場合はaudioContext.destinationに送信するように指示します。この場合、プログラムの観点からは、さらに再生するためにオペレーティングシステムにサウンドを送信する最終宛先です。



シンセサイザーの最初の機能として、波形の選択を実装します。 最も一般的な波形（鋸や蛇行など）はAPIの一部として利用でき、オシレーターに適切なパラメーターを指定することで使用できます（例：audioContext.createOscillator（ 'square'））。 さらに興味深いケースとして、任意波形を指定できるPeriodicWaveインターフェースがあります。 フーリエ係数を持つ2つの配列が関数の入力に送信されます。これは、任意の波形に対して簡単に計算できるプロセスを文献で見つけることができます（たとえば、 ここで簡単に説明します ）。 したがって、振幅が比例的に減少する信号のすべての高調波の合計である同じのこぎり波について、余弦（複素表記の実数）の係数は0であり、正弦（虚数）1 / nnの場合、関数は次のようになりますこのように見える：











当然、ノコギリの切れ味を良くするには、追加する高調波の数を増やす必要があります。 このプロセスはアニメーションに示されています。







したがって、この信号に対する係数の計算とPeriodicWaveの送信は次のようになります。

 var context = new global.AudioContext(); var steps = 128; var imag = new global.Float32Array(steps); var real = new global.Float32Array(steps); for (var i = 1; i < steps; i++) { imag[i] = 1 / (i * Math.PI); } var wave = context.createPeriodicWave(real, imag); module.exports = wave;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップは、ピッチを選択する機能です。 実際のシンセサイザーでは、これはキーボードを使用して行われますが、まずはモニター画面にersatzキーボードを作成します。 私はデザイナーではなく、高品質のデザインを作成できませんでした。そのため、すべてのグラフィックを手で描いて、デザイン思考の不足を隠しています。 その結果、基本機能を備えたキーボードと、次の3つの波形から選択できます。







各キーストロークは、再生されるノートのシリアル番号に関する情報を含む信号をシンセサイザーに送信する必要があります。 同じことがキーリリースイベントにも当てはまります。 古典的なシンセサイザーは、キーを押すことで最初に1つのオシレーターをピッチで変調していましたが、技術的な制限がないため、私は人生を複雑にせず、同時に任意の数のノートを演奏するのに必要な数のオシレーターを作ることにしました 後続のモジュールとの便利な切り替えのために、すべてのオシレーターが接続され、すべての信号を1つのストリームにミキシングする1つの共通出力ノードがあることに同意します。 1つのエントリポイントと1つの出口ポイントのルールは、今後すべての後続モジュールに適用されます。 そのようなポイントとして、ゲインが1（デフォルト）の最も単純なGainNodeノードが使用されます。 概略的には、次のようになります。











そして、このようなコードでは：

 function Synth(context) { this.audioContext = context; this.output = context.createGain(); this._oscillators = {}; } Synth.prototype.play = function(note) { var oscillator; oscillator = this._oscillators[note.pitch] = this.audioContext.createOscillator(); oscillator.frequency.value = note.frequency; oscillator.connect(this.output); oscillator.start(0); return oscillator; }; Synth.prototype.stop = function(note) { this._oscillators[note.pitch].stop(0); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

基本機能の1つは、音声を生成するように設計されたデバイスを想像することは不可能ですが、オーディオAPIはそれぞれGainNodeおよびStereoPannerインターフェイスを提供するため、チャンネルの音量とバランスを調整することです。 それらを回路に追加し、同じ接続方法を使用して通勤します：

 var audioContext = new AudioContext(); var volume = audioContext.createGain(); var pan = audioContext.createStereoPanner(); volume.gain.value = 1; pan.pan.value = 0; synth.output.connect(volume); volume.connect(pan); pan.connect(audioContext.destination);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パラメーターを調整するには、2つの入力フィールドを作成し、対応するノードに直接接続します。 値を読み取って渡すために、メディエーターパターンを実装する単純なコントロールオブジェクトを作成し、変更時に関心のある人にフィールド値を送信します。 その実装に専念する意味はありません。どのフィールドでも値が変更されたときに何が起こるかに集中します。

 controls.on('volume-change', function(value) { volume.gain.value = value; }); controls.on('pan-change', function(value) { pan.pan.value = value; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビブラートエフェクトの開発、およびMIDIデバイスの物理的なレバーによるピッチの制御について事前に考え、Synthモジュールによって生成されるすべてのサウンドのピッチを変更する機能を追加します。 この関数は、元のモジュールへの混合物として実装されます。





ですから、最初の効果であるビブラート、つまり ピッチの周期的なピッチ変化。 これらの目的のために、前述のように、変調器を作成し、計画どおり、変調器は、振幅や周波数などの他の変調器の特性を含むシステムのパラメーターを変調できるように実装する必要があります。



（ UPD ：コメントで、彼らは間隔でアプローチの非最適性を正しく示唆しました、特に発振器はパラメータを直接制御できるため、執筆時点ではわかりませんでしたので、モジュレータに関する部分は実用的というよりも理論的です）



周波数の変化と「正面から」衝突するリスクがある最初の問題は、信号レベル間のジャンプです。これは、残念ながら、次の図に見られるようにはっきりと聞こえます。







さらに、前の正弦波と後続の正弦波の位相の違いは、現在の時点に依存するため、非常に見苦しくなります。 この望ましくない効果を回避するには、周波数を変更するときに、ゼロではなく現在のX軸に沿った点に対して正弦波を圧縮またはストレッチする必要があります。これにより、信号位相はオブジェクトに常に保存され、さらなる振幅値を計算する際の基準点として使用されます。







変調器の実装における2番目の重要な点は、加法性です。 理論的には、任意の数の正弦波を追加した結果として得られる波形には制限がなく、変調器が加算性条件を満たすため、創造性の範囲が広がります。



上記の条件を考慮して、必要な変調器を実装します。





次に、モジュレーターを使用して、ピッチを周期的に変更すると同時に、エフェクトパラメーターの入力フィールドをインターフェイスに追加し、モジュレーターの対応するプロパティにリンクします。

 var vibrato = new SineModulator(); vibrato.modulate(synth, 'pitchShift'); controls.on('vibrato-on-change', function(value) { parseInt(value) ? vibrato.start() : vibrato.stop(); }); controls.on('vibrato-depth-change', function(value) { vibrato.depth = value; }); controls.on('vibrato-freq-change', function(value) { vibrato.frequency = value; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果の信号を開始して分析し、振動の存在に注意します。 達成された効果：







リストの次の項目-トレモロ-は原則的に同様で、唯一の違いは変調されたパラメーター、今回は音量です。 この効果のコードは、最小限に抑えられ、ほとんど同じです。

 var tremolo = new SineModulator(); tremolo.modulate(volume.gain, 'value'); controls.on('tremolo-on-change', function(value) { parseInt(value) ? tremolo.start() : tremolo.stop(); }); controls.on('tremolo-depth-change', function(value) { tremolo.depth = value; }); controls.on('tremolo-freq-change', function(value) { tremolo.frequency = value; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つの変調データを持ち、それらの周波数を組み合わせたり、または逆に繁殖したりすることで、サウンドで非常に興味深い効果を既に得ることができます。また、周期を相互に単純かつ振幅を広くすることで、カオスと予測不能の効果によって準備のできていないリスナーをキャッチすることさえできます！



次の論理的なステップは、レベルを上げて、ビブラート周波数などの利用可能なモジュレーターのパラメーターの1つを変調しようとすることです。その結果、ゲームの効果は振動の速度になります。 これを実現するために、2つの変調器を作成し、そのうちの1つを変調パラメーターとして2番目の周波数特性に割り当てます。

 var vibrato = new SineModulator(); vibrato2.modulate(synth, 'pitchShift') vibrato2.frequency = 5; vibrato2.depth = 50; vibrato.modulate(synth, 'pitchShift'); vibrato.start(); vibrato2 = new SineModulator(); vibrato2.modulate(vibrato, 'frequency'); vibrato2.frequency = 0.2; vibrato2.depth = 3; vibrato2.start();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

トーンの変化の周波数の周期的な変化が裸の耳で聞こえ、オーディオエディターで記録されて開かれた結果の信号が適切に見えます（密度の高い領域では、周波数の高い音があります）。







これにより、変調を使用した実験は成功したと見なされ、効果が実現されます。 任意の信号による変調は正弦波を追加することで実現できますが、将来的には、少なくとも最も一般的に使用される波形（のこぎり波、方形波）に対して、準備された変調器のセットを用意する方がはるかに便利です。このシナリオでは、既存の変調器との類推によってコンストラクターのセットを作成できますSineModulator、およびオシレーターの波形を指定するときに使用したフーリエ係数を介して波形を設定するメカニズムを使用します。 このタスクはAudio APIに直接関係しなくなったため、ここではこのトピックを完成させ、最初の非変調効果、つまりエコーの実装に進むことを提案します。



ほとんどの場合、この効果は応答の数、応答時間、減衰係数の3つのパラメーターによって特徴付けられます。 ゼロと1以外の応答数を処理するには、信号を分岐し、各分岐の遅延線を作成する必要があります。 遅延線は、信号の通過を一定期間遅らせるノードです。 Audio APIによって提供され、AudioContext.createDelay関数によって作成された遅延線を使用します。 減衰係数の存在により、各分岐が遅延線回路（増幅器）に変わります。 さらに、純粋な信号と効果のある信号を切り替える必要があります。また、パスの前後のリンクとの単純な切り替えの可能性を提供する必要があります（1つの入力と1つの出力を持つことに同意してください）。











残念ながら、AudioNodeインターフェースを完全に実装し、他のノードの接続メソッドのパラメーターとして直接使用できる要素を作成する方法を見つけることができませんでした。 インターネットでの検索でも結果が得られなかったため、最終的には、インターネット上のおそらく知識のある人々から与えられたアドバイスに従いました。その本質は、オブジェクトが一連の標準ノードのコンテナであり、入力への接続は直接ではなく、入力プロパティを介して行われた、 GainNodeのベースノードである。



テスト、実装、実行。 次の形式のウェーブがあります。







このコードでここに到達しました：





進歩は明らかです：効果の大部分の適用から生じる音は、古い学校の音楽性と精神を持っています。 耳を切る唯一の瞬間は、オシレーターがオフになっているときの美的クリックです。前のグラフでそれらが表示され、エコーを適用すると特に耳に投げ込まれます。この場合、それぞれが他の音が鳴っている間に何度も繰り返されるためです。



特にこの効果を克服するには、その主な機能にダイナミクスを与えるために、いわゆるADSRエンベロープ（Attack-Decay-Sustain-Release）があります。これは、合成された波の形状を時間的に特徴付け、実際の楽器で取られた音の動作を近似的に説明します。







ボリュームのスムーズな増減の結果として、このようなエンベロープを再生された各ノートに適用すると、垂直フロントのジャンプのような失速が削除されます。これは、高周波数クリックとして耳で知覚されます。 ピッチシフトの場合のように、実装はシンセサイザーに直接加えられます。 各オシレーターを作成するとき、アンプと出力ノードの間にアンプを配置し、ADSRエンベロープの指定されたパラメーターに従ってゲインを制御します。









そこで、このストロークを導入して、人間のリスニングに適したサウンドを生成する完全に機能する基本的なシンセサイザーを手に入れました。 さらなる改善ステップは、例えば、オシレーターとモジュレーターの視覚的な作成、チューニング、スイッチングなどのインターフェースの変更、および合成自体に関して、フィルターの追加、高調波、非線形歪みなどの導入などです。ただし、これはさらなる研究のトピックです。 次の記事では、MIDIインストゥルメント、特にキーボードとギターを結果のシンセサイザーに接続し、サウンドと実際のオーディオエフェクトの録音に切り替える予定です。 もちろん、これはすべてブラウザーで！



プログラムのデモは、次のリンクから入手できます。miroshko.github.io / Synzer



すべてのソースコードはgithub： github.com/miroshko/Synzerで入手できます。スター、フォーク、プルリクエストに満足します。