Skip to content

code.md

Latest commit

 

History

History
92 lines (67 loc) · 2.68 KB

code.md

File metadata and controls

92 lines (67 loc) · 2.68 KB

index.html:

#<_io.TextIOWrapper name='index.html' mode='r' encoding='UTF-8'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live 3D Spectrogram</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script src="spectrogram.js"></script>
</body>
</html>

spectrogram.js:

#<_io.TextIOWrapper name='spectrogram.js' mode='r' encoding='UTF-8'>
navigator.mediaDevices.getUserMedia({ audio: true, video: false })
    .then(stream => {
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const source = audioContext.createMediaStreamSource(stream);
        const analyser = audioContext.createAnalyser();

        analyser.fftSize = 2048;
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);

        source.connect(analyser);
        // Continue with visualization setup
    })
    .catch(err => {
        console.error('Accessing the microphone failed: ', err);
    });

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    camera.position.z = 5;
    
    // Geometry for the spectrogram
    const geometry = new THREE.PlaneGeometry(1, 1, 128, 128);
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
    const spectrogram = new THREE.Mesh(geometry, material);
    scene.add(spectrogram);
    
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    
        // Update spectrogram geometry based on audio data here
    }
    
    animate();
    

    function updateSpectrogram() {
        analyser.getByteFrequencyData(dataArray);
    
        // Example: Update the spectrogram geometry vertices based on `dataArray`
        // This is a simplification. You'll need to adapt it to create a meaningful visualization
        for (let i = 0; i < geometry.vertices.length; i++) {
            const vertex = geometry.vertices[i];
            const value = dataArray[i] || 0;
            vertex.z = value * 0.01; // Scale the z-value based on frequency amplitude
        }
        geometry.verticesNeedUpdate = true;
    }
    
    function animate() {
        requestAnimationFrame(animate);
        updateSpectrogram(); // Call this inside your animate loop
        renderer.render(scene, camera);
    }