javascript - 元素 : Tracking a bouncing ball across a music score

Question

我可以为这个元素寻求一些帮助吗？我取得了一些初步的成功，让一个包含球形的 div 可以随着音频及时滚动到乐谱的顶部。只到音乐的顶线，特意选在这个阶段求教。正在进行的工作的 URL 是 http://test.101drums.com/index.html然后单击类(class)“下午茶时间”并播放轨道。抱歉没有完成索引页面的样式!我还在 https://jsfiddle.net/tciprop/0quwsxd2/ 设置了一个 fiddle 但由于某种原因，这是行不通的。你会看到我正在使用“ontimeupdate”事件来移动球和“currentTime/duration”的比率以及一些数学以考虑各种因素，例如开始位置，音频中的 2 小节介绍以及乐谱图像。我有一个非常生涩的球!我将不得不为不同的乐谱布局开发这个，但我选择了类(class)范围内最常见的格式来开始。我可能也可以整理数学。我们将不胜感激地接受所有建议，也许从让 fiddle 开始工作开始。当您运行代码片段时，它似乎有效。 fiddle 代码是:

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>

Answer 1

来自这篇 StackOverflow 帖子 Setting the granularity of the HTML5 audio event 'timeupdate' , 您似乎无法控制 ontimeupdate 事件何时触发。

然而，您可以做的是手动控制何时使用 setInterval 调用 updateProgress:

// 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);

并且您可以通过调用 requestAnimationFrame 来修改 updateProgress 以对另一个更新进行排队:

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);
}