angular8 - Angular 8，“AudioContext 不允许启动。它必须恢复”

Question

我正在构建一个监听服务的通知组件（角度 8），每次用户收到新通知时 - 一个 toastr 弹出并假设播放声音......我猜很简单 - 但我无法得到它工作。

我将 Howler 与 ngx-toastr 一起使用，我的第一种方法是手动触发将播放声音的元素 - 但我不断收到以下错误：

这是 Toastr 组件

import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
import { Toast, ToastrService, ToastPackage } from "ngx-toastr";
import { Howl } from "howler";

@Component({
  selector: "toast-component",
  template: ` <div class="row toast-wrapper">
    <div class="col-12">
      <div class="toast-title" [attr.aria-label]="title">Hello User</div>
    </div>
    <div #audioDiv (click)="playSound()"></div>
  </div>`,
})
export class ToastrTplComponent extends Toast implements AfterViewInit {
  @ViewChild("audioDiv", { static: false }) audioDiv: ElementRef;
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage
  ) {
    super(toastrService, toastPackage);
  }

  ngAfterViewInit() {
    const event = new MouseEvent("click", {
      view: window,
      bubbles: true,
      cancelable: true,
    });

    this.audioDiv.nativeElement.dispatchEvent(event);
  }

  public playSound(msg: string) {
    const sound = new Howl({
      src: ["assets/audio/sound.wav"],
    });
    sound.play();
  }
}

标签： angular8howler.jsngx-toastr