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

Delay in playing HTML5 audio file on mobile browsers

本文关键字：文件 延迟 音频 HTML5 移动 浏览器 播放      更新时间：2023-09-26

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

该文件是 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。

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%。

相关文章：