<!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>

<div id="audio-container">
        <input type="file" id="audio-file" accept="audio/mp3" />
        <button onclick="playAudio()">Play Audio</button>
    </div>

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

// 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>

About THIS CODE (CANVASOR.NET):