背景
页面加载很多音频标签，音频资源一些加载不成功，音频标签不可用，并且排除以下几种情况：
检查音频的链接是否有效
检查音频格式是否支持
检查网络连接是否通畅
如果确认以上内容没有任何问题，则是页面加载过多的音频资源而导致部分音频资源加载失败。可以使用JavaScript进行资源加载重试，当然重试的策略需要进行限制，避免无限制尝试。
实现方式
以下是使用JavaScript代码实现自动重新加载资源的一个简单的示例，当音频标签加载失败时，它会自动尝试重新加载音频：
const audio = document.querySelector('audio');
audio.addEventListener('error', () => {
audio.load();
});
在上面示例中，首先选择了音频标签，并添加了一个错误事件监听器。当发生错误时，错误事件会触发，并调用load()方法来重新加载音频并尝试播放。
如果希望重试的次数有限制，可以使用一个计数器来限制次数，例如：
const audio = document.querySelector('audio');
let retryCount = 0;
const maxRetries = 3;
audio.addEventListener('error', () => {
if (retryCount < maxRetries) {
audio.load();
retryCount++;
} else {
console.log('音频加载失败');
}
});
在以上的示例中，添加了一个retryCount变量来跟踪尝试次数，并添加了一个maxRetries变量来限制最大尝试次数。
如果重试次数小于最大尝试次数，将重新加载音频，并增加重试计数器。如果达到最大尝试次数，将打印一条错误消息。
这样，就可以使用JavaScript代码来实现自动重新加载音频标签了。这只是一个简单的示例，而实际情况可能需要考虑更多的情况，此示例仅供一个参考！
转载请注明：清风亦平凡 » HTML5音频资源加载失败的处理方法
喜欢 (1)or分享 (0)
赏
支付宝扫码打赏
微信打赏