I'm working on a small web application that plays my favourite radio live streams. Now there's an issue when the stream gets interrupted by a call or different media: it disappears. I would expect the audio to automatically resume after the event ends (e.g. end of call), however this is not the case. I have searched through the forums but nothing seems to compare/work. I have tried a boolean to determine the playing state, but this just messes up whenever I manually hit the stop button. Here's my code so far:

const radioList = [
    {
        "radioName": "Ibiza Live",
        "radioStream": "https://streams.radio.co/sdc9cfaf77/listen",
        "imgUrl": "../img/ibizalive.png"
    },
];

const radioContainer = document.querySelector('.stationsContainer');

// Render markup
const radioMarkup = (img, name, audio) => {
    const html = `
        <div class="station">
            <img src="${img}" alt="${name}" data-id="station">
            <div class="live">
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <audio src="${audio}"></audio>
        </div>
    `
    radioContainer.innerHTML += html;
}

radioList.forEach(i => {
    radioMarkup(i.imgUrl, i.radioName, i.radioStream);
})

// Play radio
const audio = document.querySelectorAll("audio");
const stationList = document.querySelectorAll(".stationsContainer .station");

stationList.forEach((station, i) => {
    station.addEventListener('click', () => {
        stopAllAudio();
        audio[i].load();
        audio[i].play();
    })
})

How can I make the audio resume after an event?