Chrome浏览器Pusher通知音效失效，Laravel7下如何绕过play()限制？

Chrome浏览器的自动播放政策更新后，非用户主动触发的音频播放请求会被默认阻止——这正是你的Pusher通知音效失效的核心原因。下面是具体的解决思路和代码修改方案：

核心原因 #

Chrome要求音频/视频的play()调用必须由用户手势触发（比如点击、触摸、键盘输入等），而你的代码是在Echo的后台通知回调中直接调用play()，属于被动触发，所以被浏览器拦截了。

解决方案：先解锁音频播放权限 #

我们需要先通过一次用户主动交互来“解锁”音频播放权限，之后后台触发的音效就能正常播放了。这里提供两种实用方案：

方案1：添加明确的“解锁音效”按钮 #

适合需要告知用户开启音效的场景，修改你的Vue组件如下：

<template>
  <!-- 其他页面内容 -->
  <div v-if="!audioUnlocked" class="mt-4 p-3 bg-info text-white">
    <button @click="unlockAudio" class="btn btn-light">点击解锁通知音效</button>
  </div>
</template>

<script>
export default {
  props: ["dataAuthUser"],
  data() {
    return {
      unreadNotifications: "",
      user: JSON.parse(this.dataAuthUser),
      alart: new Audio("/alert/alert.mp3"),
      audioUnlocked: false // 新增：标记音频是否已解锁
    };
  },
  created() {
    axios
      .get("/admin/vue-notify")
      .then((res) => {
        this.unreadNotifications = res.data.unreadNotifications;
      })
      .catch((err) => {
        console.error(err);
      });
  },
  mounted() {
    Echo.private("App.User." + this.user.id).notification((notification) => {
      this.unreadNotifications.unshift(notification);
      // 只有解锁后才播放音效
      if (this.audioUnlocked) {
        // 播放前重置音频到开头，避免重复通知时音效不完整
        this.alart.currentTime = 0;
        this.alart.play().catch(err => {
          console.error("音效播放失败:", err);
        });
      }
    });
  },
  methods: {
    async unlockAudio() {
      try {
        // 静音播放一次来解锁权限（用户不会听到声音）
        this.alart.muted = true;
        await this.alart.play();
        // 播放后暂停并重置音频状态
        this.alart.pause();
        this.alart.currentTime = 0;
        this.alart.muted = false;
        
        this.audioUnlocked = true;
        console.log("音频播放权限已解锁");
      } catch (err) {
        console.error("解锁音频权限失败:", err);
      }
    }
  }
};
</script>

方案2：通过首次页面点击自动解锁 #

适合不需要用户明确操作的场景，利用用户第一次点击页面的动作自动解锁：

<script>
export default {
  props: ["dataAuthUser"],
  data() {
    return {
      unreadNotifications: "",
      user: JSON.parse(this.dataAuthUser),
      alart: new Audio("/alert/alert.mp3"),
      audioUnlocked: false
    };
  },
  created() {
    axios
      .get("/admin/vue-notify")
      .then((res) => {
        this.unreadNotifications = res.data.unreadNotifications;
      })
      .catch((err) => {
        console.error(err);
      });
  },
  mounted() {
    // 监听页面首次点击，解锁音频权限
    const unlockOnFirstClick = async () => {
      if (!this.audioUnlocked) {
        try {
          this.alart.muted = true;
          await this.alart.play();
          this.alart.pause();
          this.alart.currentTime = 0;
          this.alart.muted = false;
          
          this.audioUnlocked = true;
          document.removeEventListener('click', unlockOnFirstClick); // 解锁后移除监听
          console.log("音频权限已通过页面点击自动解锁");
        } catch (err) {
          console.error("自动解锁失败:", err);
        }
      }
    };
    document.addEventListener('click', unlockOnFirstClick);

    // Pusher通知监听
    Echo.private("App.User." + this.user.id).notification((notification) => {
      this.unreadNotifications.unshift(notification);
      if (this.audioUnlocked) {
        this.alart.currentTime = 0;
        this.alart.play().catch(err => console.error(err));
      }
    });
  }
};
</script>

关键细节说明 #

1. 静音播放解锁：通过静音播放一次音频，既不会打扰用户，又能让Chrome认为这是用户触发的合法播放请求，从而授予后续播放权限。
2. 重置音频状态：每次播放前设置currentTime = 0，确保重复收到通知时，音效能从头开始播放，而不是从上次暂停的位置继续。
3. 错误捕获：给play()添加catch处理，方便排查可能的其他问题。

内容的提问来源于stack exchange，提问作者IQBAL HASAN