Workaround on google's autoplay restriction

Question

I understand that google restricted the autoplay of video and audio features on google chrome and requires user interaction before playing audio.
However, my app needs to play audio when I hover an image.

I've tried creating an invisible button and mimic a click event on my @mousehover event.

I did it like this:

<audio id="myaudio" muted="true" style="display:none">
    <source src="some_audio_source" type="audio/*" /> <!--  -->
</audio>

<button id="fake-btn" style="display: hidden"></button>

<div @mousehover="playAud('myaudio')>
   <img src="some_iamge_source> 
</div>

playAud(audid) {
    document.getElementById('fake-btn').click();
    const curAud = document.getElementById(audid);
    curAud.play();
}

However, the error Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first still persists.

Is there any workaround on these restrictions?