如何修复错误错误：未捕获（承诺）：NotAllowedError：以角度重新加载页面时播放（）答案

【问题标题】：How to fix the ERROR Error: Uncaught (in promise): NotAllowedError: play() when reload page in angular如何修复错误错误：未捕获（承诺）：NotAllowedError：以角度重新加载页面时播放（）
【发布时间】：2020-07-16 05:35:25
【问题描述】：

 limitExceed(params: any) {
        params.forEach((data: any) => {
          if (data.percent === 100) {
            this.createNotification('warning', data.sensor, false);
          } else if (data.percent >= 56 && data.percent <= 99.99) {
            this.createNotification('warning', data.sensor, true);
          }
        });
      }
      createNotification(type: string, name: string, types: boolean): void {
            const textColor = '#ff0000';
            const title = 'High humidity!';
            let subtitle: any;

            timer(1000, 300000).subscribe(() => {
              // const subTitle: any;
              if (types) {
                subtitle = name + 'humidity has reached the minimum limit';
              } else {
                subtitle = name + ' humidity has reached the maximum';
              }

              this.notification.config({
                nzPlacement: 'bottomRight',
                nzDuration: 5000,
              });

              this.playWithAudio(type, title, subtitle, textColor);
            });
          }

          playWithAudio(type: string, title: string, subtitle: string, textColor: string) {
            const AUDIO = <HTMLMediaElement>document.getElementById('audio');
            if (AUDIO) {
              AUDIO.muted = true; // temporarily revolves play error on browser
              const playPromise = AUDIO.play();

              this.notification.create(type, title, subtitle, {
                nzStyle: { color: textColor, 'border-left': textColor + ' 5px solid' }
              });

              if (playPromise !== null) {
                playPromise.then(() => { AUDIO.play(); })
.catch(error => { AUDIO.play(); });
              }
            }
          }

HTML

<audio id="audio" hidden>
  <source src="./assets/audio/notif.mp3" type="audio/wav" />
</audio>

重新加载页面时如何修复 ERROR 错误：未捕获（承诺中）：NotAllowedError: play()？

因为当我运行应用程序时，音频可以正常工作，但是当我尝试重新加载警报/通知时，警报/通知可以正常工作，但音频无法正常工作，导致出现错误。这是 ERROR Error: Uncaught (in promise): NotAllowedError: play()

我将如何解决它？

【问题讨论】：

当你在.then()中做AUDIO.play()时，它会返回一个Promise，你也需要在里面做一个.then和.catch
我添加了一个问题。然后我尝试播放（）音频它同样的错误ERROR Error: Uncaught (in promise): NotAllowedError: play()
@OscarVelandia 我已经更新了我的代码。
我的意思是playPromise.then(() => { AUDIO.play() .then(console.log) // 这里可以看到响应。 }) .catch(console.log ); // 这里你可以看到错误。如果您看到您的 playPromise 与 AUDIO.play() 相同。如果你能在 codebox 中做一个例子，我可以以最好的方式帮助你。
这是正确的吗？ notificationAudio.play().then(err => console.log(err)); 或 notificationAudio.play().then(err => console.log(playPromise));

标签： javascript angular typescript html5-audio

【解决方案1】：

你的问题是因为你没有音源，我用

修改了你的 playWithAudio 函数

 playWithAudio() {
    const AUDIO = document.querySelector('audio');

    if (AUDIO) {
      AUDIO.muted = false;
      AUDIO.play();
    }
  }

还有你的 HTML

  <audio id="audio" hidden>
    <source src="https://www.kenney.nl/content/3-assets/128-ui-audio/preview.ogg" type="audio/ogg" />
  </audio>

如果您需要在文件播放后执行某些操作，则将 AUDIO.play() 承诺保存在变量中很有用，在其他情况下，您可以直接使用它（我在示例中这样做）

这是一个例子https://codesandbox.io/s/silly-colden-yzlno

【讨论】：

AUDIO.play().then(console.log) - 回复undefined。 catch - 响应 ```core.js:6014 ERROR 错误：未捕获（承诺中）：NotAllowedError: play()``
我无法帮助您处理 OP 中的代码，如果您可以在 codesanbox 中上传可重现的代码，我会为您提供帮助。
stackblitz.com/edit/angular-audio-player-bwcjbt?file=src/app/…
请检查先生
先生，您在哪里更新的？在stackblitz上？或者你的答案在这里？还是一样的 Uncaught (in promise) DOMException: play()