谷歌浏览器禁止自动播放声音

由于谷歌浏览器自动禁止播放声音，所以使用audio或video标签时，点击左上角刷新后，由于和页面没有任何交互，页面无法自动播放声音，我们的需求是进入页面后点击了左上角的刷新后页面也可以播放声音，看了下腾讯视频等等网站，他们都可以做到，有人知道他们怎么做的吗，有没有什么解决办法

img

【以下回答由 GPT 生成】

这个问题是由于谷歌浏览器禁止自动播放声音所导致的，这是浏览器的默认行为，为了防止网页滥用自动播放声音。所以无法直接通过代码控制解决这个问题。

有几种解决方案可以尝试来绕过这个限制：

  1. 用户主动触发播放：可以给用户提供一个按钮，当用户主动点击按钮时，触发声音的播放。

代码示例：

<template>
  <div>
    <button @click="playAudio">点击播放声音</button>
    <audio ref="audio" src="path/to/audio.mp3"></audio>
  </div>
</template>

<script>
export default {
  methods: {
    playAudio() {
      this.$refs.audio.play();
    },
  },
};
</script>
  1. 使用微信等第三方唤起播放：可以通过微信等第三方应用来唤起声音的播放，在用户点击之后利用该应用的特性，实现声音的自动播放。

代码示例：

<template>
  <div>
    <button @click="openWeChat">使用微信播放声音</button>
    <!-- audio 标签同上 -->
  </div>
</template>

<script>
export default {
  methods: {
    openWeChat() {
      // 唤起微信等第三方应用
      window.open("weixin://");
    },
  },
};
</script>

请注意：这些方法只是绕过浏览器限制的一种方式，它不适用于所有浏览器和设备。而且浏览器提供商可能随时更改他们的策略来限制自动播放声音。因此，具体解决方案可能会因浏览器的版本和设置而异。

最后，请确保您将自动播放与用户体验和隐私问题平衡，以确保您的网站或应用程序符合用户的期望和需求。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^