title: Audio file won't play when hovering over image - until a click event takes place on page
body: <p>I want an audio file (mp3) to play when the user hovers over an image.</p>
  <p>The included code won't play the mp3 on hover, until you click somewhere on the page. Then hovering over the image will work. I imagine this is something to do with how browsers handle audio files rather than the code?</p>
  <p>This is for a bit of fun and an easter egg on a 404 page. So less bothered about accessibility here as it's ok in this context.</p>
  <p>So my question is, is there a workaround for this or do I need to execute the script in a different way?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var test = document.getElementById("test");
  test.addEventListener("mouseover", function( event ) {   
    var audio = document.getElementById("audio");
    audio.play();
  }, false);
            </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://www.fillmurray.com/600/400" id="test" /&gt;
            
  &lt;audio id="audio" preload="auto" src="https://file-examples.com/storage/fe26085c7f62d2ca79a7a30/2017/11/file_example_MP3_700KB.mp3"&gt;&lt;/audio&gt;
              
         </code></pre>
  </div>
  </div>
  </p>