google-chrome - 悬停2018 2019可以在Chrome/Safari中自动播放声音吗？

Question

我想知道是否有任何方法可以克服Google的新自动播放政策。

当链接悬停时，我想播放一个简短的声音片段，不幸的是，该片段仅适用于Firefox，而不再适用于Chrome和Safari。
有什么办法可以解决该问题？

我想大概不是，只是想将这个问题解决给该 Realm 中受过高等教育的人们。也许有人有一个主意。 :)

多数民众赞成在Firefox中可以使用该代码，并且在chrome和safari中也可以使用-但现在不行了。

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

您的问题很简短，但实际上有很多话要说。

首先，在进行政策更改时，最好使用VanillaJS™代替jQuery，因为标准会立即传播到普通JavaScript，而更改需要一段时间才能传播到jQuery之类的第三方库。使用普通JavaScript的好处是，您可以使用new Audio(<source>)创建一个音频对象-不需要任何HTML元素!参见以下示例:

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>

大!正如您所精确指出的那样，悬停时自动播放可能会被the 2017 update on autoplay in Chrome阻止。

但这不一定是一件坏事。进行此更新是为了使Web用户体验更好。如果您试图找到有关如何绕过它的技巧，那是错的;)更新指出，如果用户进行了交互(例如单击)，则允许自动播放声音。因此，在设计网站时，确保在自动播放出现之前用户单击页面上的某处。这是一个两步单击授权的示例，将鼠标悬停以播放用户体验:

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>