javascript - 元素:在乐谱中跟踪弹跳球

我可以在这个项目上寻求帮助吗？我取得了一些初步的成功，使一个包含球形的div可以随着音频及时滚动到乐谱的顶部。我只了解音乐的最高音，但是故意选择了这个阶段来寻求建议。正在进行的工作的URL为http://test.101drums.com/index.html，然后单击“茶时间”课程并播放曲目。抱歉未完成索引页面的样式！我还在https://jsfiddle.net/tciprop/0quwsxd2/设置了一个小提琴，但是由于某种原因，它无法正常工作。
您将看到我正在使用“ ontimeupdate”事件通过一些数学运算来移动球和“ currentTime / duration”的比率，以考虑各种因素，例如开始位置，音频中的2小节介绍以及尺寸音乐乐谱图像。
我的球很生涩！我将不得不针对不同的乐谱布局进行开发，但是已经选择了上课范围内最常见的格式。
我可能也可以整理一下数学。我们将不胜感激地收到所有建议，也许首先是从摆弄小提琴开始。当您运行代码片段时，它似乎可以工作。
提琴代码是：

var audio = document.getElementById("lessonTrack");
var ball = document.getElementById("ball");
var lessonScore = document.getElementById("lessonScore");
ball.style.left = (0.071 * lessonScore.offsetWidth) + "px";
audio.load();
function updateProgress() {
  var ballarea = lessonScore.offsetWidth;
  if (audio.currentTime > (2 / 19 * audio.duration)) {
    ball.style.left = (0.071 * ballarea) + ((19 / 4 * (0.885 * ballarea)) * (audio.currentTime/audio.duration)) - (2 / 4 * (0.885 * ballarea)) + "px";
  }
}

#lessonScore
{
  width: 100%;
}
#ballarea
{
    position: relative;
}

#ball
{
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    position: absolute;
    top: 1vh;
    left: 1vw;
    background-color: #000;
}

<div id="ballarea">
    <img id="lessonScore" src="http://test.101drums.com/scores/02_teatime.jpg" alt="Score">
    <div id="ball"></div>
</div>
<audio id="lessonTrack" controls ontimeupdate="updateProgress()">
                <source id="mp3" src="http://test.101drums.com/tracks/mp3/02_teatime.mp3" type="audio/mpeg">
                <source id="ogg" src="" type="audio/ogg">
                Your browser does not support the audio player.
</audio>

最佳答案

从此StackOverflow帖子Setting the granularity of the HTML5 audio event 'timeupdate'看来，您无法控制ontimeupdate事件何时触发。

但是，您可以做的是手动控制使用updateProgress调用setInterval的时间：

// Update progress every 100ms
setInterval(updateProgress, 100);

更新您的标记以删除ontimeupdate属性：

<audio id="lessonTrack" controls>
                <source id="mp3" src="http://test.101drums.com/tracks/mp3/02_teatime.mp3" type="audio/mpeg">
                <source id="ogg" src="" type="audio/ogg">
                Your browser does not support the audio player.
</audio>

注意：使用requestAnimationFrame而不是setInterval将具有更好的性能。为此，您可以不用调用setInterval：

requestAnimationFrame(updateProgress);

您可以通过调用updateProgress来修改requestAnimationFrame以将另一个更新排队：

function updateProgress() {
  var ballarea = lessonScore.offsetWidth;
  if (audio.currentTime > (2 / 19 * audio.duration)) {
    ball.style.left = (0.071 * ballarea) + ((19 / 4 * (0.885 * ballarea)) * (audio.currentTime/audio.duration)) - (2 / 4 * (0.885 * ballarea)) + "px";
  }

  requestAnimationFrame(updateProgress);
}