CODEWITHSUNDEEP
ioshtmlaudiohtml5-audioweb-audio-api
maracuja-juice
maracuja-juice

Reputation: 1042

Play multiple Audio files on Safari at once

I want to play multiple Audio files simultaneously on iOS .

On the click of a button I create multiple instance of an Audio file and put them into an array.

let audio = new Audio('path.wav')
audio.play().then(() => {
   audio.pause();
   possibleAudiosToPlay.push(audio);
});

After a while I play them all:

possibleAudiosToPlay.forEach(el => {
    el.currentTime = 0;
    el.play();
});

While this plays all audio files: When a new one begins it stops the old one. (on iOS)

Apples developer guide says this isn't possible at all with HTML5 Audio:

Playing multiple simultaneous audio streams is also not supported.

But can this be achieved with the Web Audio API? There isn't anything written about it in Apples developer guide.

Upvotes: 0

Views: 2655

Answers (1)

revy
revy

Reputation: 4707

Yes you can with Web Audio API. You have to create an AudioBufferSourceNode for each one of your audio sources, since each source can be played only once (you can't stop it and play it again).

const AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();
const audioPaths = [
    "path/to/audio_file1.wav",
    "path/to/audio_file2.wav",
    "path/to/audio_file3.wav"
];
let promises = [];


// utility function to load an audio file and resolve it as a decoded audio buffer
function getBuffer(url, audioCtx) {
    return new Promise((resolve, reject) => {
        if (!url) {
            reject("Missing url!");
            return;
        }

        if (!audioCtx) {
            reject("Missing audio context!");
            return;
        }

        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";

        xhr.onload = function() {
            let arrayBuffer = xhr.response;
            audioCtx.decodeAudioData(arrayBuffer, decodedBuffer => {
                resolve(decodedBuffer);
            });
        };

        xhr.onerror = function() {
            reject("An error occurred.");
        };

        xhr.send();
    });
}


audioPaths.forEach(p => {
    promises.push(getBuffer(p, ctx));
});


// Once all your sounds are loaded, create an AudioBufferSource for each one and start sound
Promise.all(promises).then(buffers => {
    buffers.forEach(b => {
        let source = ctx.createBufferSource();
        source.buffer = b;
        source.connect(ctx.destination);
        source.start();
    })
});

Upvotes: 2

Related Questions