Question

调用点击/点击每个div时应触发的音频会产生加载时滞，特别是对于移动设备。

有没有办法可以整合javascript以便让录音加载和播放更快？

在这里看演示： https://codepen.io/db13/pen/53525608544bf70c97ed0bf564a5efcc

HTML：

    <div id="header"></div>

<div id="mainWrapper">

  <div id="main">
    <div id="row-5">
      <div onclick="stopPlayHTMLBeep();" id="item01"></div>
      <div onclick="stopPlayHTMLSassy();" id="item02"></div>
      <div onclick="stopPlayHTMLhole();" id="item03"></div>
      <div onclick="stopPlayHTMLsnail();" id="item04"></div>
      <div id="item05">
      </div>
    </div>
    <div id="row-5">
      <div id="item01">
      </div>
      <div id="item02">
      </div>
      <div id="item03">
      </div>
      <div id="item04">
      </div>
      <div id="item05">
      </div>
    </div>
    <div id="row-5">
      <div id="item01">
      </div>
      <div id="item02">
      </div>
      <div id="item03">
      </div>
      <div id="item04">
      </div>
      <div id="item05">
      </div>
    </div>
    <div id="row-5">
      <div id="item01">
      </div>
      <div id="item02">
      </div>
      <div id="item03">
      </div>
      <div id="item04">
      </div>
      <div id="item05">
      </div>
    </div>
    <div id="row-5">
      <div id="item01">
      </div>
      <div id="item02">
      </div>
      <div id="item03">
      </div>
      <div id="item04">
      </div>
      <div id="item05">
      </div>
    </div>
    <div id="row-5">
      <div id="item01">
      </div>
      <div id="item02">
      </div>
      <div id="item03">
      </div>
      <div id="item04">
      </div>
      <div id="item05">
      </div>
    </div>

  </div>
</div>







<audio id="beep" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/263133__pan14__tone-beep.wav" preload="auto"></audio>

<audio id="sassy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/20180306-202037.m4a" preload="auto"></audio>


<audio id="hole" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/20180306-225920.m4a" preload="auto"></audio>

<audio id="snail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/20180306-231547.m4a" preload="auto"></audio>

JS：

    function stopPlayHTMLBeep () {
  document.getElementById("beep").load();
  document.getElementById("beep").play();
}


function stopPlayHTMLSassy () {
  document.getElementById("sassy").load();
  document.getElementById("sassy").play();
}


function stopPlayHTMLhole () {
  document.getElementById("hole").load();
  document.getElementById("hole").play();
}

function stopPlayHTMLsnail () {
  document.getElementById("snail").load();
  document.getElementById("snail").play();
}

Answer 1

在元素加载后立即尝试在所有这些方法上调用.load()方法。

<audio id="beep" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/263133__pan14__tone-beep.wav" preload="auto"></audio>

<audio id="sassy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/20180306-202037.m4a" preload="auto"></audio>


<audio id="hole" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/20180306-225920.m4a" preload="auto"></audio>

<audio id="snail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/20180306-231547.m4a" preload="auto"></audio>

<script>
document.getElementById("beep").load();
document.getElementById("sassy").load();
document.getElementById("hole").load();
document.getElementById("snail").load();
</script>

使用Javascript加载音频

1 个答案: