Chrome / Safari 悬停时自动播放声音 2018 2019？

Question

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

我想在悬停 link 时播放一个简短的声音片段，不幸的是，这只适用于 firefox 而不是 chrome 和 safari。有没有办法找到解决该问题的方法？

我想可能不是，只是想向该领域受过更多教育的人解决这个问题。也许有人有想法。 :)

这就是在 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.

阻止

但这不一定是坏事。进行此更新是为了改善网络用户体验。如果您试图找到绕过它的技巧，那您就错了；) 更新说明 如果用户进行了交互（例如单击），则允许使用声音自动播放.因此，在设计您的网站时，确保用户在自动播放出现之前点击了您网页上的某处。这是一个包含两步的示例点击授权，悬停播放用户体验：

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>

Chrome / Safari 悬停时自动播放声音 2018 2019？

Autoplay Sound in Chrome / Safari on hover 2018 2019?

safari

audio

policy

google-chrome

autoplay