Vous le savez, on peut lire des fichiers audio ou vidéo en HTML5 à l'aide des tags <audio> et <video>. Ces éléments viennent avec une très riche API qui permet de les contrôler via JavaScript.

L'API de ces éléments permet de récupérer le lecteur audio ou vidéo sous la forme d'un objet, et d'interagir avec lui en modifiant ses propriétés (par ex en changeant la propriété currentTime on va pouvoir lire d'autres parties du fichier audio ou vidéo), en appelant des méthodes (play, stop, pause, etc.), mais aussi en écoutant les événements qu'il émet (onprogress, onload, etc.)

Vous trouverez de nombreux exemples montrant comment utiliser cette API dans le Module 2.2 du MOOC "HTML5 Coding essentials and best practices".

Travail à faire

Créer une page HTML avec à l'intérieur un lecteur audio ou un lecteur video, vous pourrez reprendre le code d'exemples du MOOC présentant l'API des lecteurs audio et vidéo.
Ajoutez à ce lecteur des boutons personnalisés pour play, stop, pause, retour à zéro, avancer 10s, reculer 10s, passer le lecteur en mode "loop" (à la fin de la vidéo ça recommence au début) etc. (vous pouvez ajouter d'autres choses...). Les boutons doivent être fonctionnels.
Reprenez le cours sur les Web Components (transparents + le module 4.2 du MOOC HTML5 Apps and Games) et essayez de transformer le nouveau lecteur amélioré en <my-player src="...." loop="...">titre du lecteur</myplayer>.

En ajoutant ce tag dans une page HTML cela doit fonctionner. Vous mettrez l'ensemble des codes JS du Web Component dans un fichier myPlayer/index.js. C'est ce fichier que vous importerez comme un JS module dans la page HTML pour que cela fonctionne.
CORRECTION simple steps 1-2-3 à refaire en mieux et plus beau ! https://mega.nz/file/21ImgL6a#vv6LXLHDjkX7TfJjv3zJRQlcH7G5hRGu0DOeBG3ej20
Maintenant, regardez les module 1.5.1 à 1.5.4 du MOOC "HTML5 Apps and Games" sur l'API Web Audio. Prenez un peu de temps pour lire les sections jusqu'à l'exemple qui ajoute un égaliseur de fréquences.
Vous ajouterez dans le code de votre lecteur Web Component de quoi régler le volume, la balance gauche/droite, et un égaliseur de fréquence. Si vous vous sentez vous pourrez aussi rajouter un réglage de la réverbération comme proposé dans un autre exemple.
On va maintenant cacher le lecteur audio et utiliser la librairie webaudiocontrols qui fournit des Web Components pour écrire des GUI de logiciels audio/vidéo (boutons rotatifs etc.). Vous importerez donc le fichier webaudiocontrols.js dans le code JavaScript de votre Web Component (import "lib/webaudiocontrols.js" par exemple, après avoir récupéré le fichier). La documentation d'utilisation montre comment ajouter des boutons rotatifs, des sliders, des switches, etc. par exemple pour le réglage du volume, de la balance, etc. Dans la doc on montre comment récupérer des images custom pour les boutons, sliders, etc. Il y a un très large choix (des centaines de spritesheets), à vous de vous amuser...
- Pour transformer un URL relatif en absolu pour les images des knobs (boutons rotatifs), regardez cet exemple : https://github.com/53js/webaudiomodule/blob/master/packages/faustPingPongDelay/plugin/Gui/Gui.js
  L'astuce est également expliquée dans les transparents du cours.
- Pour les plus curieux, un tuto pour générer soi-même ses propres spritesheets webaudiocontrols : https://www.youtube.com/watch?v=z8_0_cJogP4
Maintenant, continuez la lecture du cours sur la WebAudio API et lisez les modules 1.5.5 à 1.5.7 sur les visualisations du signal audio. Vous ajouterez à votre Web Component un ou plusieurs canvas pour visualiser tout d'abord les fréquences. Testez le résultat, n'oubliez pas de jouer sur vos réglages pour voir si cela affecte bien la visualisation.
Ajoutez maintenant la visualisation de la forme d'onde et des volumes. Ce serait bien d'avoir un switch fait avec webaudio controls pour passer d'une visualisation des fréquences à une visualisation de la forme d'onde (un toggle). J'aimerais vraiment avoir une visualisation des volumes comme dans le cours mais aussi à l'aide de vu-mètres à aiguille utilisant un webaudiocontrol comme celui présenté ici à la 4ème ligne, 1ère colonne (le Vintage_VuMeter).
Alors, avez-vous bien conçu votre Web Component ? Avez-vous pensé à proposer une API pour que lui-aussi puisse être contrôlé de l'extérieur par du code JavaScript (par exemple, par quelqu'un qui l'aurait inclu dans sa propre page et qui voudrait l'augmenter, comme vous avez fait avec <audio>, ce tag HTML dont le rendu est un Web Component standard!?
Avez-vous utiliser le MVC (le fait que certains attributs puissent être "surveillés"). Par exemple, si on change par programme le volume, il faudrait que le bouton de volume tourne dans la GUI. Et oui, si vous rendez votre composant controllable via une API, vous allez être obligé de mettre en place ce système ! Essayez d'exposer au moins les réglages de volume et de balance dans une API (méthodes avec getter et setters + attributeChangeCallback, voir les transparents du cours).

Voilà, cela fait pas mal de choses à faire.... c'est un bon départ avant d'attaquer les frameworks plus connus...

Résumé des fonctionnalités attendues pour le TP (qui sera à rendre)

Boutons personnalisés pour lecture, pause, retour au début, avance +10s, retour -10s,
Affichage de la progression, avec temps courant, durée totale du morceau,
Gestion de playliste, possibilité de passer les URLs des morceaux sous forme d'attributs du composant.
Boutons morceau suivant/morceau précédent.
Ce serait bien que votre lecteur soit décomposé en plusieurs Web Components (ex: un WC pour l'égaliseur, un WC pour le visualiseur de fréquences, etc.)
Fonctionnalités réalisables avec l'API WebAudio (suivre MOOC "HTML5 apps and games, section sur WebAudio) :
- balance gauche / droite,
- Optionnel : ajout de réverbération ou d'effets rigolos (echo/distorsion, etc.)
- Visualisation de fréquences / waveform / volumes
- Egaliseur de fréquences
- Optionnel : plusieurs visualisations possibles (paramétrables)