Question

我的页面上有一个音频元素，设置如下：

<audio id="audio" controls preload="metadata">
    <source src="/audio/episode.mp3" type="audio/mpeg">
    <source src="/audio/episode.ogg" type="audio/ogg">
    [Not supported message]
</audio>

我很高兴将preload设置为＆＃34;元数据＆＃34;，因为能够看到文件的长度非常方便，并且能够提前跳过很高兴无需先点击播放按钮。

然后我注意到在Firefox和IE中，这个元数据＆＃39;加载量在20KB到50KB之间。 Chrome更糟糕，加载超过1MB。对于时间戳来说，似乎浪费了很多带宽。

我知道preload被浏览器视为more what you'd call 'guidelines' than actual rules。我也发现了more in-depth article about the issue。

有没有减少这些请求大小的方法？

我尝试/考虑的内容

我尝试在文本编辑器中快速剪切文件中的大部分元数据作为测试。这使得Firefox和IE 中的请求变得更大，但让我乐观地认为有一些方法可以对它产生积极的影响。

我还考虑在页面上包含长度并使用javascript进行设置，但这些设置似乎是只读的。

最后，我一直在想，作为最后的手段，我可以生成一个完全相同长度的空音频文件，将其压缩到尽可能小的文件，然后当用户与之交互时它，换掉真正的*。在这一点上，我意识到我应该得到一些帮助...

*编辑：我最终尝试了这个！它不会为我的网站工作，但至少它有趣。我在下面将其作为答案包括在内。

Answer 1

这个解决方案很糟糕，但它确实具有可衡量的效果。通过最初使用静音doppelganger加载页面，然后在音频开始播放时将其切换为真实文件，我设法在初始页面加载时节省了很多。

以下是我使用10分钟20秒长mp3的平均结果。之前和之后：

IE：16KB - Firefox：43KB - Chrome： 1.4MB

IE：15KB - Firefox：08KB - Chrome：34KB

在Chrome上，保存为1.36MB，more data than the full text of Crime and Punishment。这是代码：

<强> HTML

<audio id="audio" controls preload="metadata">
    <source src="/silence.mp3" type="audio/mpeg">
</audio>

<强>的Javascript

var audio = document.getElementById("audio");
var time, volume, muted;

audio.addEventListener("playing", loadAudio, false);

function loadAudio(e) {
    time = audio.currentTime;
    volume = audio.volume;
    muted = audio.muted;
    audio.innerHTML = "<source src=\"/episode.mp3\" type=\"audio/mpeg\">";
    audio.setAttribute("preload", "auto");
    audio.load();
    audio.addEventListener("canplaythrough", playAudio, false);

    e.target.removeEventListener(e.type, arguments.callee);
}        

function playAudio(e) {
    audio.currentTime = time;
    audio.volume = volume;
    audio.muted = muted;
    audio.play();

    e.target.removeEventListener(e.type, arguments.callee);
}

这只是作为测试而写的;它可以改进很多。

这种方法有足够的缺点，我认为我不会使用它。其中包括：

您必须为您想要以这种方式加载的每个音频文件生成静音副本。
实际播放音频的用户将同时请求这两个文件。
音频开始播放需要更长时间。
控件显然会切换到0:00并再次返回，尤其是在使用像我这样的高延迟互联网时。

那说，希望这种方法适用于那里的人！至少玩它很有趣。

有没有办法在使用<audio>并将预加载设置为元数据时减小请求的大小

1 个答案: