4-Multi-Audio Playback and Volume Control System Using Web Audio API

Explore a professional-level implementation of a dynamic multi-audio playback system powered by the Web Audio API. This system allows users to upload multiple audio files, control individual track volumes in real-time with interactive sliders, and start or stop playback seamlessly. The application demonstrates key concepts such as audio decoding, gain control, and event-driven volume adjustments, making it a comprehensive example for developers seeking expertise in audio programming.

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

Web Audio API multi-audio playback audio control system gain node volume slider audio context JavaScript audio interactive audio player real-time volume control audio decoding event-driven programming front-end development professional audio application audio track management dynamic audio playback

youtube

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Audio Sources with Volume Control</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .audio-container {
            margin-bottom: 20px;
        }
        .audio-controls {
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h1>Play Multiple Audio Files with Volume Control</h1>

<!-- Audio Upload and Control Section -->
<div class="audio-container">
    <input type="file" id="audioFile1" accept="audio/*">
    <input type="file" id="audioFile2" accept="audio/*">
    <input type="file" id="audioFile3" accept="audio/*">
    <div class="audio-controls">
        <label for="volume1">Volume 1:</label>
        <input type="range" id="volume1" min="0" max="1" step="0.01" value="1">
        <label for="volume2">Volume 2:</label>
        <input type="range" id="volume2" min="0" max="1" step="0.01" value="1">
        <label for="volume3">Volume 3:</label>
        <input type="range" id="volume3" min="0" max="1" step="0.01" value="1">
    </div>
    <button onclick="startAudio()">Start Audio</button>
    <button onclick="stopAudio()">Stop Audio</button>
</div>

<script>
// Set up the Web Audio API context and audio nodes
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let audioSource1, audioSource2, audioSource3;
let audioBuffer1, audioBuffer2, audioBuffer3;
let audioGainNode1, audioGainNode2, audioGainNode3;

// Function to load and decode audio files
function loadAudioFile(fileInputId) {
    const fileInput = document.getElementById(fileInputId);
    return new Promise((resolve, reject) => {
        fileInput.addEventListener('change', async (event) => {
            const file = event.target.files[0];
            if (file) {
                try {
                    const arrayBuffer = await file.arrayBuffer();
                    const decodedData = await audioContext.decodeAudioData(arrayBuffer);
                    resolve(decodedData);
                } catch (error) {
                    reject(error);
                }
            }
        });
    });
}

// Load the audio files and store the buffers
async function loadAllAudio() {
    try {
        audioBuffer1 = await loadAudioFile('audioFile1');
        audioBuffer2 = await loadAudioFile('audioFile2');
        audioBuffer3 = await loadAudioFile('audioFile3');
    } catch (error) {
        console.error("Error loading audio files: ", error);
    }
}

// Call the function to load audio files
loadAllAudio();

// Function to play the audio files
function startAudio() {
    if (!audioBuffer1 || !audioBuffer2 || !audioBuffer3) {
        console.log("Audio files not loaded yet.");
        return;
    }

    // Set up audio sources and gain nodes
    audioSource1 = audioContext.createBufferSource();
    audioSource2 = audioContext.createBufferSource();
    audioSource3 = audioContext.createBufferSource();

    audioSource1.buffer = audioBuffer1;
    audioSource2.buffer = audioBuffer2;
    audioSource3.buffer = audioBuffer3;

    audioGainNode1 = audioContext.createGain();
    audioGainNode2 = audioContext.createGain();
    audioGainNode3 = audioContext.createGain();

    audioGainNode1.gain.value = document.getElementById('volume1').value;
    audioGainNode2.gain.value = document.getElementById('volume2').value;
    audioGainNode3.gain.value = document.getElementById('volume3').value;

    // Connect the sources to the gain nodes and then to the audio context's destination (speakers)
    audioSource1.connect(audioGainNode1);
    audioSource2.connect(audioGainNode2);
    audioSource3.connect(audioGainNode3);

    audioGainNode1.connect(audioContext.destination);
    audioGainNode2.connect(audioContext.destination);
    audioGainNode3.connect(audioContext.destination);

    // Start the audio playback
    audioSource1.start();
    audioSource2.start();
    audioSource3.start();
}

// Function to stop the audio
function stopAudio() {
    // Stop all audio sources if they are playing
    if (audioSource1) audioSource1.stop();
    if (audioSource2) audioSource2.stop();
    if (audioSource3) audioSource3.stop();
}

// Update volume based on slider changes
document.getElementById('volume1').addEventListener('input', function() {
    if (audioGainNode1) {
        audioGainNode1.gain.value = this.value;
    }
});
document.getElementById('volume2').addEventListener('input', function() {
    if (audioGainNode2) {
        audioGainNode2.gain.value = this.value;
    }
});
document.getElementById('volume3').addEventListener('input', function() {
    if (audioGainNode3) {
        audioGainNode3.gain.value = this.value;
    }
});
</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