Question

我有一个网页应用加载Instagram图片并创建带背景声音的幻灯片。在加载图像时，运行预加载器以显示处理。但是它没有完全加载mp3文件，当我在浏览器的控制台中检查时它已经206 partial content。因此，在点击播放按钮时，我必须等待几秒钟才能完全加载音乐以播放幻灯片。

 console.log('loading theme: ' + folder);
    $.ajaxSetup({
        cache: false
    });

    $.when(
            $.getScript(epic.getFrontendURL() + "animations/" + folder +  "/js/data.js"),
            $.getScript(epic.getFrontendURL() + "animations/" + folder + "/js/main.js"),
            $.Deferred(function (deferred) {
                $(deferred.resolve);
            })
        ).done(function () {
 //some methods
  sound_bg.src = epic.getFrontendURL() + "sound/back.mp3?
  });

所以，这是否与某种方式相关，done延迟了处理。

Answer 1

这种行为很正常。浏览器使用HTTP范围请求来加载音频和视频文件，以最大限度地减少带宽使用。

如果您希望浏览器预加载音频，请在音频元素上将preload属性设置为auto：

<audio src="..." preload="auto"></audio>

Answer 2

我找到了一种方法来检查是否有错误，是否有声音错误，您的网站将重新加载有问题的声音，直到正确加载为止。这对我有用：

var sound1 = new Audio('sfx/1.mp3')
var sound2 = new Audio('sfx/2.mp3')
var sound3 = new Audio('sfx/3.mp3')

var soundChecker = setInterval(function() {
    if (sound1.error) {
        sound1 = new Audio('sfx/1.mp3')
    } else if (sound2.error) {
        sound2 = new Audio('sfx/2.mp3')
    } else if (sound3.error) {
        sound3 = new Audio('sfx/3.mp3')
    } else {
        clearInterval(soundChecker)
    }
}, 1500)

这将在每半秒加载一次声音时检查错误（您可以修改时间以降低连接速度），如果任何已加载的声音有错误，soundChecker会重新加载它们，直到所有声音都已加载成功（没有错误）。如果所有声音都已成功加载，soundChecker间隔将自行清除并停止检查。

您会注意到，诸如net::ERR_CACHE_READ_FAILURE 206 (Partial Content)之类的错误仍会在控制台中打印，但声音仍然有效，因为在随后的重新加载中，它已成功加载。

加载.mp3文件时获得206个部分内容

2 个答案: