Question

我正在尝试重建一款可以在大多数主流设备和浏览器上兼容的itch游戏。我遇到一个问题，在iOS（可能还有其他移动设备）上，单击和触摸事件中播放音频标签的调用会产生很大的延迟。

我已经了解了一些潜在的原因，包括300ms的延迟，第二次点击事件的preventDefault，可能的父级点击的stopPropagation，导致解压缩滞后的不同音频格式等。

最初，我的目的是将所有内容都保留在Vanilla js中，而无需外部库，以迫使我自己真正了解底层的情况。但是，由于其他问题，我在某些外部库方面取得了一些成功，因此我尝试使用fastclick.js解决此问题。那对我也不起作用。因此，如果某人知道如何在没有库的情况下解决该问题，那将是一个很好的选择，但是在查看fastclick代码之后，这可能超出了我的理解水平。

可以在www.teachersteve.net/assett_loading_with_ian/assett_loading_with_ian.html中找到当前版本

对我的思维过程的一些解释：

我删除了所有与尝试与隔离问题相关的游戏。我将所有资产直接放在html中，以简化加载过程，并在DOM加载后等待启动js
```
document.addEventListener("DOMContentLoaded", doSomething);
```
我目前只在播放一个音频标签，因为我在某处读到，调用多个标签可能会使解压缩过程过载并导致延迟。这似乎不是问题。
到目前为止，我尝试使用3种不同的文件格式来进行兼容性尝试...我确实读过LEI16（wav格式）可能是最好的，因为它消除了压缩，尽管我还没有尝试过。

这是doSomething（）函数的其余部分

function doSomething() {
  document.body.style.opacity = 1;
  document.addEventListener("click", playAudio);
  document.addEventListener('click', preventInputDefault);
  document.addEventListener('ontouchend', preventInputDefault);
  console.log("assetts loaded");

  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
  }


  function playAudio() {

          // backgroundMusic.play();

      letterAudio.play();

      // correctAnswerAudio.play();

      // letterAudio.play();
      // correctAnswerAudio.play();
  }

  function preventInputDefault(evt) {
    evt.preventDefault();
    console.log("hello preventInputDefault");
    evt.stopPropagation();
    console.log("hello stopPropagation");
  }
}

谢谢！

音频标签的.play（）在iOS（以及其他移动设备）上滞后

0 个答案: