`data/artifacts/1fd68f0d37b7/hermes3-8b.html`

112 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Microphone Audio Visualizer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    canvas {
      border: 1px solid #ccc;
      background-color: #f0f0f0;
    }
    
    label {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <canvas id="waveform" width="800" height="200"></canvas>
  <label for="theme">Toggle Color Theme:</label>
  <input type="checkbox" id="theme" checked>

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

    let audioContext;
    let sourceNode;
    let analyserNode;

    function startVisualization() {
      try {
        // Check if Web Audio API is supported
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
            sourceNode = audioContext.createMediaStreamSource(stream);
            analyserNode = audioContext.createAnalyser();
            
            // Connect the MediaStreamSource to the AnalyserNode
            sourceNode.connect(analyserNode);
            analyserNode.connect(audioContext.destination);

            // Render loop
            renderLoop();

            // Toggle theme color on checkbox change
            document.getElementById('theme').addEventListener('change', () => {
              ctx.globalCompositeOperation = document.getElementById('theme').checked ? 'source-over' : 'destination-over';
            });
          })
          .catch(err => {
            console.error("Permission denied to access microphone", err);
            displayError("Access to microphone was denied. Please allow it in your browser settings.");
          });
      } catch (err) {
        console.error('Web Audio API not supported in this browser', err);
        displayError("Your browser doesn't support Web Audio API. Try updating to a newer version.");
      }
    }

    function renderLoop() {
      requestAnimationFrame(renderLoop);

      let dataArray = new Array(800);
      
      // Get the frequency data
      analyserNode.getByteFrequencyData(dataArray);

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

      // Draw waveform
      for(let i = 0; i < dataArray.length; i++) {
        let barHeight = dataArray[i];
        let x = i;
        let y = canvas.height - barHeight;

        ctx.fillRect(x, canvas.height - barHeight, 2, barHeight);
      }

      // Draw frequency bars
      ctx.fillStyle = document.getElementById('theme').checked ? '#f00' : '#0f0';
      for(let i = 0; i < dataArray.length; i++) {
        let barWidth = canvas.width / dataArray.length;
        let height = Math.log(dataArray[i] + 1) * 10;
        
        ctx.fillRect(i * (canvas.width / dataArray.length), canvas.height - height, barWidth, height);
      }
    }

    function displayError(message) {
      ctx.fillStyle = 'black';
      ctx.font = "24px Arial";
      ctx.textAlign = "center";
      ctx.fillText(message, canvas.width / 2, canvas.height / 2);
    }

    document.addEventListener('DOMContentLoaded', startVisualization);
  </script>
</body>
</html>