如何解决错误错误：未捕获（承诺中）：NotAllowedError：以角度重新加载页面时play（）

Question

TS

 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（）在重新加载页面时？

原因是，当我运行该应用程序时，音频正在运行，但是当我尝试重新加载警报/通知时，该音频正在运行，但是音频不起作用，这会导致错误。这是错误错误：未捕获（承诺）：NotAllowedError：play（）

我将如何解决？

Answer 1

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

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

和带有HTML的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