Angular页面刷新音频无法重复播放：DOMException问题求助

错误原因 #

你遇到的DOMException: play() failed because the user didn't interact with the document first错误，是现代浏览器自动播放安全政策导致的：为避免未经许可的媒体播放骚扰用户，浏览器要求所有媒体播放操作必须由用户主动交互（点击、触摸、键盘输入等）触发。第一次刷新可能因浏览器临时例外（如缓存、开发环境宽松限制）成功播放，但第二次刷新时浏览器严格执行政策，无用户交互的play()调用被直接阻止。

另外注意你的HTML代码存在拼写错误：palysinline应改为playsinline，该属性无效可能影响音频元素的正常行为。

解决方案 #

方案1：绑定用户交互触发播放 #

这是最符合浏览器政策的标准方案，通过监听页面的首次用户交互事件触发音频播放：

修改TS代码：

@ViewChild('notificationAudio') notificationAudioEle: ElementRef;

ngAfterViewInit() {
  // 监听页面首次点击/触摸交互
  const triggerPlay = () => {
    this.playSound();
    // 触发后移除监听，避免重复执行
    document.removeEventListener('click', triggerPlay);
    document.removeEventListener('touchstart', triggerPlay);
  };

  document.addEventListener('click', triggerPlay);
  document.addEventListener('touchstart', triggerPlay);
}

playSound() {
  if(this.notificationAudioEle?.nativeElement){
    this.notificationAudioEle.nativeElement.play().catch(err => {
      console.error('音频播放失败:', err);
    });
  }
}

用户每次刷新页面后，只需点击页面任意位置，即可触发音频播放，完全符合浏览器安全要求。

方案2：静音自动播放（需业务场景允许） #

若业务允许先静音播放再开启音量，可利用浏览器允许静音媒体自动播放的规则：

修改HTML：

<audio #notificationAudio playsinline muted src="./../../../../assets/notification-26017.mp3"></audio>

修改TS代码：

@ViewChild('notificationAudio') notificationAudioEle: ElementRef;

ngAfterViewInit() {
  this.playSound();
}

playSound() {
  if(this.notificationAudioEle?.nativeElement){
    this.notificationAudioEle.nativeElement.play().then(() => {
      // 播放成功后手动开启音量
      this.notificationAudioEle.nativeElement.muted = false;
    }).catch(err => {
      console.error('音频播放失败:', err);
    });
  }
}

此方案无需用户主动点击，但需接受“先静音再出声”的体验，部分浏览器仍可能限制该行为，优先推荐方案1。

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