У меня есть приложение Angular 6, которое позволяет пользователю записывать аудио из своего браузера и загружать его на сервер. Для записи она использует библиотеку WebAudioTrack.js , которая включена через тег <script>
, потому что я не смог найти способ скомпилировать ее в приложение Angular.
Примерно в половине случаев запись работает нормально. В остальное время он работает нормально (с индикатором громкости и т. Д.) Вплоть до момента, когда пользователь нажимает кнопку «Стоп». Когда это происходит, консоль Chrome сообщает об ошибке как:
Uncaught (в обещании) DOMException
Когда я запускаю Angular в режиме разработки, сообщения об ошибках Chrome обычно содержат ссылку на строку кода, которая вызвала ошибку. В этом случае, однако, ссылка просто указывает на строку 1 страницы HTML, то есть на строку 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, но он не поддерживает этот метод.
Я застрял в том, что делать дальше, чтобы продолжить сужать источник этой периодической ошибки. Я также немного ошеломлен синтаксисом для обещаний, особенно в Angular. Мне с трудом удается их написать, так что я еще не дошел до того момента, когда мне будет удобно их отлаживать.
Что я могу сделать, чтобы браузер дал мне более подробную информацию об этом сообщении об ошибке? Или есть какой-то способ, которым я могу поймать DOMException, обработать его и вывести больше деталей?