2-Web Audio API - Upload and Play MP3 with Volume Control

Learn how to use the Web Audio API to upload, play, and control the volume of an MP3 file directly in the browser. This guide demonstrates how to create an interactive audio player with file upload, play, stop, and volume control features using JavaScript and the Web Audio API.

1-10-web audio api-web api-orbisounds voice lab

Web Audio API MP3 upload audio player volume control JavaScript audio audio context gain node file input audio control browser audio player web development tutorial interactive audio player MP3 file play MP3 stop audio adjust volume

video

<!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>
    <!-- Container for the audio controls -->
    <div>
        <h1>Web Audio API - Upload and Play MP3</h1>
        
        <!-- File input for selecting an MP3 file -->
        <input type="file" id="audioFileInput" accept="audio/*">
        
        <!-- Button to play the selected audio -->
        <button id="playAudio" disabled>Play Audio</button>
        
        <!-- Button to stop the audio -->
        <button id="stopAudio" disabled>Stop Audio</button>

        <!-- Range slider for volume control -->
        <label for="volumeControl">Volume: </label>
        <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
    </div>

    <!-- JavaScript for handling the Web Audio API -->
    <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>

CODE SIMULATION

kod

Facebook | Twitter | Linkedin | Whatsapp

index 1-10-web audio api ses oynatma: ba web audio api i frekans ayarı: birden fazla se dinamik ses kay