【问题标题】：Problem to play audio instantly for large size audio file大尺寸音频文件立即播放音频的问题
【发布时间】：2019-08-28 10:06:25
【问题描述】：

我正在尝试在我的代码中添加音频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

以上代码运行良好.. 但如果音频很大，我将面临问题。我必须等待几秒钟才能听音频，

是否有任何替代方法可以让我们无需等待即可立即播放音频？

【问题讨论】：

你试过preload="auto"标签在页面加载时加载音频吗？
没有。您需要等待文件开始流式传输才能加载音频数据。服务器端缓存也可能有助于缓解这个问题，或者更多的带宽。不过，它不会消失。

标签： javascript jquery html audio html5-audio

【解决方案1】：

Source

缓冲文件

播放大文件时，缓冲文件确实是个好主意。为此，您可以使用 preload 属性。它接受 3 个值：none（如果您不希望文件被缓冲）、auto（如果您希望浏览器缓冲文件和元数据（在页面加载时仅缓冲元数据）。

<audio controls>
  <source src="sound.mp3" preload="auto" >
</audio>

【讨论】：

首先preload 属性位于audio，而不是source。其次，如果没有提供preload 属性，auto 是默认设置，因此 OP 已经这样做了：developer.mozilla.org/en-US/docs/Web/HTML/Element/…

【解决方案2】：

我找到了一个解决方案，看看它是否有效：

您可以使用音频元素的以下属性来解决您的问题！

预加载提示：您可以选择使用 preload 属性来提示浏览器是否以及如何在页面加载时预加载音频文件。预加载音频文件意味着它可以在用户点击“播放”按钮时立即播放，这对用户来说是一个更好的体验。

<audio preload="auto"> 
  <source src="WhiteChristmas.mp3">
  <source src="WhiteChristmas.ogg">
</audio>

参考这个网站： https://www.elated.com/html5-audio/

【讨论】：

由于 OP 没有指定 preload 属性，因此使用 auto 来获取整个文件，而不是像您建议的那样仅获取文件长度标题。

【解决方案3】：

您可以尝试检查拼写...我遇到了这个问题，但是当我检查并更正文件的拼写时，它会立即加载。代码是：您的浏览器不支持音频元素。

【讨论】：