How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."?

Question

How to handle “Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.” with Chrome 85? I'm trying to use autoplay (with a jquery plugin).

HTML code:

<audio loop id="scrollaudio" src="sound/stranger.mp3"></audio>

JavaScript code:

<script> $(function() { var first = new AudioFade('#scrollaudio', 100, 3300, 700).init();
document.querySelector('button').addEventListener('click', function() { { var context = new AudioContext(); // Setup all nodes ... });

How can i fix this in a way that the user interact with the page first? Thanks to all.

when do you call `.play`? – Daniel A. White Sep 06 '20 at 18:00 — Daniel A. White, Sep 06 '20 at 18:00

score -1 · Answer 1 · answered Sep 06 '20 at 18:02

-1

make a loading screen that the user has to click before going into the site, that way you now access to play audio as you please on the page. I did it that way here: https://www.tochibedford.com

answered Sep 06 '20 at 18:02

Tochi Bedford

354
1
9

thank you so much! can you help me with that? I'm so sorry but I'm really a n00b. :( can you show me the code? – Eduardo Morgado Sep 06 '20 at 18:07
hi, check this SO answer. it's pretty easy I promise. https://stackoverflow.com/a/25253988/9094171 - cheers – Tochi Bedford Sep 06 '20 at 18:10
i'm so sorry to annoy you again but in that case it don't have a button to make the user interact with the page. :( how can i do it? thank you so much. – Eduardo Morgado Sep 09 '20 at 12:34

How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."?

1 Answers1