0

私は現在、言語を学ぶために React でアプリを構築しています。アプリはゲームであり、ゲーム内でHowler.jsを使用して多くのサウンドを再生しています。Howler は、簡単にサウンドを作成できる点と、非常に重要なことに、サウンドのピッチを調整できる点で優れています。つまり、1 つのサンプルだけでメロディーを作成できます。

さまざまなピッチでさまざまなサウンドを多数使用しているときに直面し始めている問題は、パフォーマンスです。サウンド オブジェクトをループするようにセットアップしたコードは非常に重く、それを最適化する方法があるかどうか疑問に思っています (私は決して Javascript の専門家ではないので、もっと無駄のないものがあっても驚かないでしょう)。サウンドオブジェクトを実行する方法)。とにかく、ここに私のサウンドオブジェクトがあります：

var testTrack = [{
        rowId:1,
        rowExtras:"notExpanded",
        rowSample:
            {
                sampleId:"1",
                notes:[
                    {
                        keyNumber:0,
                        noteDelay:0,
                        notePitch:1
                    },{
                        keyNumber:2,
                        noteDelay:460,
                        notePitch:1
                    },{
                        keyNumber:4,
                        noteDelay:920,
                        notePitch:1
                    },{
                        keyNumber:6,
                        noteDelay:1380,
                        notePitch:1
                    },{
                        keyNumber:8,
                        noteDelay:1840,
                        notePitch:1
                    },{
                        keyNumber:10,
                        noteDelay:2300,
                        notePitch:1
                    },{
                        keyNumber:12,
                        noteDelay:2760,
                        notePitch:1
                    },{
                        keyNumber:14,
                        noteDelay:3220,
                        notePitch:1
                    }                               
                ],
                sampleName:"Heavy Kick",
                sampleSource:"../../samplesWav/sample1.wav"
            }  

        },{    ...there are 12 more objects in the array with different samples in them

Howler.js でループしてサウンドを再生するために使用するコードを次に示します。上記のオブジェクトは、this.state.trackObject の下の Apps 状態にあることに注意してください。

  playTrack(){

    var audioArray = this.state.trackObject;

    for(var i=0; i <= audioArray.length - 1; i++) {

        var rowObject = this.state.trackObject[i]

        var notesLength = rowObject.rowSample.notes.length

        for(var j=0; j <= notesLength - 1; j++) {
            var notes = rowObject.rowSample.notes[j].noteDelay;
            var id = rowObject.rowSample.sampleId;
            var src = rowObject.rowSample.sampleSource; 
            var pitch = rowObject.rowSample.notes[j].notePitch;

            playSample(id,notes,src,pitch)                
        }

    }

    function playSample(id,notes,src,pitch){

        if(id != "null"){
        setTimeout(function(){  

        //this is where howler is used
         var sound = new Howl({
              src: [src],
              rate:pitch
         })

         sound.play();                 

         }, notes);  
      }
   }


}

「React」の方法でできる限りのことをしようとしていますが、ブラウザのパフォーマンスを向上させるために、再生機能をアプリの状態と統合するより良い方法があるかどうかはまだわかっていません。

私は Audio スプライトの使用を考えました (これは実際には Howler で非常にうまく機能するように設定されています)。こちらを使ってみました。実際にインストールに問題があり、実行できませんでしたが、それを修正できたとしても、howlers API からスプライトに適用されたピッチベンドでサウンドを追加できるとは思いませんか?

ありがとうございます。誰もが持っている可能性のあるパフォーマンス/ソリューションに関する提案を歓迎します!

4

1 に答える 1