Javascript html音频元素播放错误处理(既没有结束也没有显示任何错误)

Question

程序目的和说明

我已经创建了一个javascript音频控制器，它可以在我的Windows计算机(出于测试原因(和我的android手机上的浏览器中完美运行。具有功能

• 将base64编码的声音加载到"；声音池">
• 将来自池中的某些声音添加到"声音"中；播放列表">
• 按照添加的顺序播放列表中的声音，一个接一个

为了达到最后一点，我必须收听audio.oned事件，以便等待下一个声音的开始，直到上一个声音播放完毕。

问题描述

javascript音频控制器是移动应用程序的一部分，因此它必须在移动/智能手机浏览器上运行。当我在iPhone Safari中运行相同的应用程序时，会播放一些声音，但随后不会播放某些声音。为了解决这个问题，我添加了一个oneror事件侦听器，但既没有统一的处理程序，也没有

代码

async playNwait(audio) { // plays sound and waits until it has finished
return new Promise ((resolve) => {
audio.onerror = (event) => {
log('Play Error: ' + audio.error.code);
log('Play Error: ' + audio.error.message);
log('Play Error: ' + event.currentTarget.error.code);
log('Play Error: ' + event.currentTarget.error.message);
reject('Audio failed');
};
audio.onended = (event) => {
log('      playNwait ended');
resolve('Audio ended');
};
log('      playNwait started');
log(audio.src);
audio.addEventListener("error", function(e) {
log("Playback error: " + e.currentTarget.error.code);
var prop, props='nEvent properties are: ';
var o = e.currentTarget.error;
for (prop in o) {
props += prop+'='+o[prop]+' ';
}
log(props);
reject('Audio failed');
});         
audio.play();
});
}

函数日志调用具有相同参数的console.log函数，并通过API将值发送到服务器，并将其记录在数据库表中，以便分析移动浏览器的日志条目。

我知道我有两个目的相同的错误处理程序。他们都没有开火。

日志条目

为了便于比较，以下是Firefox在Andriod和Safari在iOS上生成的相关日志条目：

安卓系统上的Firefox

"Playing 4: 60_sechzig"     2021-05-28 23:40:28
"      playNwait started"   2021-05-28 23:40:28
"data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPA..."  2021-05-28 23:40:28
"      playNwait ended"     2021-05-28 23:40:29
"Played 4"  2021-05-28 23:40:29

iPhone Safari

"Playing 4: 60_sechzig"     2021-05-28 22:21:13
"      playNwait started"   2021-05-28 22:21:13
"data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPA..."  2021-05-28 22:21:13

除此之外，onended和其中一个错误处理程序都不会触发。此外，由于应用程序错误地认为前一个声音尚未播放完毕，因此不会播放更多的声音。(它没有开始播放。(

4正是"0"中的声音的数目；播放列表"；。

问题

如何使oneror事件处理程序正常工作？如何进一步解决此问题？

非常感谢您的帮助。

Answer 1

发现的问题：由于NotAllowedError，iOS Safari上的音频播放功能失败："在当前上下文中，用户代理或平台不允许该请求，可能是因为用户拒绝了权限">

以下是我更新的报告错误的函数(并添加了一些调试(：

async playNwait(audio) { // plays sound an wait until it has finished
return new Promise (async (resolve, reject) => {
audio.onerror = (event) => {
log('Play Error: ' + audio.error.code);
log('Play Error: ' + audio.error.message);
log('Play Error: ' + event.currentTarget.error.code);
log('Play Error: ' + event.currentTarget.error.message);
reject('Audio failed');
};
audio.abort = (event) => {
log('      playNwait abort');
};
audio.loadstart = (event) => {
log('      playNwait loadstart');
};
audio.onplay = (event) => {
log('      playNwait playing');
};
audio.onended = (event) => {
log('      playNwait ended');
resolve('Audio ended');
};
log('      playNwait started');
log(audio.src);
audio.addEventListener("error", function(e) {
log("Playback error: " + e.currentTarget.error.code);
var prop, props='nEvent properties are: ';
var o = e.currentTarget.error;
for (prop in o) {
props += prop+'='+o[prop]+' ';
}
log(props);
reject('Audio failed');
});         
try {
await audio.play();
} catch (err) {
error ('Media play error: ' + err.name + ' - ' + err.message);
}
});
}

我知道iOS Safari在未由用户交互初始化时会阻止播放音频。我知道我过去有一个成功的解决方案，那就是在用户交互中加载音频文件。

然而，这是一个不同的问题，这个问题在这里得到了解决：错误处理程序永远不会启动，因为播放方法已经失败。