使用Javascript加载音频

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>