对于较小的音频文件，一种方法是将文件预加载为blob：

<button>play</button>
<audio></audio>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'click.mp3', true);
xhr.responseType = 'blob';
var audio = document.querySelector('audio');
xhr.onload = function () {
    audio.src = URL.createObjectURL(xhr.response);  
};
xhr.send();
document.querySelector('button').onclick = function () {
    audio.play();
};
</script>

请注意，这需要XHR2（http：//caniuse.com/#feat=xhr2）和Blob URL（http：//caniuse.com/#feat=bloburls），并且在这里应用相同的源策略。此外，您应该确保发送文件时使用一些强缓存头，以防止客户端在每次请求时重新加载文件。

**编辑：**另一种方法是使用数据URL（参见http://jsfiddle.net/apo299od/）：

<button>play</button>
<audio></audio>
<script>
var audio = document.querySelector('audio');
audio.src = 'data:audio/mp3;base64,SUQzBAAAAAA...';
document.querySelector('button').onclick = function () {
    audio.play();
};
</script>

这里的缺点是它更难维护，而且它会使您的响应大小膨胀33%。

更新音频标签中的属性：

• • 错误：**

<audio id="click" preload>
  <source src="http://scriveit.com/sound/click.mp3" type="audio/mp3">
</audio>

• • 正确：**

<audio id="click" preload="metadata">
  <source src="http://scriveit.com/sound/click.mp3" type="audio/mp3">
</audio>

• • 示例：**

<audio preload="auto|metadata|none">

参考：https://www.w3schools.com/tags/att_audio_preload.asp

• • 警告：**

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics

• • 解决方案：**

const audio = new Audio('http://scriveit.com/sound/click.mp3');
audio.load();

参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load