dans la ou les catégorie(s) : code et avec pour étiquette(s) :

À partir d’une petite boucle de batterie, voici comment travailler sur une pulsation avec GSAP.
Les timelines de GSAP utilisent comme unité de temps la seconde, la musique se base sur le BPM, battements par minute.

  • À 60 bpm, un temps par seconde, 0s 1s 2s 3s donne la pulsation ;
  • À 120 bpm (le tempo de la Marseillaise) 2 temps par seconde, 0s 0.5s 1s 1.5s donne la pulsation ;
  • À 88 bpm, c’est plus complexe, 0s 0.6818s 1.3636s 2.04545s (60/88*t)

GSAP a une fonction pour accélérer ou décélérer les timelines !

tl.timeScale(2); // double la vitesse
tl.timeScale(0.5); // divise par 2 la vitesse

L’astuce est de compter le nombre de temps dans l’extrait musical et de faire un timeScale(nombre de temps/durée de l’extrait).

Voici ma boucle de 8 temps.
http://www.orangefreesounds.com/funk-drum-loop/, elle dure 5,333333 secondes.

En écriture musicale de boite à rythmes sur https://drumbit.app/, j’obtiens ceci pour les 4 derniers temps (une petite variation d’ouverture de hit-hat):


beats.json à importer

La base SVG

Je vais utiliser 3 cercles, un rouge pour la grosse caisse (BD), un orange pour la caisse claire (SD) et un dernier jaune pour l’ouverture de la charleston.

  <svg width="800px" height="800px">
    <circle id="ho" cx="400" cy="400" r="50" fill="yellow"/>
    <circle id="sd" cx="500" cy="400" r="50" fill="#f60"/>
    <circle id="bd" cx="300" cy="400" r="50" fill="red"/>
  </svg>

Pour le son, je copie/colle pour créer une répétition.
Version 1 fois


Version 4 fois

GSAP est chargé via <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Le reste est en commentaire sur le code.

var audio = document.querySelector("audio");
var duration = 5.333333; // durée des 8 temps en seconde;
var beat = 8;
 
var tl = new TimelineMax({repeat:4}); 
tl.pause(); // antidémarrage 
tl.set("circle", { transformOrigin: "center center", opacity: 0 }); // réglage important pour le scale
 
/* la grosse caisse */
tl.to("#bd", 0.1, { scale: 4, opacity: 0.5 }, 0); // zoom rapide à 0 = 1er temps
tl.to("#bd", 0.9, { scale: 1, opacity: 0.0 }, 0.1); // dézoom à 0.1 temps pendant 0.9 temps
tl.to("#bd", 0.1, { scale: 4, opacity: 0.5 }, 2); // 2 = 3e temps
tl.to("#bd", 0.1, { scale: 1, opacity: 0.0 }, 2.1);
tl.to("#bd", 0.1, { scale: 4, opacity: 0.5 }, 2.5); // 2.5 = contretemps du 3e temps
tl.to("#bd", 0.1, { scale: 1, opacity: 0.0 }, 2.6);
 
/* (…) */
 
tl.to("#sd", 0.1, { scale: 4, opacity: 0.5 }, 1); // 1 = 2e temps
tl.to("#sd", 0.1, { scale: 1, opacity: 0.0 }, 1.1);
 
/* (…) */
 
tl.to("#ho", 0.4, { scale: 8, opacity: 0.5 }, 6.5); // 6.5 = contretemps du 3e temps de la 2e mesure à 4 temps
tl.to("#ho", 0.1, { scale: 0, opacity: 0 }, 6.9);
 
/* l'astuce */
tl.timeScale(beat / duration);
 
 
audio.addEventListener("play", function() {
  tl.play(0); // lecture quand on clique sur play
});
 
audio.addEventListener("pause", function() {
  tl.pause();
});

Version Codepen

See the Pen GSAP & BPM by Benoît Wimart (@benoitwimart) on CodePen.