計算機科学のブログ

let jscanvas = document.querySelector('#jscanvas'),
  ctx = jscanvas.getContext('2d'),
  soundBuffer,
  audioContext = new AudioContext();

fetch('./bulbul.mp3')
  .then(resp => resp.arrayBuffer())
  .then(buffer => audioContext.decodeAudioData(buffer))
  .then(buffer => {
    let source = audioContext.createBufferSource(),
      filter = audioContext.createBiquadFilter(),
      analyser = audioContext.createAnalyser();

    source.buffer = buffer;
    filter.type = 'lowpass';
    filter.frequency.value = 500;
    analyser.fftSize = 256;
    source
      .connect(filter)
      .connect(analyser)
      .connect(audioContext.destination);

    let bufferLength = analyser.frequencyBinCount,
      dataArray = new Uint8Array(bufferLength),
      height = 200,
      imageData = ctx.getImageData(0, 0, bufferLength, height),
      count = 0,
      draw = () => {
        analyser.getByteFrequencyData(dataArray);
        for (let i = 0; i < dataArray.length; i++) {
          for (let j = 0; j < 3; j++) {
            imageData.data[4 * (128 * count + i) + j] = dataArray[i];
          }
          imageData.data[4 * (128 * count + i) + 3] = 255;
        }
        if (count < height) {
          count++;
          requestAnimationFrame(draw);
        } else {
          ctx.putImageData(imageData, 0, 0);
        }
      };

    source.start(0, 0, 4);
    draw();
  });