Question

我编写了简单的代码来同步声音和CSS动画 [我使用Howler JS库来获取声音。]

这里是code

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秒，

每次迭代发生时：我在播放声音 0s（开始和播放动画结束时）， 0.4秒（1/3路）和 0.8s（2/3路）。（使用超时来调整时间）

声音应该以0.4秒的恒定间隔播放。但是，在开始时（前几秒），声音并没有像预期的那样发挥，而是随意播放。它需要几秒钟，直到它按照预期的间隔播放。 为什么会这样？以及如何解决这个问题？

其次，如果我使用手机而不是PC打开链接，它就不会播放声音了。请帮忙为什么？ [我尝试使用简单的代码在电话中使用咆哮JS播放声音，并且它有效，所以我认为问题不在于咆哮JS]

使用CSS动画同步声音

0 个答案: