`data/artifacts/1fd68f0d37b7/qwen25-7b.html`

84 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microphone Visualizer</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #282c34; color: white; }
        canvas { margin-top: 20px; border: 1px solid white; }
        .controls { margin-top: 20px; display: flex; gap: 10px; }
        button { padding: 5px 10px; background-color: #6272a4; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <canvas id="visualizer"></canvas>
    <div class="controls">
        <button onclick="toggleTheme()">Toggle Theme</button>
    </div>

    <script>
        const canvas = document.getElementById('visualizer');
        let ctx;
        let audioContext;
        let sourceNode;
        let analyserNode;
        let dataArray;
        let colorScheme = 'light';

        function initAudio() {
            if (!navigator.mediaDevices.getUserMedia) return;

            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(stream => {
                    audioContext = new AudioContext();
                    sourceNode = audioContext.createMediaStreamSource(stream);
                    analyserNode = audioContext.createAnalyser();

                    sourceNode.connect(analyserNode);
                    analyserNode.fftSize = 256;
                    dataArray = new Uint8Array(analyserNode.frequencyBinCount);

                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    requestAnimationFrame(drawVisualizer);
                })
                .catch(err => {
                    console.error('Error accessing microphone:', err);
                    document.body.textContent = 'Microphone access denied.';
                });
        }

        function drawVisualizer() {
            if (!analyserNode) return;

            analyserNode.getByteFrequencyData(dataArray);

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

            const barWidth = (canvas.width / dataArray.length) * 2;
            let x = 0;

            for (let i = 0; i < dataArray.length; i++) {
                const barHeight = dataArray[i] / 4;
                ctx.fillStyle = colorScheme === 'light' ? '#6272a4' : '#1e293b';
                ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
                x += barWidth + 5;
            }

            requestAnimationFrame(drawVisualizer);

            const waveContext = canvas.getContext('2d');
            waveContext.drawImage(analyserNode, 0, 0, canvas.width, canvas.height / 2);
        }

        function toggleTheme() {
            colorScheme = colorScheme === 'light' ? 'dark' : 'light';
            document.body.classList.toggle('light-theme');
            document.body.classList.toggle('dark-theme');
            ctx.fillStyle = colorScheme === 'light' ? '#6272a4' : '#1e293b';
        }

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