Play and stop audio on :hover issue

Question

I'm creating an e-commerce website, and I've encountered a problem that I can't solve.

I have 3 boxes on one of the pages where there's a photo in each box, and when you hover over it, the photo disappears and a video appears.

The issue is that I can't make the sound play when the video is shown, and stop it when I move away from the box with the mouse. This is because if I don't apply the 'muted' property in the video tag, it doesn't work in some browsers.

I've added the audio separately, and sometimes it works, but not always.

I'm still a newbie, so your help would be great to keep learning and be able to solve this. I'm using HTML, CSS, and JavaScript (GSAP). Thanks a lot in advance!

<div id="page2-elements">
  <div class="box" onmouseover="playMedia(this)" onmouseout="pauseMedia(this)">
    <a href="/shop" data-scroll data-scroll-speed="-2"></a>
    <img src="./assets/box1_img.png" alt="" />
    <video muted loop src="./assets/box1.mp4"></video>
    <audio>
      <source src="./assets/box1.mp3" type="audio" />
    </audio>
  </div>
</div>

function playMedia(element) {
  var video = element.querySelector("video");
  var audio = element.querySelector("audio");
  if (video) {
    video.play();
  }
  if (audio) {
    audio.play();
  }
}

function pauseMedia(element) {
  var video = element.querySelector("video");
  var audio = element.querySelector("audio");
  if (video) {
    video.pause();
  }
  if (audio) {
    audio.pause();
  }
}