WebAudioSequencer.js

Download webaudiosequencer.js v0.1

Installation

Démo n° 1

Séquencer le sample "basse.mp3" sur le 1er temps d'une mesure séquencée à 160 Bpm.Tester

/* Initialise le driver Audio */                         
				webaudiosequencer.init();
				
                /* Jouer les données audio dès que celles-ci sont chargées */
                webaudiosequencer.onReady( webaudiosequencer.start );

				/* Charge le fichier basse.mp3 sur le temps 0 de la mesure, le volume est valorisé à 80% */
				var audioEvent = new webaudiosequencer.AudioEvent( 0, "sound/basse.mp3", 80 );
				
				/* Valoriser le nombre de beats par minutes */
				webaudiosequencer.setBPM( 160 );
				
				/* Ajouter l'évènement audio au moteur Audio */
				webaudiosequencer.addEventGenerator( audioEvent );			
				

Démo n° 2

Jouer une phrase rythmique sur une mesure séquencée à 180 Bpm.Tester

/* Initialise le driver Audio */
				webaudiosequencer.init();
                
                /* Jouer les données audio dès que celles-ci sont chargées */
                webaudiosequencer.onReady( webaudiosequencer.start );

                /* Créer un objet composite AudioSequence ( 1 séquence = 1 mesure ) */
				var audioSequence = webaudiosequencer.AudioSequence();				
				
				/* position 0 sur un grille de 16 beats (= 0/16) */
                audioSequence.add( new webaudiosequencer.AudioEvent( 0, "sound/basse.mp3", 80 ) );		 
				/* position 4 sur un grille de 16 beats (= 4/16) */
                audioSequence.add( new webaudiosequencer.AudioEvent( 0.25, "sound/tonique.mp3", 80 ) );	 
				/* position 6 sur un grille de 16 beats (= 6/16) */
                audioSequence.add( new webaudiosequencer.AudioEvent( 0.375, "sound/tonique.mp3", 80 ) ); 
				/* position 12 sur un grille de 16 beats (= 12/16) */
                audioSequence.add( new webaudiosequencer.AudioEvent( 0.75, "sound/claque.mp3", 80 ) );	 
								
				/* Valoriser le nombre de beats par minutes */
				webaudiosequencer.setBPM( 180 );
				
				/* Ajouter la séquence au moteur Audio */
				webaudiosequencer.addEventGenerator( audioSequence );			
				

Démo n° 3

Jouer deux phrases rythmiques en même temps à 160 Bpm et 220 Bpm.Tester

/* Initialise le driver Audio */
				webaudiosequencer.init();
				
                /* Jouer les données audio dès que celles-ci sont chargées */
                webaudiosequencer.onReady( webaudiosequencer.start );

                /* Séquence 1 */
                var audioSequence1 = new webaudiosequencer.AudioSequence();

                audioSequence1.add( new webaudiosequencer.AudioEvent( 0, "sound/basse.mp3", 70 ) );
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0.25, "sound/tonique.mp3", 70 ) );
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0.375, "sound/tonique.mp3", 70 ) );
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0.75, "sound/claque.mp3", 70 ) );

                /* Séquence 2 */
                var audioSequence2 = new webaudiosequencer.AudioSequence();

                audioSequence2.add( new webaudiosequencer.AudioEvent( 0, "sound/slap.mp3", 40 ) );
                audioSequence2.add( new webaudiosequencer.AudioEvent( 0.415, "sound/slap.mp3", 40 ) );
                audioSequence2.add( new webaudiosequencer.AudioEvent( 0.5, "sound/slap.mp3", 40 ) );
                audioSequence2.add( new webaudiosequencer.AudioEvent( 0.75, "sound/ton.mp3", 50 ) );
                audioSequence2.add( new webaudiosequencer.AudioEvent( 0.90, "sound/ton.mp3", 50 ) );

                /* Après 10 secondes modifier le bpm */
                setTimeout( function () { webaudiosequencer.setBPM( 220 ); }, 10000 );

                /* Sinon par défault on commence à 160 BPM */
                webaudiosequencer.setBPM( 160 );

                webaudiosequencer.addEventGenerator( audioSequence1 );
                webaudiosequencer.addEventGenerator( audioSequence2 );	
				

Démo n° 4

Utiliser l'objet Sequencer pour jouer 2 mesures l'une après l'autre.Tester

/* Initialise le driver Audio */
				webaudiosequencer.init();
				
                /* Jouer les données audio dès que celles-ci sont chargées */
                webaudiosequencer.onReady( webaudiosequencer.start );

				/* Séquencer 1 */
                var audioSequence1 = new webaudiosequencer.AudioSequence();
                
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0, "sound/basse.mp3", 80 ) );
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0.25, "sound/tonique.mp3", 80 ) );
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0.375, "sound/tonique.mp3", 80 ) );
                audioSequence1.add( new webaudiosequencer.AudioEvent( 0.75, "sound/claque.mp3", 80 ) );
                
				/* Séquence 2 */				
                var audioSequence2 = new webaudiosequencer.AudioSequence();
				
                audioSequence2.add( new webaudiosequencer.AudioEvent( 0, "sound/djabara.mp3", 50 ) );
                audioSequence2.add( new webaudiosequencer.AudioEvent( 0.50, "sound/djabara.mp3", 50 ) );
                
				/* Séquencer */
				var audioSequencer = new webaudiosequencer.AudioSequencer();
				
				audioSequencer.add( audioSequence1 );
				audioSequencer.add( audioSequence2 );
												
				/* ajouter le séquencer au moteur Audio */
                webaudiosequencer.addEventGenerator( audioSequencer );								
				

Documentation

webaudiosequencer

webaudiosequencer est l'objet principal de la librairie.

webaudiosequencer.init()

La méthode static init ne prend aucun paramètre, elle est le point d'entrée de la librarie et son appel est obligatoire. En interne, cette méthode crée un objet AudioContext et appelle la méthode createScriptProcessor sur celui-ci. Un évènement onaudioprocess est distribué en continu dans lequel un socket (=tampon ou buffer) reçoit des données audio à lire. par défaut ce socket reçoit 1024 échantillons par évènements mais celui-ci est paramétrable par la méthode webaudiosequencer.setBufferSize(). Attention sur IOS il est nécessaire d'appeler cette méthode en réponse à un évènement utilisateur (clic d'un bouton par exemple). En effet pour des questions de sécurité Apple ne lève pas l'évènement onaudioprocess au chargement d'une page web.

new webaudiosequencer.AudioEvent( time, soundurl, gain )

La classe AudioEvent représente un sample audio et peut être représenter comme une note de musique. En effet, elle porte les samples audio à séquencer et prend 3 paramètres :

time est un décimal entre 0 et 1. Il représente la position de la note dans une mesure. Le début de la mesure est 0 et la fin est 1. Par exemple si time = 0 la note sera jouée sur le premier temps de la mesure telle une ronde (voir Démo n°1). Pour jouer les 4 temps de la mesure, il suffit de découper la mesure en quatre avec time = 0, time = 1/4, time = 1/2 et time = 3/4. Les sons peuvent être joués très rapprochés puisque time peut avoir jusqu'à 3 chiffres après la virgule. Au bout de 4 chiffres après la virgule, l'enchainement des notes est inaudible et paraissent être jouées en même temps.

soundurl permet de définir le chemin vers un fichier audio Wav ou Mp3. La librairie supporte seulement les fichiers audio stéréo d'une fréquence de 44100Hz. De plus, l'url doit faire parti du même domaine .

gain est un entier entre 0 et 100 et représente le volume de l'échantillon audio. Contrairement au 2 premiers paramètres, le gain peut être lu et modifié en cours d'exécution par les méthodes getGain(), setGain( value ) de l'objet AudioEvent.

new webaudiosequencer.AudioSequence()

La classe AudioSequence représente un conteneur ou une mesure en solfège dans laquelle sont ajoutées des notes de musique représentées par des objets AudioEvent. La classe AudioSequence implémente les méthodes suivantes : add, remove, clear, getChildren et getChildIndex.

add permet d'ajouer un objet AudioEvent, remove prend en paramère l'objet AudioEvent à supprimer, clear supprime tous les objets AudioEvent, getChildren retourne tous les objets AudioEvent sous forme d'un tableau et getChildIndex retourne l'objet AudioEvent à la position passée en paramètre.

new webaudiosequencer.AudioSequencer()

La classeAudioSequencer représente un conteneur d'objet AudioSequence. Cette classe a la particularié d'enchainer les objets AudioSequence les uns après les autres. La classe AudioSequencer implémente les méthodes suivantes : add, remove, clear, getChildren et getChildIndex

webaudiosequencer.addEventGenerator( IAudioEventProcessor )

La méthode static addEventGenerator permet d'ajouter les données audio au moteur principal avant leur lecture. Elle reçoit en paramètre un objet de type IAudioEventProcessor. Il existe 3 objets de ce type dans la librairie : AudioEvent, AudioSequence et AudioSequencer.

webaudiosequencer.removeEventGenerator( IAudioEventProcessor )

La méthode static removeEventGenerator permet de supprimer un objet de type IAudioEventProcessor pour que celui-ci ne soit plus joué par le moteur principal.

webaudiosequencer.clearEventGenerator()

La méthode static clearEventGenerator permet de supprimer tous les objets de type IAudioEventProcessor pour que ceux-ci ne soient plus joués par le moteur principal.

webaudiosequencer.start()

La méthode static start permet de commencer la lecture des données audio.

webaudiosequencer.stop()

La méthode static stop permet de stopper la lecture des données audio.

webaudiosequencer.isPlaying()

La méthode static isPlaying return true si les données audio sont en cours de lecture.

webaudiosequencer.listen( callback )

La méthode static listen appelle la fonction de callback passée en paramère dès q'un sample audio est joué.

webaudiosequencer.setBPM( value )

La méthode static setBPM reçoit en paramètre un entier qui valorise le nombre de battements par minutes. Cette métode peut être appelée pendant la lecture des données audio.

webaudiosequencer.getGainValue()

La méthode static getGainValue retourne un décimal entre 0 et 1 représenant le volume principal actuellement utilisé.

webaudiosequencer.setGainValue( value )

La méthode static setGainValue permet de modifier le volume principal. Elle reçoit en paramètre un décimal entre 0 et 1 bornes comprises.

webaudiosequencer.onReady( callback )

La méthode static onReady permet de s'assurer que le chargement des échantillions audio est terminé et que la lecture peut commencer. Elle reçoit en paramètre une fonction de callback qui s'exécute lorsque la liste des samples audio référencés par les classes AudioEvent sont chargés et converti en tableaux d'octets. Il est préconisé d'appeller la méthode start dans cette méthode : webaudiosequencer.onReady(webaudiosequencer.start).

webaudiosequencer.setBufferSize( value )

La méthode static setBufferSize permet de modifer la taille du socket (= tampon ou buffer) utilisé pour traiter les données audio. Elle reçoit en paramètre un entier qui prend les valeurs 256, 512, 1024, 2048, 4096, 8192, 16384. Plus la taille du socket est faible plus les risques de latence sont réduits mais plus les ressources systèmes sont solicités. Une taille de buffer de 1024 échantillons fonctionnera correctement sur un ordinateur de bureau mais ne marchera pas aussi bien sur un mobile avec des performances moins élevés. Par défaut la librairie initialise la taille du buffer à 1024 échantillons. Ce paramètre peut être ajusté lorsque les échantillons audio ne sont pas joués correctement.

webaudiosequencer.getBufferSize()

La méthode static getBufferSize retourne la taille du socket (= tampon ou buffer) actuellement utilisée pour traiter les données audio.

Fork me on GitHub