Le spectre du son
Lonely LoeB - Stuck In The Hole Of My Mind
Lonely LoeB - Softer and Softer
Le Cochon 311 du Hell's Fire Club - I Know
Le Cochon 311 du Hell's Fire Club - He's A Monster
Quelques zesplications
Visualisation du spectre audio de sources audios et/ou vidéos HTML5 dans des canvas.
Petit plugin jQuery pour le fun (et aussi pour pouvoir placer facilement plusieurs objets spectrumSound dans la même page !).
Simple comme bonjour :
Inclure le plugin à sa page :
<script src="js/regalSpectrum-plugin.js"></script>
Déclarer les modules au domready :
$('.spectrumSound').regalSpectrum();
Oscilloscope (sinusoidView) et barres superposés (spectreView), couleur aléatoire et visualisation en cercles concentriques qui suit la barre de progression (circlesView) par défaut.
Fermeture des sons en cours de lecture lorsqu'on en lance un nouveau (stopOthers).
Possibilité de choisir un ou plusieurs types de visualisation et la couleur avec attributs data-values dans le HTML ou au moment de l'initialisation javascript du plugin :
data-values="{'spectreView':0, 'sinusoidView':1, 'circlesView':1, 'stopOthers': 0, 'color': '251,233,21'}"
$(this).regalSpectrum({'spectreView':0, 'sinusoidView':1, 'circlesView':1, 'stopOthers': 0});
Chapitrage possible avec visualisation sur la barre de progression.
<ul class="chapters-line">
<li><a href="#" data-time="0" data-end="198" class="chapter-line icon-arrow-down">Titre chapitre</a></li>
...
</ul>
data-time le timecode du début du chapitre en secondes.
data-end le timecode de la fin du chapitre en secondes.
class="chapter-line ..." obligatoire.
Ensemble à placer dans la structure :
<div class="seekbar"><div class="progress">
Lorsque la vidéo atteint data-time, on applique à chapter-line la classe active.
Lorsque la vidéo atteint data-end, on applique à chapter-line la classe done.
Bien sûr, ce plugin évoluera au gré des envies et des besoins.
Non-compatible avec IE (même EDGE), le plugin devient juste un player son ou vidéo avec simple barre de progression... dommage pour eux !