ブラウザで音楽をエンコードします

ブラウザで音を出すJavascriptコードの作成に関する定期的な記事があります。 ノートノートの頻度がAノートの頻度とどのように異なるかを説明し、コード例は定期的に「ビープ音」を発します。



同様のことをしましょうが、結果は音楽に似ています。 そして、 ABCの精神における比較的視覚的な表記法は、次のようなものです。







ここでコードを実行して聞くことができます 。

仕組み

再生には、 WebAudioFontテクノロジーが使用されます。 ツールスクリプトは、GitHubのプロジェクトから直接取得されます。



音符の長さは配列にハンマーで打ち込まれ、その各要素は次の形式の関数です。

function bass(pitch, duration) { return { preset : _tone_Rubber_32Bass000079_461_460_45127, pitch : pitch, duration : duration }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり プリセット（ WebAudioFontの場合はツール）、ノートのピッチと継続時間を含むオブジェクトを返すだけです。



明確にするために、高さを所定の定数（var C = 0; var Cs = 1; var D = 2;など）で設定し、デュレーションをフルノートの小数で設定します。



当然、ドラムの場合、継続時間のある高さは意味をなさないため、同じ値に設定されます。



サウンドを出力するには、ループ内で配列をソートし、各プリセットを再生キューに入れます。

 function beats(notes) { for (var n = 0; n < notes.length; n++) { var beat = notes[n]; for (var i = 0; i < beat.length; i++) { if (beat[i]) { player.queueWaveTable(audioContext , audioContext.destination , beat[i].preset , startTime + n * beatLen , beat[i].pitch , beat[i].duration); } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定の間隔で無限に配列をプレーヤーに送信します。

 setInterval(function () { if (audioContext.currentTime > startTime - 1 / 4 * N) { nextPiece(); startTime = startTime + pieceLen; } }, 20);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

送信するたびに、startTime変数を増やします。この変数には、現在のピースの開始時間が格納されます。

警告：最新のブラウザでは、フォーカスが別のウィンドウに切り替えられると、setTimeout関数とsetInterval関数の速度が低下し、メロディが「ジャム」します。

JSFiddleの別の例

すべてがほぼ同じですが、より多くのノートがあり、各楽器は独自のGainNodeを介して演奏され、ボリュームレベルを調整します







ここで例を実行して聞くことができます 。



JSFiddleでは、JSBinとは異なり、HTMLを使用しない純粋なJSコードに制限し、外部リソースセクションでエディターの左側のWebAudioFontツールとプレーヤーのスクリプトを指定できます。

初心者ギタリストへの警告：購入前にミュージックストアでギターをチェックし、「Smoke over Water」の演奏を自動的に開始すると、すぐに150ルーブルの罰金が請求されます。

例はモバイルブラウザでも機能しますが、小さな電話画面でコードを編集することはあまり便利ではありません。