我正在制作一个网络应用程序,我需要在单击按钮时添加一个短促的声音。
该文件是 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">
最佳答案
对于较小的音频文件,一种方法是将文件作为 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 URLs ( http://caniuse.com/#feat=bloburls ) 并且同源策略适用于此处。此外,您应该确保发送的文件带有一些强缓存 header ,以防止客户端在每次请求时重新加载文件。
编辑:另一种方法是使用数据 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%。
关于javascript - 延迟在移动浏览器上播放 HTML5 音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27242821/