I want an audio file (mp3) to play when the user hovers over an image.

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?

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.

So my question is, is there a workaround for this or do I need to execute the script in a different way?

var test = document.getElementById("test");
test.addEventListener("mouseover", function( event ) {   
  var audio = document.getElementById("audio");
  audio.play();
}, false);
          

<img src="https://www.fillmurray.com/600/400" id="test" />
          
<audio id="audio" preload="auto" src="https://file-examples.com/storage/fe26085c7f62d2ca79a7a30/2017/11/file_example_MP3_700KB.mp3"></audio>