Browser denying javascript play()

Question

I have a page with an input field for scanning products. When a barcode is scanned or a SKU is typed into the field, an ajax request is made and the application plays either a success or an error sound depending on the response using HTMLMediaElement.play().

sounds.error.play(); 

This was working fine a while ago but now I get this error:

⚠ Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.

Followed by:

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Since this page only exists for the purpose of scanning SKUs, when the page loads, that input field is programmatically focused so as to make things easier on the end user. I tried removing this focus so that the user must click into the input field, but that doesn't appear to satisfy whatever the requirements are to allow playing of audio

After a bit more experimenting I found that with some additional amount of user interaction, the sound will play. For instance if I create a checkbox to "enable" the sound and the user clicks it, that appears to be enough. Or if the user clicks outside of the input element and then back into to it again that also works.

What exactly are the requirements that will satisfy most modern browsers so that they will allow playing of audio?

I realize the answer may be different for different browsers and configurations, but I was unable to find anything authoritative for current versions of either Firefox or Chrome. I'm looking for a workaround so that the application does not need to be complicated with extra clicks or other kinds of interactions, and since I am now aware of this new policy, I'd like the revisions to be as unobtrusive as possible.

UPDATE:

Here is a basic example I worked up to demonstrate the issue. I tried three different browsers just now and they all behaved a bit differently. Firefox in particular behaves as described above — does not play the sound until I focus on the input field, blur, then click to focus again:

http://so.dev.zuma-design.com/input-sounds.html

Answer 1

There is some permission blocking in all modern browser (especially chrome) when comes down to autoplaying multimedia.

Here is the Autoplay availability's section from MDN which shows when the media will be allowed to execute automatically:

• The audio is muted or its volume is set to 0;
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.

---

This here is a similar solution for what you want with arrayBuffer using AJAX

here is a DEMO