Chrome Mobile audio NotAllowedError after interaction

6 days ago 14
ARTICLE AD BOX

I have the code in my app which is intended to ensure that the audio is only played when allowed by browser. However in Android Chrome running in local network every second page reload leads to the NotAllowedError inside touch start handler:

Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.

I need to start my audio reliably after user interaction. Could someone help me with this? The following is the minimal reprodicible example.

<body> <script language='javascript'> let audio = new Audio('assets/intro/intro.mp3'); audio.play().catch (e => { let tapHandler = () => { audio.play(); // <<===================== NotAllowedError HERE! } document.addEventListener('touchstart', tapHandler, {'once': true}); }); </script> </body>
Read Entire Article