DIR : /home/kozerus/public_html/ruffle/audio.html

/home/kozerus/public_html/ruffle

<!DOCTYPE html>
<html>
<head>
  <title>Audio Visualization</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <audio id="myAudio" src="./ko_builder/chord.mp3" controls></audio>
  <canvas id="myCanvas"></canvas>

  <script>
    const audio = document.getElementById('myAudio');
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    const audioContext = new AudioContext();
    const source = audioContext.createMediaElementSource(audio);
    const analyser = audioContext.createAnalyser();

    source.connect(analyser);
    analyser.connect(audioContext.destination); // Connect to speakers

    // Set up analyser parameters
    analyser.fftSize = 256;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

    function draw() {
      requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray);

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.lineWidth = 2;
      ctx.strokeStyle = 'rgb(0, 0, 0)';

      ctx.beginPath();

      const sliceWidth = canvas.width * 1.0 / bufferLength;
      let x = 0;

      for (let i = 0; i < bufferLength; i++) {
        const v = dataArray[i] / 128.0;
        const y = v * canvas.height / 2;

        if (i === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }

        x += sliceWidth;
      }

      ctx.lineTo(canvas.width, canvas.height / 2);
      ctx.stroke();
    }

    draw();
  </script>
</body>
</html>

koh5_pano

Drag mouse to navigate.

Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.

17.Aug.2010, Martin Wengenmayer