延迟在移动浏览器中播放HTML5音频文件

Question

我正在制作一个Web应用程序，单击按钮时需要添加简短的声音。

该文件为mp3格式，大小约为24kb，我不想使用javascript创建元素，因此我将其添加到DOM中并使用CSS进行了隐藏，还添加了preload =“ auto”，因此该文件已加载DOM

<audio id="click" preload style="display:none;"> 
   <source src="sound/click.mp3" type="audio/mp3">
</audio>

在JavaScript中，我有类似的东西：

var clickSound = $('#click')[0];

然后在一个侦听一个按钮的均匀单击的函数中，我有：

function(){
  clickSound.play();
}

这在我的计算机（firefox，chrome）上可以正常工作，但是在移动设备上单击触发按钮后，它将等待大约3秒钟才能首次播放，而现在在第一次延迟播放后会立即播放。

更新：

我注意到，即使我像这样http://example.com/sound/click.mp3导航到手机上的mp3文件并单击播放，它仍然会延迟，似乎必须缓冲。

无论如何围绕这个问题？

完整的例子：

这是用于移动测试的jsFiddle。

<audio id="click" preload style="display:none;"> 
   <source src="sound/click.mp3" type="audio/mp3">
</audio>

var clickSound = $('#click')[0];

Answer 1

对于较小的音频文件，一种方法是将文件作为 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%。