項目：跨樂譜跟蹤彈跳球

Question

我可以向這個項目尋求幫助嗎？我有一些初步的成功，讓包含球形的div在音頻中及時滾動音樂的頂部。我只有音樂的頂尖，但是故意選擇了這個階段來徵求建議。正在進行的作品的網址是http://test.101drums.com/index.html，然後點擊課程「茶時間」並播放曲目。抱歉沒有完成索引頁面的樣式！我也在https://jsfiddle.net/tciprop/0quwsxd2/設置了一個小提琴，但這是由於某種原因不起作用。 您將看到我正在使用「ontimeupdate」事件來移動球，並將「currentTime/duration」的比率與一些數學運算結合起來考慮各種因素，例如開始位置，音頻中的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>

Answer 1

從這個計算器張貼Setting the granularity of the HTML5 audio event 'timeupdate'，看來你無法控制時，ontimeupdate事件將觸發。您的標記

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

更新刪除ontimeupdate屬性：

但是你可以做什麼，是手動控制時updateProgress被調用使用setInterval

<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> 

注意：你」使用​​而不是setInterval可以獲得更好的性能。要做到這一點，而不是調用setInterval你會：

requestAnimationFrame(updateProgress); 

而且你會修改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); 
}