Лучшая производительность Javascript

Question

В настоящее время я создаю приложение в React для изучения языка. Приложение - игра, и в игре я играю много звуков, используя Howler.js. Howler великолепен, так как он позволяет мне легко создавать звуки, а также очень важно позволяет мне регулировать высоту звука, что означает, что я могу создавать мелодии только с одним семплом.

Проблема, с которой я начинаю сталкиваться, когда у меня много разных звуков на разных высотах, это производительность. С кодом, который я настроил для зацикливания моего звукового объекта, он довольно тяжелый, и мне интересно, есть ли способ его оптимизировать (я ни в коем случае не эксперт по 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. Обратите внимание, что вышеупомянутый объект находится в моем состоянии Apps под this.state.trackObject:

  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, но я все еще учусь, поэтому не уверен, что есть ли лучший способ интегрировать функцию воспроизведения с моим состоянием приложений для лучшей производительности браузера.

Я думал об использовании аудио спрайтов (которые на самом деле настроены на работу в Howler). Я попытался использовать это здесь. У меня действительно была проблема с установкой, и я не смог ее запустить, но даже если мне удастся это исправить, я не думаю, что смогу добавить звуки с изменением высоты тона, примененным из воющего API, к спрайту?

Спасибо, и я приветствую любые предложения по производительности / решениям, которые могут быть у каждого!

Answer 1

Я не уверен, как работает ваша игра, но, возможно, вам не нужно перебирать весь массив. Если вы храните звуки в хэше и обращаетесь к ним по уникальному идентификатору (возможно, по имени звука?), Это должно значительно повысить производительность.

Так что вместо того, чтобы вместо объявления testTrack в качестве массива, как это...

var testTrack = [{
  rowId:1,
  rowExtras:"notExpanded",
  rowSample: { // Code removed for brevity }
},{
  rowId:2,
  rowExtras:"notExpanded",
  rowSample: { // Code removed for brevity }
}];

Объявите это так...

var testTrack = {
  "track1": {
    rowId:1,
    rowExtras: "notExpanded",
    rowSample: { }
  },
  "track2": {
    rowId:2,
    rowExtras:"notExpanded",
    rowSample: { }
  }
};

Затем получите доступ к элементам, используя один из методов ниже, где "track1" будет именем звука...

var myTrack = testTrack.track1;
var myTrack = testTrack['track1'];

Не уверен, имеет ли это смысл в контексте вашей игры, но это, по крайней мере, спасет вас от повторения всего цикла.