How to Abort/destroy HTML5 audio stream from previous stream after new button is clicked?

If you are watching tv, you change the channel, then you go back to the pervious channel, you aren't watching it from the beginning.

Is that more understandable to what I am trying to do?

Where the stream stops downloading in the background.

Goes back to as if the button was never clicked.

That is what I am trying to do in the code.

const buttons = document.querySelectorAll('.playButton');
const audios = document.querySelectorAll('audio');

buttons.forEach((button, index) => {
  button.addEventListener('click', () => {
    audios.forEach((audio, audioIndex) => {
      if (index === audioIndex) {
        if (audio.paused) {
          audio.play();
        } else {
          audio.pause();
        }
      } else {
        audio.pause();
      }
    });
  });
});

How would this be done?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const buttons = document.querySelectorAll('.playButton');
const audios = document.querySelectorAll('audio');

buttons.forEach((button, index) => {
  button.addEventListener('click', () => {
    audios.forEach((audio, audioIndex) => {
      if (index === audioIndex) {
        if (audio.paused) {
          audio.play();
        } else {
          audio.pause();
        }
      } else {
        audio.pause();
      }
    });
  });
});

<!-- language: lang-css -->

html,
body {
  height: 100%;
  background: url("https://i.imgur.com/TSD1Xp1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
}

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  max-width: 800px;
  gap: 18px;
  animation: fadeInButtons 3s ease-in 0s forwards;
}

.buttonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  max-width: 600px;
  gap: 18px;
  animation: fadeInButtons 3s ease-in 0s forwards;
}


audio {
  width: 200px;
}

<!-- language: lang-html -->

<div class="playButtonContainer ">
  <audio title="Praise 95" preload="none">
    <source src="https://18093.live.streamtheworld.com/SP_R3935365_SC" type="audio/mpeg" />
  </audio>
  <audio title="Relax Club Music" preload="none">
    <source src="https://getradio.me/rcm" type="audio/mpeg" />
  </audio>
  <audio title="Sound Park #Deep" preload="none">
    <source src="https://getradio.me/spdeep" type="audio/mpeg" />
  </audio>

  <div class="buttonContainer">
    <button class="playButton">Praise 95</button>
    <button class="playButton">Relax Club Music</button>
    <button class="playButton">Sound Park #Deep</button>

  </div>
</div>

<!-- end snippet -->

I was able to figure it out.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const buttons = document.querySelectorAll('.playButton');
const audios = document.querySelectorAll('audio');
buttons.forEach((button, buttonIndex) => {
button.addEventListener('click', () => {
buttons.forEach((button) => button.classList.remove('blue'));
audios.forEach((audio, audioIndex) => {
audio.src = ""
if (buttonIndex === audioIndex) {
button.classList.add('blue')
audio.src = button.dataset.src;
audio.play();
}
});
});
});

<!-- language: lang-css -->

html,
body {
height: 100%;
background: url("https://i.imgur.com/TSD1Xp1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
padding: 0;
margin: 0;
}
body {
display: flex;
}
.playButtonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
max-width: 800px;
gap: 18px;
animation: fadeInButtons 3s ease-in 0s forwards;
}
.buttonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
max-width: 600px;
gap: 18px;
}
.playButton{
cursor: pointer;
}
.playButton.blue {
background-color: cornflowerblue;
border: 2px solid purple;
}
audio {
width: 200px;
}

<!-- language: lang-html -->

<div class="playButtonContainer ">
<audio title="Praise 95" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Relax Club Music" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Sound Park #Deep" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Sound Park Classic" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Delish Deep" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Music Factory Radio" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="CBOE FM" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="M.Deep Radio" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Fly 104" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Luxury Music" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Rock Melodic Radio" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Nu Euphoria" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="Cavo Paradiso Club" preload="none">
<source type="audio/mpeg" />
</audio>
<audio title="90s Eurodance" preload="none">
<source type="audio/mpeg" />
</audio>
<div class="buttonContainer">
<button class="playButton" data-src="https://18093.live.streamtheworld.com/SP_R3935365_SC">Praise 95</button>
<button class="playButton" data-src="https://getradio.me/rcm">Relax Club Music</button>
<button class="playButton" data-src="https://getradio.me/spdeep">Sound Park #Deep</button>
<button class="playButton" data-src="https://getradio.me/spclassic">Sound Park Classic</button>
<button class="playButton" data-src="https://getradio.me/delishdeep">Delish Deep</button>
<button class="playButton" data-src="https://i4.streams.ovh/sc/musicfactory/stream">Music Factory Radio</button>
<button class="playButton" data-src="https://getradio.me/svoefm">CBOE FM</button>
<button class="playButton" data-src="https://deephousex.ru/live">M.Deep Radio</button>
<button class="playButton" data-src="https://imagine2.radioca.st/;">Fly 104</button>
<button class="playButton" data-src="https://getradio.me/luxurious.music">Luxury Music</button>
<button class="playButton" data-src="https://i4.streams.ovh:2200/ssl/rockmelo?mp=/stream">Rock Melodic Radio</button>
<button class="playButton" data-src="https://radio.nueuphoria.com:8443/live">Nu Euphoria</button>
<button class="playButton" data-src="https://neos.win:48488/1">Cavo Paradiso Club</button>
<button class="playButton" data-src="https://myradio24.org/5967">90s Eurodance</button>
</div>
</div>

<!-- end snippet -->