我可以请求这个项目的一些帮助吗?我已经初步成功获得了一个包含球形的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;
答案 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);
}