Laravel+Pusher实现带音效实时通知 解决首次播放无声音问题

你遇到的报错是浏览器的媒体自动播放策略限制导致的：所有现代浏览器都默认禁止网页在没有获得用户主动交互（点击、按键、触摸等操作）的前提下自动播放音频/视频，避免恶意网页擅自播放内容骚扰用户。
你首次触发时播放音频被拦截，后续可以正常播放的原因是：首次触发时弹出的alert窗口，你点击「确定」的操作属于用户主动交互，浏览器就给当前页面开放了音频播放权限，所以后续的触发都能正常播放。

方案1：引导用户主动授权（最稳定） #

管理员进入后台页面时，主动弹出提示询问是否开启新订单声音提醒，用户点击确认的同时完成音频权限激活：

// 页面加载时就初始化音频对象，不要每次播放重复创建
const notifyAudio = new Audio('http://127.0.0.1:8000/backend/assets/notification.mp3');
// 页面加载完成后弹出授权提示
window.addEventListener('load', () => {
  const enableNotify = confirm('是否开启新订单声音提醒？');
  if (enableNotify) {
    // 点击确认后主动播放一次再重置，激活播放权限
    notifyAudio.play().then(() => {
      notifyAudio.pause();
      notifyAudio.currentTime = 0;
    }).catch(err => console.log('音频初始化失败', err));
  }
})

Pusher.logToConsole = true;
var pusher = new Pusher('***pusher key***', {
    cluster: 'ap2'
});

var channel = pusher.subscribe('my-channel');

channel.bind('my-event', function(data) {
    alert(data.message);
    // 直接调用预加载好的音频播放
    notifyAudio.play().catch(err => console.log('播放失败', err));
});

方案2：监听用户首次交互自动激活 #

如果不想弹授权提示，可以监听页面的任意用户交互（点击、滚动、按键等），第一次触发时自动激活音频权限：

const notifyAudio = new Audio('http://127.0.0.1:8000/backend/assets/notification.mp3');
let audioInited = false;

// 监听用户首次交互激活音频
['click', 'scroll', 'keydown'].forEach(eventName => {
  document.addEventListener(eventName, initAudio, { once: true });
})

function initAudio() {
  if (audioInited) return;
  audioInited = true;
  notifyAudio.play().then(() => {
    notifyAudio.pause();
    notifyAudio.currentTime = 0;
  }).catch(err => console.log('音频初始化失败', err));
}

// 后面的Pusher逻辑不变
Pusher.logToConsole = true;
var pusher = new Pusher('***pusher key***', {
    cluster: 'ap2'
});

var channel = pusher.subscribe('my-channel');

channel.bind('my-event', function(data) {
    alert(data.message);
    notifyAudio.play().catch(err => console.log('播放失败', err));
});

• 不要每次播放音频都重新new Audio，重复创建会增加不必要的网络请求，也不利于权限激活
• 原有代码playPromise回调里重复调用了x.play()，属于多余逻辑，直接删掉即可
• 建议给音频播放加catch捕获异常，方便排查问题

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