Браузер блокирует воспроизведение аудио при наведении

Нужно сделать что бы при наведении на блоки воспроизводилось аудио дорожка, но именно при наведение брауйзер думает что это автовоспроизведение и блокирует.

Вот как я хочу запустить воспроизведение, при наведение на блоки, я нахожу аудио и включаю воспроизведение.

$('.content__inner').on('mouseenter', function (e) {
    var audio = $(this).find('audio');
    audio[0].play();
});

$('.main').on('mouseout', '.content__inner', function () {
    var audio = $(this).find('audio');
    audio[0].pause();
});

Как мне решить эту проблему?

Ссылка


Ответы (1 шт):

Автор решения: Олег

Это можно решить с помощью динамического тега iframe:

<div id=mydiv></div>
<button onmouseenter="start()" onmouseout="stop()"> наводим курсор на меня </button>
<script>
function start(){
    mydiv.innerHTML = "<iframe src='https://synthesizer.000webhostapp.com/synthesizer/sud.mp3' allow='autoplay' style='display: none'></iframe>";
}
function stop(){
    mydiv.innerHTML = "";
}
</script>

→ Ссылка