ソースコード

Vue.jsで作ったのでこんな感じです。

測定は読み込みではなくてあくまで.play()部分です。

<template>
  <div>
    <button @click="beep">Beep</button>
  </div>
</template>

<script>
〜〜
methods: {
    beep: function() {
      const beep = new Audio('/sounds/Ping.wav');
      beep.addEventListener('play', (s) => {
        const tm = new Date();
        console.log(s.type, tm - start);
      });
      beep.addEventListener('ended', (s) => {
        const tm = new Date();
        console.log(s.type, tm - start);
      });
      const start = new Date();
      beep.play();
    }
〜〜
<script>

測定結果

Macでは再生開始までは0 msecや1 msecでほぼタイムラグがありませんが、iPhone8だと18〜20msecほどになりました。

なんとかならないものか...