懐かしき日のおもひでぽろり

はじめに

カレンダーの題材をおもひでぽろぽろにしてるので今の所属会社での印象深い開発関連の話を振り返ってみる

音声入力系のシステムで音声に合わせた波形を表示する

canvasを利用しつつ、入力音声に合わせて波形を表示するようなものを作成していました。
最初はフーリエ変換とかいるのか・・・？となりつつ何かいい方法がないか調べてみたら
web audio apiとかでできそうだったのでやっほーいとなった記憶があります。
やっぱり目で見て楽しめるものを作成できるのが開発してる上では楽しいですね

過去に書いたコードの一部

  function draw() {
    const barWidth = canvas.width / analyserNode.fftSize;
    const array = new Uint8Array(analyserNode.fftSize);
    analyserNode.getByteTimeDomainData(array);
    drawContext.fillStyle = 'rgba(255, 255, 255, 1)';
    drawContext.fillRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < analyserNode.fftSize; ++i) {
      const value = array[i];
      const percent = value / 255;
      const height = canvas.height * percent;
      const offset = canvas.height - height;
      drawContext.fillStyle = 'lime';
      drawContext.fillRect(i * barWidth, offset, barWidth, 2);
    }
    requestAnimationFrame(draw);
  }

振り返ってみて

最近作るシステムではあまりこういった形で動きのあるものを作る機会がなかなかない状態ですが、
目で見て楽しいシステムのようなものも作ってみたいので個人開発等でそのあたりに挑戦していけたらいいなと思います。