I have a error which is

Error showing is :
Uncaught DOMException: play() failed because the user didn't interact with the document first.

The error does not prevent function to run but it should not be shown as some of the question in SO , Chrome , Mozilla documentation states that audio or video which are muted are not blocked from playing.

So there must be something I am doing wrong . Can you tell that or any way to remove the error.

I have muted the audio at first hand then why it is still showing up . As function is running every second so error is also showing up every second .

The error stop showing up when I click the start btn which plays the audio .

Is there any way to remove this error :

var start = document.getElementById("triggerSnd")
var audioElement = document.getElementById('audiotag1')
var demo = document.getElementById('demo')
var interval, isMuted = true

clockRunner();
clock();
setInterval(() => clock(), 1000)

start.addEventListener('click', clockRunner)

function clockRunner() {
  audioElement.muted = isMuted
  start.innerText = isMuted ? "Start" : "Stop"
  isMuted = !isMuted
}

function clock(isMuted) {
  //Clock code goes here , here only used a simple timer
  demo.innerText = new Date();
  audioElement.play();
}

<audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata"></audio>
<button id="triggerSnd">Start</button>
<div id="demo"></div>

It is not showing up in above snippet but can seen in console of VS code(Using it, so can tell about it) every second

Thanks for help in advance