When I pause an Audio and set it’s currentTime, it does something weird. when I press a button that controls the .paused state of the Audio, it seems to click again automatically, preventing the audio from playing. Why?
Additionally, if I set the currentTime again, it decides to stop clicking the play button twice. this happens on and off every time I set the currentTime. it can be demonstrated with this code. (slowed audio is only because the example audio is too short).
<!doctype html><html><body>
<button id="play" disabled>play</button>
<button id="idk">load audio</button>
<script>
idk = document.getElementById("idk");
idk.addEventListener("click", async ()=>{
aud = new Audio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3")
aud.addEventListener('canplaythrough', init);
}, {once: true});
function init(){
/**/aud.playbackRate = 0.25;//only to lengthen the audio to give you time.
playButton = document.getElementById("play");
playButton.disabled = false;
idk.innerText = "pause and set time to 1";
playButton.addEventListener("click", e=>{
if(aud.paused){
aud.play();
playButton.innerText = "pause";
}else{
aud.pause();
playButton.innerText = "play";
}
console.log(e, aud.paused);
});
idk.addEventListener("click", e=>{
console.log(e);
if(!aud.paused){ aud.pause(); playButton.innerText = "play"; }
aud.currentTime = 1;
});
}
</script>
</body></html>
simply click load audio, then click play once permitted, and finally click on pause and set time to 1.
after such, the click event will be fired twice per actual click (as seen in the log), preventing the audio from playing. the only way to fix it is to click pause and set time to 1 again, and attempt clicking play. You will be successful, but if you click the right button again, you will face this issue again.
I also noticed that the double-clicking turns into quadruple-clicking when modified slightly, still causing the issue, as 4 clicks is an even number.
<!doctype html><html><body>
<button id="play">play</button>
<script>
playButton = document.getElementById("play");
playButton.addEventListener("click", async ()=>{
/**/window.aud = new Audio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3");
aud.addEventListener('canplaythrough', ()=>{
playButton.style.color = "#080";
/**/aud.playbackRate = 0.25;//only to lengthen the audio to give you time.
playButton.addEventListener("click", e=>{
if(e.ctrlKey){
if(!aud.paused){ aud.pause(); playButton.innerText = "play"; }
aud.currentTime = 1;
return;
}
if(aud.paused){
aud.play();
playButton.innerText = "pause";
}else{
aud.pause();
playButton.innerText = "play";
}
console.log(e, aud.paused);
});
});
}, {once: true});
</script>
</body></html>
to use the second example, use CTRL+Click as the pause and set time to 1 button.
in both examples, running aud.play(); in the console seems to work, but still doesn’t allow the play/pause button to act and double clicks them. Setting aud.currentTime in the console (after it has been set an even number of times) has no effect, and neither does having the code set aud.currentTime twice in succession. The user has to click it and then click it again.
This occurs on Chrome Beta 127.0.6533.94 on ChromeOS, as well as Chrome 127.0.6533.85 and Firefox 129.0 on Android 14. Sorry in advance, if that’s insufficient testing, or I made a really obvious mistake.