Projet: Suivre une balle qui rebondit sur une partition musicale

Question

Puis-je demander de l'aide pour ce projet? J'ai eu un premier succès en obtenant un div contenant une forme de balle pour faire défiler le haut d'une partition de musique en temps avec l'audio. J'ai seulement atteint la première ligne de musique, mais j'ai délibérément choisi cette étape pour demander conseil. L'adresse pour le travail en cours est http://test.101drums.com/index.html et cliquez sur la leçon "Tea Time" et jouez sur la piste. Toutes mes excuses pour ne pas avoir complété le style de la page d'index! J'ai également mis en place un violon à https://jsfiddle.net/tciprop/0quwsxd2/ mais c'est pour une raison quelconque ne fonctionne pas. Vous verrez que j'utilise l'événement "ontimeupdate" pour déplacer la balle et le rapport de "currentTime/duration" avec quelques maths pour tenir compte de divers facteurs, tels que la position de départ, une introduction de 2 bars dans l'audio et les dimensions de l'image de partition de musique. J'ai une balle très saccadée! Je vais devoir développer cela pour différentes mises en page de partitions musicales, mais j'ai choisi le format le plus courant dans la gamme de cours pour commencer. Je pourrais probablement ranger les maths aussi bien. Tous les conseils seront reçus avec reconnaissance, peut-être en commençant par faire fonctionner le violon. Il semble fonctionner lorsque vous exécutez l'extrait de code. Le code violon est:

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

De cette Stackoverflow Setting the granularity of the HTML5 audio event 'timeupdate' publier, il semble que vous ne pouvez pas contrôler lorsque l'événement ontimeupdate se déclenche.

Ce que vous pouvez faire cependant, est le contrôle manuellement lorsque updateProgress est appelé à l'aide setInterval:

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

Mettez à jour votre balisage pour supprimer l'attribut 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> 

NOTE: Vous » ll aura une meilleure performance en utilisant requestAnimationFrame au lieu de setInterval. Pour ce faire, au lieu d'appeler setInterval vous le feriez:

requestAnimationFrame(updateProgress); 

Et vous modifier updateProgress à la file d'attente une autre mise à jour en appelant 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); 
}