Real-Time MP3 Audio Analysis and Frequency Visualization with Web Audio API

Explore the capabilities of the Web Audio API with this interactive application for real-time MP3 audio analysis. Upload an audio file to visualize frequency spectra, calculate average frequency, detect peaks, and measure frequency modulation dynamically. Perfect for understanding digital sound processing and building advanced audio visualization tools in the browser.

canvas and audio

Web Audio API MP3 audio analysis real-time frequency visualization digital signal processing interactive sound visualization JavaScript audio projects browser-based audio tools frequency spectrum audio file processing audio graphing tools

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Music Detection and Analysis</title>
    <style>
        /* Basic styling for the webpage */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #audio-container {
            margin-bottom: 20px;
        }
        #results {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            min-height: 200px;
            white-space: pre-wrap;
        }
        canvas {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>3D Music Detection and Analysis</h1>

    <!-- Section to upload and play MP3 audio -->
    <div id="audio-container">
        <input type="file" id="audio-file" accept="audio/mp3" />
        <button onclick="playAudio()">Play Audio</button>
    </div>

    <!-- Div to display analysis results -->
    <div id="results">
        <h3>Analysis Results:</h3>
        <p>The music analysis will appear here...</p>
    </div>

    <script>
        let audioContext; // Web Audio API context
        let analyser; // Analyser node for frequency analysis
        let audioElement; // HTML audio element for playback
        let audioSource; // Audio source node
        let fileInput = document.getElementById("audio-file"); // Input element for file selection

        // Function to play the selected audio file
        function playAudio() {
            let file = fileInput.files[0]; // Get the selected file
            if (!file) {
                alert("Please select an MP3 file."); // Show an alert if no file is selected
                return;
            }

            // Create a new AudioContext using Web Audio API
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
            analyser = audioContext.createAnalyser(); // Create an analyser node

            let reader = new FileReader(); // FileReader to read the audio file
            reader.onload = function(e) {
                let audioData = e.target.result; // Get the file data
                
                // Decode the audio data into a buffer
                audioContext.decodeAudioData(audioData, function(buffer) {
                    audioElement = new Audio(); // Create a new audio element
                    audioElement.src = URL.createObjectURL(file); // Set the audio source to the file
                    audioElement.play(); // Play the audio

                    // Connect the audio element to the analyser node
                    audioSource = audioContext.createMediaElementSource(audioElement);
                    audioSource.connect(analyser);
                    analyser.connect(audioContext.destination);

                    // Start the analysis
                    updateAnalysis();
                });
            };

            // Read the file as an ArrayBuffer
            reader.readAsArrayBuffer(file);
        }

        // Function to update the frequency analysis
        function updateAnalysis() {
            const bufferLength = analyser.frequencyBinCount; // Get the number of frequency bins
            const frequencyData = new Uint8Array(bufferLength); // Array to store frequency data
            analyser.getByteFrequencyData(frequencyData); // Fill array with frequency data

            let resultsDiv = document.getElementById('results'); // Div to display results
            resultsDiv.innerHTML = '<h3>Analysis Results:</h3>'; // Clear previous results

            // Calculate the average frequency
            let averageFrequency = frequencyData.reduce((a, b) => a + b, 0) / frequencyData.length;
            resultsDiv.innerHTML += `<p><strong>Average Frequency:</strong> ${averageFrequency.toFixed(2)} Hz</p>`;

            // Filter peaks above 200 Hz
            let peaks = frequencyData.filter(value => value > 200); // Peaks above 200 Hz
            resultsDiv.innerHTML += `<p><strong>Number of Peaks Above 200Hz:</strong> ${peaks.length}</p>`;

            // Detect 3D frequency modulation
            let modulationData = calculateModulation(frequencyData);
            resultsDiv.innerHTML += `<p><strong>Frequency Modulation:</strong> ${modulationData}</p>`;

            // Create a canvas to draw the frequency graph
            let canvas = document.createElement('canvas');
            resultsDiv.appendChild(canvas);
            let ctx = canvas.getContext('2d');
            canvas.width = 400;
            canvas.height = 150;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();

            // Plot the frequency data on the canvas
            for (let i = 0; i < bufferLength; i++) {
                let x = i;
                let y = frequencyData[i];
                ctx.lineTo(x, canvas.height - y);
            }

            ctx.stroke(); // Draw the graph

            // Continuously update the analysis
            requestAnimationFrame(updateAnalysis);
        }

        // Function to calculate frequency modulation
        function calculateModulation(frequencyData) {
            let modulation = 0;
            for (let i = 1; i < frequencyData.length; i++) {
                modulation += Math.abs(frequencyData[i] - frequencyData[i - 1]);
            }
            return modulation.toFixed(2); // Return the modulation value
        }
    </script>
</body>
</html>

CODE SIMULATION

kod

Facebook | Twitter | Linkedin | Whatsapp

index canvas and audio music detection create unique m