音声デコード処理の改善

[shun91]

ここが重い https://github.com/shun91/web-speed-hackathon-2021/blob/main/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx#L45-L49

[shun91]

[shun91]

calculate 関数のどこかが重いはず https://github.com/shun91/web-speed-hackathon-2021/blob/main/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx#L4-L31

↓のサウンドバー？の高さを算出するための処理っぽい

[shun91]

おもむろにperformance.now()で計測してみる

diff --git a/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx b/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx
index fa997ce..1f0d2a4 100644
--- a/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx
+++ b/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx
@@ -6,6 +6,7 @@ import React from 'react';
  * @returns {Promise<{ max: number, peaks: number[] }}
  */
 async function calculate(data) {
+  const start = performance.now();
   const audioCtx = new AudioContext();

   // 音声をデコードする
@@ -13,6 +14,8 @@ async function calculate(data) {
   const buffer = await new Promise((resolve, reject) => {
     audioCtx.decodeAudioData(data.slice(0), resolve, reject);
   });
+  console.log(performance.now() - start)
+
   // 左の音声データの絶対値を取る
   const leftData = _.map(buffer.getChannelData(0), Math.abs);
   // 右の音声データの絶対値を取る
@@ -27,6 +30,8 @@ async function calculate(data) {
   // chunk の平均の中から最大値を取る
   const max = _.max(peaks);

+  console.log(performance.now() - start)
+
   return { max, peaks };
 }

結果、全体的に重そう

1回目 2回目

パッと解決策は思いつかないので一旦後回し。。 （WebAudio周りの知見がなさすぎる。。）