Autoplay Sound in Chrome / Safari on hover 2018 2019? - google-chrome

Question

I am wondering whether there is any way to overcome the new autoplay policy by Google.
I want to play a short sound snippet when a link is hovered, which unfortunately just works in Firefox and not in Chrome and Safari anymore.
Is there any way to find a work around for that problem?
Probably not I guess, just thought to address this question to more educated people in that field. Maybe someone has an idea.
That's the Code which works in Firefox and used to work in Chrome and Safari as well - but not anymore.
html
<span class="hit hitme">Just hit me up!</span>
<audio id="HitMe">
<source src="sound/hitmeup.mp3">
</audio>
jQuery
var audio = $("#HitMe")[0];
$(".hitme").mouseenter(function() {
audio.play()
$(".hitme").mouseleave(function() {
audio.pause();
});
});

Answer 1

Your question is short but there are actually many things to be said.
First off, it's always nice to use VanillaJS™ instead of jQuery when it comes to policy changes, because standards get immediatly propagated to plain JavaScript, whereas it takes a while for the change to propagate up to third-party libs like jQuery. The nice thing with plain JavaScript is that you can create an audio object with new Audio(<source>) - no need for any HTML element! See below for an example:
const audio = new Audio("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3");
// wait for the DOM to load
window.onload = () => {
// play audio on click
const clickToPlay = document.querySelector('#click-to-play');
clickToPlay.onclick = () => audio.play();
// play/pause audio on hover
const hoverToPlay = document.querySelector('#hover-to-play');
hoverToPlay.onmouseover = () => audio.play();
hoverToPlay.onmouseout = () => audio.pause();
}
/* just some styling, not useful for the solution */
#click-to-play {
padding: 1em;
background-color: steelblue;
}
#click-to-play:hover {
cursor: pointer;
}
#hover-to-play {
padding: 1em;
background-color: lightblue;
}
#hover-to-play:hover {
cursor: crosshair;
}
<div id="click-to-play">
Click to play
</div>
<div id="hover-to-play">
Hover in to play, hover out to pause
</div>
Great! Except, as you precised, the autoplay on hover that might be blocked by the 2017 update on autoplay in Chrome.
But it's not necessarily a bad thing. This update was made to make the web user experience better. If you're trying to find hacks on how to bypass it, you're doing it wrong ;) The update states that autoplay with sound is allowed if the user has interacted (eg with a click). Therefore, when designing your website, make sure the user clicks somewhere on your page before the autoplay appears. Here's an example with a two-steps click to authorize, hover to play user experience:
const audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
window.onload = () => {
const clickToAuthorize = document.querySelector('#click-to-authorize');
const hoverToPlay = document.querySelector('#hover-to-play');
clickToAuthorize.onclick = () => {
hoverToPlay.style.display = 'block';
}
hoverToPlay.onmouseover = () => audio.play();
hoverToPlay.onmouseout = () => audio.pause();
}
#click-to-authorize {
padding: 1em;
background-color: steelblue;
}
#click-to-authorize:hover {
cursor: pointer;
}
#hover-to-play {
padding: 1em;
background-color: lightblue;
display: none;
}
#hover-to-play:hover {
cursor: crosshair;
}
<div id="click-to-authorize">
Click if you want to hear a T-Rex roar!
</div>
<div id="hover-to-play">
Hover to play/pause
</div>