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

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

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

About THIS CODE (CANVASOR.NET):