jquery - 使用音频currentTime毫秒创建音频步进/拍子查看器

Question

我正在开发一个步进音序器/查看器，它播放120bpm的拍子(每秒2拍)，当击中几分之一秒时，它应相应地点亮div / box。它没有按预期的方式工作...我读到currentTime应该支持毫秒，但是有些不正确。 Is it possible to get the current html5 video timeframe with milliseconds?播放后立即立即将所有打击垫点亮为红色，当未在该步/拍子上消除红色时，不会将其消除。

<div class="block">
    <div class="pad p1"></div>
    <div class="pad p2"></div>    
    <div class="pad p3"></div>    
    <div class="pad p4"></div>    
    <div class="pad p5"></div>    
    <div class="pad p6"></div>    
    <div class="pad p7"></div>    
    <div class="pad p8"></div>    
</div>

<audio id="beat" controls loop autoplay>
<source src="beattest.wav" type="audio/wav">
</audio>


   <script>
    if (beat.currentTime < 0.25) {

            $(".p1").css("background-color", "red");
            $(".pad").not(".p1").css("background-color", "#0c2216");
    }
    if (beat.currentTime < 0.5) {

            $(".p2").css("background-color", "red");
            $(".pad").not(".p2").css("background-color", "#0c2216");
    }
    if (beat.currentTime < 0.75) {

            $(".p3").css("background-color", "red");
            $(".pad").not(".p3").css("background-color", "#0c2216");
    }
    if (beat.currentTime < 1) {

            $(".p4").css("background-color", "red");
            $(".pad").not(".p4").css("background-color", "#0c2216");
    }
   </script>

到目前为止，我也没有运气尝试过:

        var audio = document.getElementById('beat');
audio.addEventListener('timeupdate',function(){
    window.currentTimeMs = audio.currentTime*1000;
    console.log(currentTimeMs);
    if (beat.currentTimeMs < 250) {

        $(".p1").css("background-color", "red");
        $(".pad").not(".p1").css("background-color", "#0c2216");
    console.log('1');
}
if (beat.currentTimeMs < 500) {

        $(".p2").css("background-color", "red");
        $(".pad").not(".p2").css("background-color", "#0c2216");
}

},false);

Answer 1

我终于弄清楚了，它现在可以工作了……需要做一个<&&>(我发现currentTime永远也不会处于完美/一致的范围内，并且会波动):

var audio = document.getElementById('beat');
audio.addEventListener('timeupdate',function(){
    window.currentTimeMs = audio.currentTime*1000;

if (currentTimeMs < 250) {  
    $(".p1").css("background-color", "red");
    $(".pad").not(".p1").css("background-color", "#0c2216");     

}
if (currentTimeMs < 500 && currentTimeMs > 250) {
        $(".p2").css("background-color", "red");
        $(".pad").not(".p2").css("background-color", "#0c2216"); 

}
if (currentTimeMs < 750 && currentTimeMs > 500) {
        $(".p3").css("background-color", "red");
        $(".pad").not(".p3").css("background-color", "#0c2216");     

}
if (currentTimeMs < 1000 && currentTimeMs > 750) {
        $(".p4").css("background-color", "red");
        $(".pad").not(".p4").css("background-color", "#0c2216"); 

}