TP : écriture de lecteurs multimédia améliorés sous forme de WebComponents

Introduction

TP à rendre individuel pour le : 15/11/2021

A rendre de la manière suivante :

• Votre repository github. DOIT CONTENIR UN Readme avec des explications sur vos contributions.
• Doit être hébergé quelque part, vous devez donner le lien pour que je teste en ligne (github pages est plus simple).

Travail à faire

1. 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
    
2. 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.
    
3. Reprenez le cours sur les WebComponents (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 WebComponent 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.
    
4. CORRECTION simple steps 1-2-3 à refaire en mieux et plus beau ! https://mega.nz/file/21ImgL6a#vv6LXLHDjkX7TfJjv3zJRQlcH7G5hRGu0DOeBG3ej20
    
5. Maintenant, regardez les module 1.5.1 à 1.5.4 du MOOC "HTML5 Apps and Games" sur l'API WebAudio. Prenez un peu de temps pour lire les sections jusqu'à l'exemple qui ajoute un equalizer de fréquences.
    
6. Vous ajouterez dans le code de votre lecteur WebComponent de quoi régler le volume, la balance gauche/droite, et un égaliseur. Si vous vous sentez vous pourrez aussi rajouter un réglage de la réverbération comme proposé dans un autre exemple.
    
7. On va maintenant cacher le lecteur audio et utiliser la librairie webaudiocontrols qui fournit des WebComponents pour l'audio (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 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
   • 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
      
8. 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 WebComponent 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.
    
9. 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).
    
10. Alors, avez-vous bien conçu votre WebComponent ? Avez-vous pensé à proposer une API pour que lui-aussi puisse être controlé 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 le WebComponent standard -car cela en est bien un- <audio> ou <video> ?
     
11. 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 à 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.
   
• 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)

Exemples de GUI :