javascript - サウンドと CSS アニメーションの同期

Question

サウンドを CSS アニメーションと同期させる簡単なコードを作成しました [サウンドには Howler JS ライブラリを使用します]。

これがコードです

CSS :

body{
  padding:100px;
}
#p1{
  -webkit-animation:spinL 1.2s linear infinite;
    -moz-animation:spinL 1.2s linear infinite;
    animation:spinL 1.2s linear infinite;
}

@keyframes spinL 
{ 
  /* 0% to 25% : 15 degree to 0 degree*/
  100% { -webkit-transform: translate(300px); transform:translate(300px); }
}

JS:

var sound = new Howl({
  src: ['https://www.dropbox.com/s/p9btintz9ot03id/22744__franciscopadilla__41-low-floor-tom.wav?raw=1']});

var p1Sound=document.getElementById("p1");

p1Sound.addEventListener("animationiteration",function(e){
  sound.play(); //play right when iteration begins
  setTimeout(function(){sound.play();}, 400);  //play after 0.4s
  setTimeout(function(){sound.play();}, 800); //play after 0.8s 
},false);

eventlistener を要素 p1 にバインドします。イベントは : アニメーションの反復。アニメーションの 1 回の繰り返しの周期は 1.2 秒です。

反復が発生するたびに: 0 秒 (アニメーションの開始と終了と同時に)、0.4 秒 (1/3 ウェイ)、0.8 秒 (2/3 ウェイ) でサウンドを再生します。(タイムアウトを使用して時間を調整します)

音は一定間隔 0.4 秒で再生されることになっています。しかし、最初(最初の数秒)は、音は本来のように再生されず、勝手に再生されます。意図したとおりに一定間隔で再生されるまで、数秒かかります。 どうしてこんなことに？これを修正する方法は？

次に、PC ではなく携帯電話を使用してリンクを開くと、サウンドがまったく再生されません。なぜ助けてください？[電話でハウラー JS を使用してサウンドを再生する簡単なコードを試してみたところ、動作するので、ハウラー JS に問題はないと思います]