项目:跟踪音乐乐谱中的弹跳球

时间:2016-03-09 21:06:47

标签: javascript html css audio-player

我可以请求这个项目的一些帮助吗?我已经初步成功获得了一个包含球形的div,可以及时滚动音乐乐谱的顶部和音频。我只有音乐的顶线,但故意选择这个阶段寻求建议。正在进行的工作的网址为http://test.101drums.com/index.html,然后点击课程"茶时间"并播放赛道。抱歉没有完成索引页面的样式!我还在https://jsfiddle.net/tciprop/0quwsxd2/设置了一个小提琴,但由于某些原因这不起作用。 你会看到我正在使用" ontimeupdate"移动球的事件和"当前时间/持续时间"使用一些数学来考虑各种因素,例如开始位置,音频中的2 bar介绍以及乐谱图像的尺寸。 我有一个非常生涩的球!我将不得不为不同的乐谱布局开发这个,但是在课程范围内选择了最常用的格式。 我也可以整理数学。我们将非常感激地收到所有建议,也许从让小提琴开始工作开始。它似乎在您运行代码段时起作用。 小提琴代码是:



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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