there is such a system, the server sends an audio file to the client, and the client plays it, but while the audio file is being played, the server can send another audio file, then the audio is adjusted to each other and a porridge is obtained

const audioQueue = [];
let isPlaying = false;


// WebSocket message Handler
socket.onmessage = async function(event) {
    const blob = new Blob([event.data], { type: 'audio/wav' });
    const audioURL = URL.createObjectURL(blob);

    // Adding new audio to the queue
    audioQueue.push(audioURL);

    // If nothing is playing, start playback
    if (!isPlaying) {
        playNextAudio();
    }
};

// Function to play the next audio in the queue
async function playNextAudio() {
    if (audioQueue.length === 0) {
        isPlaying = false;
        return;
    }

    isPlaying = true;
    const audioURL = audioQueue.shift();
    await playAudio(audioURL);
    playNextAudio();
}

// Function for audio playback
async function playAudio(audioURL) {
    try {
        const audio = new Audio();
        audio.src = audioURL;
        await audio.play();
        await new Promise(resolve => audio.onended = resolve);// Waiting for the end of playback
    } catch (error) {
        console.error("Error playing audio:", error);
    }
}

as you can see from the code, I tried to implement the problem of creating a queue of audio files, but then the audio file that the server sends the audio file to the second simply does not play.Please help me