title: Browser denying javascript play()
body: <p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play" rel="noreferrer"><code>HTMLMediaElement.play()</code></a>.</p>
  
  <pre><code>sounds.error.play();
  </code></pre>
  
  <p>This was working fine a while ago but now I get this error:</p>
  
  <blockquote>
    <p>&#x26a0; Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.</p>
  </blockquote>
  
  <p>Followed by:</p>
  
  <blockquote>
    <p>NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.</p>
  </blockquote>
  
  <p>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</p>
  
  <p>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.</p>
  
  <p><strong>What exactly are the requirements that will satisfy most modern browsers so that they will allow playing of audio?</strong></p>
  
  <p>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.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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:</p>
  
  <p><a href="http://so.dev.zuma-design.com/input-sounds.html" rel="noreferrer">http://so.dev.zuma-design.com/input-sounds.html</a></p>