Question

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

文件是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秒，而现在会在第一次播放后立即播放延迟游戏。

更新

我注意到即使我导航到我的手机上的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">

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网址（http://caniuse.com/#feat=bloburls），并且此处适用相同的原始政策。此外，您应确保使用一些强大的缓存标头发送文件，以防止客户端在每次请求时重新加载文件。

修改：另一种方法是使用数据网址（请参阅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％。

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

完整示例：

1 个答案: