<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Audio API - File Upload MP3</title>
</head>
<body>
    
    <div>
        <h1>Web Audio API - Upload and Play MP3</h1>
        
        
        <input type="file" id="audioFileInput" accept="audio/*">
        
        
        <button id="playAudio" disabled>Play Audio</button>
        
        
        <button id="stopAudio" disabled>Stop Audio</button>

<label for="volumeControl">Volume: </label>
        <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
    </div>

<script>
        // Create a variable to hold the AudioContext object
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Variable to hold the audio source node
        let audioSource;

// Variable to hold the audio buffer
        let audioBuffer;

// Variable for the GainNode (volume control)
        let gainNode = audioContext.createGain();

// Load and decode the audio file selected by the user
        function loadAudio(file) {
            // Log the file type for debugging
            console.log('File selected:', file);
            console.log('File type:', file.type);

// Check if the file type is audio/mpeg or audio/mp3
            if (file.type === 'audio/mpeg' || file.type === 'audio/mp3') {
                // Create a file reader to read the uploaded file
                const reader = new FileReader();
                
                // Event listener for when the file is read
                reader.onload = async function(event) {
                    const audioData = event.target.result; // Get the file data as ArrayBuffer

try {
                        // Decode the audio data and store it in audioBuffer
                        audioBuffer = await audioContext.decodeAudioData(audioData);
                        console.log("Audio file successfully loaded.");

// Enable the buttons once the audio is loaded
                        document.getElementById('playAudio').disabled = false;
                        document.getElementById('stopAudio').disabled = false;
                    } catch (error) {
                        console.error('Error decoding audio data:', error);
                    }
                };

// Read the uploaded file as an ArrayBuffer
                reader.readAsArrayBuffer(file);
            } else {
                // Show error message if the file is not a valid MP3
                console.error('Please select a valid MP3 file.');
                alert('Please select a valid MP3 file.');
            }
        }

// Function to play the audio
        function playAudio() {
            if (audioBuffer) {
                // Create a new AudioBufferSourceNode each time to allow replay
                audioSource = audioContext.createBufferSource();
                audioSource.buffer = audioBuffer; // Assign the decoded audio data

// Connect the source node to the gain node (for volume control)
                audioSource.connect(gainNode);

// Connect the gain node to the audio context's destination (speakers)
                gainNode.connect(audioContext.destination);

// Start playing the audio
                audioSource.start();
                console.log("Audio started playing.");
            } else {
                console.error('Audio buffer not loaded yet.');
            }
        }

// Function to stop the audio
        function stopAudio() {
            if (audioSource) {
                // Stop the audio source
                audioSource.stop();
                console.log("Audio stopped.");
            }
        }

// Function to adjust the volume based on the range slider
        function adjustVolume() {
            // Get the value from the volume control slider
            const volume = document.getElementById('volumeControl').value;
            // Set the gain node's gain value to the slider's value (volume control)
            gainNode.gain.value = volume;
        }

// Event listener for file input
        document.getElementById('audioFileInput').addEventListener('change', function(event) {
            // Load the selected file
            const file = event.target.files[0];

// Call loadAudio function
            loadAudio(file);
        });

// Add event listeners to buttons
        document.getElementById('playAudio').addEventListener('click', () => {
            // Resume the AudioContext if it is suspended
            if (audioContext.state === 'suspended') {
                audioContext.resume().then(() => {
                    playAudio(); // Play the audio
                });
            } else {
                playAudio(); // Play the audio
            }
        });

document.getElementById('stopAudio').addEventListener('click', stopAudio);

// Event listener for the volume control slider
        document.getElementById('volumeControl').addEventListener('input', adjustVolume);
    </script>
</body>
</html>

About THIS CODE (CANVASOR.NET):