How to play a sound when the cursor hovers over an image?

Question

I'm on Twine using Harlowe 3.3.5. I have an image:

<img src="coffee.png" id="coffee">

And I have a sound that I would like to play when the mouse hovers over the image. This is the JavaScript code:

document.addEventListener('DOMContentLoaded', function() {
  var picture = document.getElementById('coffee');

  var audio = new Audio();
  audio.src = 'coffee.mp3';
  audio.preload = 'auto';

  picture.addEventListener('mouseover', function() {
    audio.play();
  });
});

I tried both mouseover and mouseenter, but no sound comes out.

Any ideas as to why this doesn't work? How else could I get the same result?