TP1 Web Avancé

Installation d'un serveur web minimal capable de servir des pistes audio

Vous pourrez utiliser une autre technologie si vous préférez (Apache/Php, Java EE, Ruby, Python) mais pour le moment, nous vous donnons un exemple (hyper simple, facile à reproduire avec un autre serveur) qui utilise le micro serveur web NodeJS et me module d'extension express, qui permet de transformer NodeJS en serveur web.

Télécharger et installer NodeJS

• Resource externe : un livre en français complet sur NodeJS, écrit par d'anciens élèves de chez nous  http://nodejs.xomis.com/fr/

Allez sur http://nodejs.org/ téléchargez et installez le serveur NodeJS. Une fois installez, ouvrez une fenêtre de commande et tapez "node --version", cela doit vous répondre "0.10.xxx" si tout va bien. Le "xxx" varie en fonction de la version. Si vous l'avez déjà installé vérifiez juste que vous n'avez pas une trop vieille version.

Récupérez cette archive : Multitrackv1.1.zip  (note : cette version corrige plusieurs bugs de la 1.0 qui a été distribuée lors du TP1. On peut lire plusieurs chansons consécutivement, pause et jumpto marche, on peut cliquer dans le morceau pour avancer, les boutons mute/unmute sont cohérents, le code est toujours pourri mais c'est fait exprès !)

Dezippez la dans un répertoire qui sera le répertoire de votre projet, par exemple "multitrackTP1".

Demandez ensuite à vos enseignants de vous donner l'archive du dossier "multitrack" contenant des pistes de musique. Il faut que ce dossier soit aussi dans le dossier "multitrackTP1". Dezippez le. On vous passera un dossier beaucoup plus complet bientôt, avec une trentaine de chansons.

Faites un cd à l'intérieur de ce répertoire, vous devriez voir :

• index.html : la page d'accueil du projet
• server.js : le code de l'application côté serveur. NodeJS exécute des applications écrites en JavaScript
• un dossier js contenant sound.js, buffer-loader.js, libs, ce dernier répertoire contenant la librairie jQuery
• Un dossier "multitrack" contenant pour le moment deux chansons en multipistes, si vous regardez à l'intérieur, pour chaque piste mP3 il y a aussi un png qui est le dessin de l'échantillon correspondant.

Il vous faut maintenant installer le module express pour NodeJS:

• Depuis le répertoire (faite un cd dans "multitrackTP1"), tapez la commande "npm install express"

"npm" (pour Node Package Manager) est la commande qui permet d'installer dans des projets des modules complémentaires pour Node JS.

Si tout se passe bien, vous devriez avoir maintennt un répertoire comme ceci :

 Test de l'application

Vous pouvez tester l'application en lançant la commande "node server.js" et en ouvrant "localhost:8081" dans votre navigateur.

Avant de faire quoi que ce soit, ouvrez la console de debug de votre navigateur pour regarder les traces (onglet "console").

Je recommande de tester avec le dernier Firefox, beaucoup plus rapide pour décoder les pistes, ou avec Chrome (mais le décodage des pistes prend un peu de temps). 

Pour tester : ouvrir le menu déroulant et choisir la seconde piste disponible (deep purple), attendre que le bouton "start" devienne actif et cliquer dessus. La chanson démarre. Vous pouvez faire pause/stop/start et muter des pistes.

Etude de l'application côté serveur

Regardons le code de l'application côté serveur :

Bon, ça a l'air un peu compliqué mais n'ayons pas peur et regardons d'abord ce que ça fait...

Lignes 1-19 : initialisation du serveur

On va charger les modules nécessaires : "fs" pour "filesystem", permet de manipuler des fichiers, des répertoires. C'est avec ce module qu'on a pu implémenter la fonction getFiles() située tout à la fin du fichier. Cette fonction lit le contenu d'un répertoire et renvoie un tableau contenant les fichiers dans ce répertoire.

La ligne :

Indique que le serverur sera capable de renvoyer des fichiers statiques (par ex "/multitrack/amy_rehab/voix.mp3"), sans cette ligne on ne peut demander de fichiers via l'URL, seuls les routages explicites figurant dans la configuration du serveur ne seront pris en compte. 

Un tel routage est présent aussi dans la configuration, pour indiquer la page qui sera envoyée par défaut :

Etc...

Ensuite nous avons les différents web services qui répondent à des requêtes GET... Celui-ci par exemple réponds à l'URL "/track" et il renvoie la liste des pistes disponibles sur le serveur, en JSON. Essyez donc d'ouvrir "locahost:8081/track et regardez ce que vous recevez !

On reçoit : 

 ["amy_rehab","beatles_64","beatles_submarine","bob_love","bowis_dance","clash_should","deep_smoke","depeche_never",
"dire_sultans","doors_2times","eagles_hotel","handrix_castles","jamesbrown_get","megadeth_peace","metallica_sandman",
"mj_beatit","motorhead_ace","muse_uprising","nirvana_smell","offspring_come","police_roxanne","queen_champions",
"queen_dsmn","radiohead_creep","ramones_sedated","ratm_killing","rem_religion","rhcp_bridge","rhcp_give",
"sg_soundsilence","soundgarden_black","sp_zero","spice_wannabe","sublime_wig","system_chop","trust_antisocial",
"village_ymca","weezer_say","yes_owner"]

C'est un tableau JSON. Vous vous doutez qu'on l'utilise pour la construction du menu déroulant dans l'interface graphique.

De même, on a défini des web services pour les URLs suivants :

• "/track" : renvoie la liste des chansons,
• "/track/song_name", par exemple "/track/amy_rehab" ou "/track/deep_smoke" renvoie la liste des pistes pour une chanson, exemple: 
  
{"id":"deep_smoke","instruments":[{"name":"basse","sound":"basse.mp3","visualisation":"basse.png"},{"name":"batterie","sound":"batterie.mp3","visualisation":"batterie.png"},{"name":"guitare","sound":"guitare.mp3","visualisation":"guitare.png"},{"name":"voix","sound":"voix.mp3","visualisation":"voix.png"}]}


• "/track/song_name/visualisation/image.png", par exemple "http://localhost:8081/track/deep_smo...ation/voix.png", renvoie l'image de l'echantillon sonore correspondant à la piste de voix de la chanson 'deep_smoke"
•  
• "/track/song_name/sound/sound.mp3", par exemple http://localhost:8081/track/deep_smoke/sound/voix.mp3, renvoie le fichier audio de la piste de voix de la chanson "deep_smoke"

Voilà, vous pourrez regarder en détails comment ceci est implémenté.

Vous avez compris qu'avec ce code serveur, on va pouvoir obtenir toutes les informations que nous désirons depuis un client Ajax. 

Contact avec la librairie Web Audio

Supportée par tous les browsers récents dans leurs dernières version sauf IE. Quelques soucis sous IOS mais ça marche à 99%.

• Resources externes :
  • Specification [w3.org]
  • Introduction to the WebAudio API (official version), by Chris Wilson, a Chrome developer.
  • Présentation de la Web Audio version webkit (2012), certains trucs sont obsolètes mais ça donne une idée de toutes les possibilités. Les transparents sont superbes : http://webaudio-io2012.appspot.com/#1
  • Pour la compatibilité : comment transformer les exemples webkit only en exemples qui respectent la nouvelle spécification : https://developer.mozilla.org/en-US/...d_AudioContext
  • Lots of demos by Chris Wilson that are implemented using AudioContext (the official version, from current spec). Run with Chrome or FF or opera or safari..

La librairie Web Audio est assez complexe, et son API a changé cette année pour devenir "stable". On trouve encore de nombreux exemples sur le web qui utilisent exclusivement la version "WebKit" de cette API. Vous devrez utiliser la version "standard" de l'API, qui fonctionne avec Chrome, Safari, les dernières versions de Firefox, Opera, Chrome android. Seul IE n'est pour le moment pas capable de faire tourner des applications Web Audio.

Le principe de WebAudio consiste à charger des échantillons en mémoire, le plus souvent en Ajax via ce que l'on appelle XhR 2, la nouvelle version de XmlHttpRequest. Cette version permet notamment de faire du transfert binaire natif, de monitorer la progression des uploads et downloads et de faire des requêtes cross domains plus facilement.

Une fois les échantillons chargés en mémoire il faut construire un graphe connectant les échantillons aux haut parleurs et démarrer la lecture. Si on veut, on peut ajouter des noeuds intermédiares dans ce graphe, comme des controles de volume, des analyseurs de fréquence, des effets spéciaux (égaliseurs, compresseurs, echo, reverb, etc.).

Je vous propose tout d'abord de lire au moins la première moitié de cet excellent article d'introduction à Web Audio : http://www.html5rocks.com/en/tutoria...ebaudio/intro/

Puis de faire tourner ce petit exemple qui montre comment charger un échantillon et le lire : 

Copiez ce code dans un fichier "test.html" et copiez le fichier dans le répertoire "multitrackTP1" et testez avec l'URL "http://localhost:8081/test.html", attention, l'échantillon sonore commence par 5s de silence...

A remarquer :

1. On charge le fichier en Ajax en mode binaire, dans la fonction loadSound, avec request.responseType = "arraybuffer";
   
   
2. Les chargements sont asynchrones, car en JavaScript, d'une manière générale, tout ce qui peut prendre du temps, est asynchrone. On donne donc une fonction de callback qui sera appelée quand le travail est terminé. Ici, c'est la fonction request.onload qui est appelée lorsque le fichier demandé est arrivé.
    
3. Une fois le fichier arrivé, WebAudio a besoin de le décoder. En effet, on va charger un fichier mp3 mais ce fichier est compressé. Pour des besoins de performances on travaille avec des échantillons non compressés en mémoire. La fonction loadSound appelle donc la fonction decode() quand le fichier est arrivé. Comme le décodage peut prendre du temps, il est lui aussi asynchrone ! Regardez le callback dans la fonction decode() !
    
4. Une fois le fichier récupéré et décodé il est conservé dans la variable globale soundBuffer, on va donc pouvoir l'utiliser !
    
5. Enfin, on va pouvoir jouer le son, voir la fonction playSound(), pour jouer un son il faut construire un graphe puis appeler la méthode start(delay, tempsDépart) sur un noeud correspondant à un échantillon décodé.
    
6. Pour jouer un son il est nécessaire de construire un "graphe audio", on va donc en faire un très simple avec comme origine un noeud correspondant à l'échantillon décodé, et comme destination les haut parleurs de l'ordinateur (noeud prédéfini appelé context.destination), c'est la fonction buildGraph() qui s'en charge.
   
    
7. Attention, pour arrêter un son, la méthode stop(delay) d'un noeud de type échantillon, le détruit. C'est pour cela que chaque fois qu'on va vouloir rejouer un son après l'avoir arrêté il faut reconstruire le noeud et le reconnecter : on appelle buildGraph systématiquement depuis playSound()

Pour charger plusieurs sons et les décoder avant de pouvoir les jouer

Comment faire dans le cas qui nous intéresse, c'est à dire charger plusieurs fichiers audio, puis les décoder avant de pouvoir construire un graphe pour les lire ? Le code JavaScript pour faire cela n'est pas évident car tous les appels Ajax sont asynchrones, et les appels au décodage des fichiers également.

L'article http://www.html5rocks.com/en/tutoria...ebaudio/intro/ propose une classe BufferLoader permettant d'effectuer un chargement asyncrhone de plusieurs fichiers audio + leur décodage. L'article donne un exemple d'utilisation. Nous l'avons également utilisée dans le prototype de multitracker, dans le fichier sound.js, fonction loadAllSoundSamples()...

Ou tracks est le tableau des fichiers audio à charger.

Travail à faire

Bon, vous avez vu comment implémenter un petit serveur qui propose via des URLs de web services de fournir les données nécessaires à l'application. Nous avons vu le principe de chargement asyncrhone et de décodage des échantillons pour les jouer avec Web Audio, puis également comment on peut charger plusieurs échantillons en Ajax.

Nous vous proposons 1) de regarder un peu le code du prototype fourni et 2) de partir de zéro pour en écrire un à vous. Pour le moment oubliez la partie "canvas/dessin/animation", vous pourrez vous contenter de récupérer simplement les images des échantillons, les afficher, etc.

3) de voir comment on a pu connecter au graphe un controleur de volume, comment on a pu muter les pistes, etc.

Le but du jeu n'est pas que vous refassiez notre proto, mais que vous l'ayez sous la main pour voir comment certaines fonctionnalités ont été implémentées en vue de créer votre propre prototype.