Question

我在网站上添加了背景音乐，最初的计划是音乐会自动开始。我还在页面上添加了一个静音按钮，因为有些人可能会觉得烦。

我使用了很棒的字体来制作静音按钮。

使用静音按钮，一切都可以正常工作，但是Google Chrome中存在一个问题，如果您不与网站互动，它将无法自动播放音乐。

我尝试放置iframe，然后链接音乐，但我想您实际上不能在JavaScript或jQuery中使iframe静音吗？

有人可以帮我吗？谢谢

<audio id="audio" autoplay hidden loop>
  <source src="music/backgroundMusic.mp3" type="audio/mp3">
</audio>
<i class="fas" id="mute"></i>

$("#mute").toggleClass("fa-volume-up");

$("#mute").click(function() {
    var bool = $("#audio").prop("muted");
    $("#audio").prop("muted",!bool);
    $("#mute").toggleClass("fa-volume-up");
    $("#mute").toggleClass("fa-volume-mute");
});

Answer 1

无法更改。浏览器介绍说，因为人们可以在未经用户同意的情况下自动播放声音。话虽这么说，但有选择。

可能的解决方法，这就是我们在我从事的一个项目中使用的方法，是将播放选项附加到一些第一个动作上。可能是这样的：

document.body.addEventListener('click', () => {
    // here "autoplay" starts
}, { once: true });

感谢once，它将在首次运行后退订。在我们的项目中，我们在其他事件上使用了click事件（例如在播放之前需要关闭欢迎消息），也许您可以使用它。

因此，总而言之，您将需要以某种更智能的方式隐藏操作。

once选项文档可在此处找到：EventTarget.addEventListener()

自动播放背景音乐不起作用。还包括静音按钮

1 个答案: