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

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被设置为“元数据”，因为能够看到文件的长度是很方便的，并且能够跳过前面而不必先点击播放按钮是很好的。

但后来我注意到在Firefox和IE中，这个“元数据”的加载量在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并再次返回，特别是在使用像我这样的高延迟互联网时。

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