Question

我有一个Angular 6应用程序，该应用程序允许用户从其浏览器中记录音频并将其上传到服务器。为了进行记录，它使用WebAudioTrack.js库，该库通过<script>标签包含，因为我找不到任何将其编译到Angular应用程序中的方法。

大约有一半的时间记录正常。其余时间（使用VU表和其他所有功能）都可以正常工作，直到用户单击停止按钮为止。发生这种情况时，Chrome控制台将错误报告为：

未捕获（承诺）的DOMException

当我在开发模式下运行Angular时，Chrome错误消息通常包括指向导致错误的代码行的链接。不过，在这种情况下，链接仅指向HTML页面的第1行，即DOCTYPE行。

通过插入许多console.log语句，我可以跟踪程序的执行，而且我相信我在一定程度上缩小了问题的根源。似乎发生在下面的代码块中，该行在调用this.audioTrack.stopRecording((e)的行中。

// "Stop" button was clicked
recordStop() {

  /* Browser shows error when following line is called */
  this.audioTrack.stopRecording((e) => {

    /* When browser errs, this code is never reached */
    this.blobWav = this.audioTrack.blob;
    this.audioURL = this.audioTrack.getBlobSrc();
    this.tearDownMediaStream();
    this.recordState = 'playbackready';
    window.clearInterval(this.timer);
  });
}

请注意，这似乎与新的Chrome自动播放策略无关，该策略要求用户在使用AudioContext播放音频之前与页面进行交互，并且在使用暂停的AudioContext时会抛出类似的错误消息。我已经考虑到了这一点，并且AudioContext的状态报告为“正在运行”。另外，这是录音，不是播放。

我尝试检查this.audioTrack.stopRecording((e)的返回值并将其输出到控制台。代码：

recordStop() {
  var retval = this.audioTrack.stopRecording((e) => {
    // ...
  });
  console.log(retval);
}

输出：

WebAudioTrack {context: AudioContext, sampleRate: 48000, bufferSize: 4096, numberOfAudioChannels: 1, volume: 1, …}

所以，我想这不是返回值，而是对象的副本。

我还尝试向其中添加.catch，但是它不支持该方法。

我被困在下一步做什么，以继续缩小此间歇性错误的根源。我对Promise的语法也有点不知所措，尤其是在Angular中。我勉强可以编写它们，所以我还不适应调试它们。

如何使浏览器更详细地说明此错误消息？还是有某种方法可以捕获DOMException，进行处理并输出更多详细信息？

Answer 1

chrome播放，暂停和停止有很多问题，它们是异步调用，因此我建议您在停止音频并将stopRecording转换为异步函数时尝试使用.then（（）=> {}）：

以下是有关该错误的一些文档，希望对您有所帮助：https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

浏览器控制台间歇性地报告“未捕获（承诺）DOMException”，但未提供其他详细信息。如何使它给我一些？

1 个答案: