HTML 音频标签出现错误 - Chrome 上的音频渲染答案

【问题标题】：HTML Audio Tag getting error - Audio Render on ChromeHTML 音频标签出现错误 - Chrome 上的音频渲染
【发布时间】：2019-03-19 10:37:52
【问题描述】：

我正在开发用户可以播放音频文件的 Angular 应用程序。为此，我们需要从 api 将文件作为 blob 获取，然后创建 blobURL 并将其分配给 HTML Audio 的 src 属性，但在 chrome 上，有时（真的很奇怪）它会给出以下错误 -

MediaError
    code: 3
    message: "AUDIO_RENDERER_ERROR: audio render error"

如果我再试几次，它就会播放，然后所有文件都会播放而没有任何错误。另外，如果我在某个时间后尝试，它会开始播放而不会出现任何错误。不过在 Firefox 上运行良好。

这是从 api 获取音频的代码 -

res.subscribe((audioData) => {
        this.unsafeBlobUrl = URL.createObjectURL(audioData);
        this.audio.nativeElement.addEventListener('error', onError);
        this.audio.nativeElement.addEventListener('ended', onEnded);
        this.audio.nativeElement.addEventListener('paused', onPaused);
        this.audio.nativeElement.addEventListener('canplay', canPlay);
      }, onError)

这是播放音频的代码 -

 const canPlay = () => {
      this.audio.nativeElement.play()
        .then(() => {
          this.isPlaying = true;
          this.isLoading = false;
          this.isError = false;
        })
        .catch(onError);
    };

【问题讨论】：

标签： javascript html angular google-chrome html5-audio

【解决方案1】：

好的，我找到了问题。

实际上，我多次初始化音频上下文导致了这个错误。

this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();

删除这条线救了我的命:)

【讨论】：