项目：跟踪乐谱中的弹跳球

Question

我可以就此项目寻求帮助吗？我取得了一些初步的成功，得到了一个 div 包含一个球形的球形，可以随着音频及时滚动到乐谱的顶部。只到音乐的顶线，特意选在这个阶段求教。正在进行的工作的 url 是 http://test.101drums.com/index.html and click on the lesson "Tea Time" and play the track. Apologies for not completing the styling for the index page! I have also set up a fiddle at https://jsfiddle.net/tciprop/0quwsxd2/ 但由于某种原因这不起作用。你会看到我正在使用 "ontimeupdate" 事件来移动球，并且 "currentTime/duration" 的比率与一些数学计算允许各种因素，例如开始位置，音频中的 2 小节介绍，以及乐谱图像的尺寸。我有一个非常生涩的球！我将不得不为不同的乐谱布局开发这个，但我选择了课程范围内最常见的格式来开始。我可能也可以整理数学。我们将不胜感激地接受所有建议，也许从让 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

从这个 Whosebug post 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);
}

项目：跟踪乐谱中的弹跳球

Project: Tracking a bouncing ball across a music score

html

javascript

css

audio-player