Question

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

当链接悬停时，我想播放一个简短的声音片段，不幸的是，它仅适用于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阻止。

但这不一定是一件坏事。进行此更新是为了使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>

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

1 个答案: