移动设备上的HTML 5音频.play()延迟

Question

我刚刚使用socket.io构建了一个实时应用程序,其中"主"用户可以在接收设备(桌面浏览器,移动浏览器)上触发声音.主用户看到声音文件列表,并可以单击声音文件上的"播放".

音频播放在浏览器上即时播放.然而,在手机上,延迟时间为0.5-2秒(我的Nexus 4和iPhone 5约为1秒,iPhone 3GS为1-2秒).

我已经尝试了几种方法来优化音频播放,使其在移动设备上更快.现在(在其优化的最佳"阶段"我说),我将所有mp3组合在一个音频文件中(它创建.mp3,.ogg和.mp4文件).我需要有关如何进一步修复/改善此问题的想法.瓶颈似乎真的出现在hmtl 5音频方法中.play().

在我使用的接收器上:

<audio id="audioFile" preload="auto">
  <source src="/output.m4a" type="audio/mp4"/>
  <source src="/output.mp3" type="audio/mpeg"/>
  <source src="/output.ogg" type="audio/ogg"/>
  <p>Your browser does not support HTML5 audio.</p>
</audio>

在我的JS中:

var audioFile = document.getElementById('audioFile');

  // Little hack for mobile, as only a user generated click will enable us to play the sounds
  $('#prepareAudioBtn').on('click', function () {
    $(this).hide();
    audioFile.play();
    audioFile.pause();
    audioFile.currentTime = 0;
  });

// Master user triggered a sound sprite to play
socket.on('playAudio', function (audioClip) {
  if (audioFile.paused)
    audioFile.play();

  audioFile.currentTime = audioClip.startTime;

  // checks every 750ms to pause the clip if the endTime has been reached. 
  // There is a second of "silence" between each sound sprite so the pause is sure to happen at a correct time.
  timeListener(audioClip.endTime);
});

function timeListener(clipEndTime) {
  this.clear = function () {
    clearInterval(interval);
    interval = null;
  };

  if (interval !== null) {
    this.clear();
  }

  interval = setInterval(function () {
    if (audioFile.currentTime >= clipEndTime) {
      audioFile.pause();
      this.clear();
    }
  }, 750);
}

每个声音也被认为是blob,但是有些声音可以持续几分钟,这就是为什么我将所有声音组合在一起用于1个大音频文件(比audio每个剪辑的页面上的几个标签更好)

Answer 1

由于该属性，您的设置在桌面上运行良好preload。

不幸的是，苹果公司的主题是preload：

iOS 上的 Safari 从不预加载。

这是MDN：

注意：该值在移动平台上经常被忽略。

移动平台正在做出权衡，以节省电池和数据使用量，仅在用户实际交互或以编程方式播放媒体时加载媒体（autoplay通常出于类似原因不起作用）。

我认为你要做的最好的事情就是将你的曲目组合在一起，正如你所说的那样，这样你就不必支付那么多的初始加载“成本”。