ブラウザで音声入力をリアルタイムに可視化するサイトを作りたい

前提・実現したいこと

ブラウザで音声入力をリアルタイムに可視化するサイトを作りたいと考えていて、サンプルコードを実行しました。

発生している問題

for文の後の式が理解できません。
valueは何を表しているのでしょうか？consoleに表示させると128と出てきました。
またこの4行の式の意味を教えていただけると幸いです。

const value = array[i];
const percent = value / 255;
const height = ch * percent;
const offset = ch - height;

該当のソースコード

言語：JavaScript/jQuery/html


<body>   
<canvas id="canvas"></canvas>
<div>
  <button id="start">録音開始</button>
  <button id="stop" disabled>録音終了</button>
</div>

<script>
  const start = document.querySelector('#start');
  const stop = document.querySelector('#stop');
  const canvas = document.querySelector('#canvas');
  const drawContext = canvas.getContext('2d');
  const cw = canvas.width;
  const ch = canvas.height;

  let mediaRecorder = null;
  let mediaStream = null;

  start.addEventListener('click', () => {
  start.disabled = true;
  stop.disabled = false;

  const chunks = [];
  mediaRecorder = new MediaRecorder(mediaStream, {
    mimeType: 'audio/webm'
  });

  mediaRecorder.addEventListener('dataavailable', e => {
    if (e.data.size > 0) {
      chunks.push(e.data);
    }
  });

  mediaRecorder.addEventListener('stop', ()　=> {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob(chunks));
    a.download = 'test.webm';
    a.click();
  });

    mediaRecorder.start();
  });

    stop.addEventListener('click', () => {
      if (mediaRecorder === null) {
        return;
    }

    start.disabled = false;
    stop.disabled = true;

    mediaRecorder.stop();
    mediaRecorder = null;
  });

  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
    mediaStream = stream;

    const audioContext = new AudioContext();
    const sourceNode = audioContext.createMediaStreamSource(stream);
    const analyserNode = audioContext.createAnalyser();
    analyserNode.fftSize = 2048;
    sourceNode.connect(analyserNode);

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

      for (let i = 0; i < analyserNode.fftSize; ++i) {
        const value = array[i];
        const percent = value / 255;
        const height = ch * percent;
        const offset = ch - height;

        drawContext.fillStyle = 'lime';
        drawContext.fillRect(i * barWidth, offset, barWidth, 2);
      }

        requestAnimationFrame(draw);
    }

      draw();
    }).catch(error => {
      console.log(error);
  });

</script>
      
<style>
  canvas {
    width: 100%;
    height: 256px;
  }

  button {
    padding: 0.5em 1em;
    border-width: 0;
    border-radius: 0.25em;
    font-size: 1em;
    background-color: #dfdfdf;
    color: #333;
  }

  button[disabled] {
    color: #aaa;
  }
</style>
</body>

行動規範の内容に同意します

回答1件

ベストアンサー

言葉で説明するより図で説明した方が分かりやすいかと思い図を描いてみました。

javascript
1const value = array[i]; // array は音データの配列(0～2048)。１つの音は0～255で表される。
2const percent = value / 255; // 0～255 をパーセント(0～100%)で表現。128の場合は50%(0.5)で表現。
3const height = ch * percent; // ch は canvas の高さ。プロットするY座標の位置を算出。
4const offset = ch - height;  // Canvas は左下ではなく 左上が (0,0) 原点である為、上下を反転