I have an array of imported audio files, and I'm trying to play them sequentially with the Web Audio API. I have some code which almost works, but it plays the sounds in the wrong order, seemingly randomly.

Can someone tell me what I'm doing wrong, or if there's a better way to achieve my goal?

import soundA from './assets/soundA.mp3'
import soundB from './assets/soundB.mp3'
import soundC from './assets/soundC.mp3'

function playSoundsSequentially() {

    let mySounds = [soundA, soundB, soundC]

    const ctx = new window.AudioContext();
    let time = 0;
    mySounds.forEach(sound => fetch(sound).then(response => response.arrayBuffer())
                                        .then(buffer => ctx.decodeAudioData(buffer))
                                        .then(buffer => {
        let track = ctx.createBufferSource();
        track.buffer = buffer;
        track.connect(ctx.destination);
        track.start(ctx.currentTime + time);
        time += track.buffer.duration;
    }));
}

Update: My solution based on JMP's insight on using promises. I also ditched the forEach for a simple for loop because I am more comfortable with that.

import soundA from './assets/soundA.mp3'
import soundB from './assets/soundB.mp3'
import soundC from './assets/soundC.mp3'

function playSoundsSequentially() {

    let mySounds = [soundA, soundB, soundC]

    let promises = []
    for(let i = 0; i < mySounds.length; ++i) {
        promises.push(fetch(mySounds[i]).then(response => response.arrayBuffer())
                                        .then(buffer => ctx.decodeAudioData(buffer)));
    }

    Promise.all(promises).then(buffer => {
        for(let i = 0; i < buffer.length; ++i) {
            let track = ctx.createBufferSource();
            track.buffer = buffer[i];
            track.connect(ctx.destination);
            track.start(ctx.currentTime + time);
            time += track.buffer.duration;
        }
    });
}