How to reset / clear audio element. Tried clearing src and removing the audio element altogether and it still plays

Question

I am having a problem resetting / clearing the audio from an audio element, in another similar question someone suggested removing the src, this however does not seem to make any differance, in that the last loaded url is still playable.

I have had half success, if i clear the html for the player and re-write it the native player does reset and you can no longer play the audio, however you can still play it with a custom play button and the readyState remains at 4?

This is the same also if i just remove the html for the player (and dont rewrite it) you can still play the audio with the custom play button.

This is all demonstrated in the demo code, so my question is how can i reset/clear the data so the custom play button no longer works?

var player = document.getElementById("audioPlayer");

function loadPlayerSRC() {
  player.setAttribute(
    "src",
    "https://jalinburton.com/portfolio/Chocolate-Pen.mp3"
  );
  updateKnownInfo();
}

function removePlayerSRC() {
  player.removeAttribute("src");
  updateKnownInfo();
}

function replacePlayerHTML() {
  document.getElementById("audioPlayerContainer").innerHTML = "";
  document.getElementById("audioPlayerContainer").innerHTML =
    "<audio controls id='audioPlayer'></audio>";
  updateKnownInfo();
}

function updateKnownInfo() {
  document.getElementById("readyState").innerText = player.readyState;
  document.getElementById("src").innerText = player.getAttribute("src");
}

updateKnownInfo();

player.addEventListener("loadeddata", (event) => {
  updateKnownInfo();
});

function playAudio() {
  player.play();
  updateKnownInfo();
}

function pauseAudio() {
  player.pause();
  updateKnownInfo();
}

<div id="audioPlayerContainer">
  <audio controls id='audioPlayer'></audio>
</div><button onclick="playAudio();">Play</button><button onclick="pauseAudio();">Pause</button>
<hr />
Steps: <br />
1) <button onclick="loadPlayerSRC();">Load src into player</button> <br />
2) Attempt to reset audio elm simply removing src <button onclick="removePlayerSRC();">Remove scr</button> <br />
2a) Note: the src has cleared but you can still play the audio with both native and custom controls! <br />
3) Attempt to reset audio by removing and re-adding the HTML <button onclick="replacePlayerHTML();">Clear player container HTML and re-add</button> <br />
3a) Note: You can STILL play the audio using the custom controls but now can't play it using the native controls and the ready state is still 4!
<hr />
Current Player Info: <br />
Readystate = <span id="readyState"></span> <br />
src = <span id="src"></span>

Answer 1

To resolve this issue I have had to use both player.src = ""; and player.removeAttribute('src');

player.src = ""; stops it from being played but gives an error in firefox

using player.src = ""; followed by player.removeAttribute('src'); both stops it being played and also gives no errors.