javascript – 延迟在移动浏览器上播放HTML5音频文件

我正在制作一个网络应用程序,我需要在点击按钮时添加一个简短的声音.

该文件是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();
}

这在我的电脑(火狐,Chrome)上工作正常,但是在点击触发按钮后在手机上,它会在第一次播放之前等待3秒,并且现在将在第一次延迟播放后立即播放.

更新：

我注意到即使我导航到我的手机上的mp3文件,如http://example.com/sound/click.mp3并点击播放,它仍然延迟,似乎它必须缓冲.

反正这个问题呢？

完整示例：

Here is a jsFiddle for mobile testing.

var clickSound = document.getElementById('click');
var play = document.getElementById('play');

play.addEventListener('click', function() {
      clickSound.play();
}, false);

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


<input id="play" type="button" value="play sound">

解决方法:

对较小的音频文件执行此操作的一种方法是将文件预加载为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％.