使用audio-currentTime毫秒Jquery创建音频步进/节拍查看器

Question

我正在开发一个步序器/查看器，它可以播放120bpm的节拍(每秒2次(，当它达到几分之一秒时，它应该相应地点亮div/框。它并没有像预期的那样工作。。。我读到currentTime应该支持毫秒，但有些地方不对。有可能以毫秒为单位获得当前的html5视频时间帧吗？只要它一演奏就立刻把所有的垫子都亮成红色，当它不在那一步/节拍上时不会去掉红色。

<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

我终于弄明白了，现在它工作了。。。需要执行<amp&>(我注意到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"); 
}