M2 Miage INTENSE 2023-2024 : Intro aux Web Components

Introduction

Vous avez vu Angular l'an dernier, comme d'autres frameworks front-end, ce dernier s'appuie sur le concept de Web Component. Nous  étudieront les APIs standards présentes dans votre navigateur Web relatives aux Web Components, et verrons qu'il est possible de faire des choses très intéressantes avec, parfois difficiles ou impossibles à réaliser avec de gros frameworks.

REPOSITORY GITHUB DE TOUS LES EXEMPLES A VENIR : 

• https://github.com/micbuffa/WebComponentsExamplesMaster2Intense_2023_2024.git

Séance 1 : de quoi s'agit-il ? Création de premiers Web Components

• Support de cours 
• Voir aussi le chapitre sur les Web Components et sur le multimedia avancé (Web Audio API) du MOOC "HTML5 Apps and Games".
• Voir aussi un cours plus récent que je suis en train de finaliser sur les Web Components (lien à venir)

Fait en live coding : un exemple de Web Component pour entrer un code sur un clavier virtuel (Exemple1 dans le repo GitHub)

Séance 2 : on commence à faire un lecteur audio augmenté sous forme de Web Component

Première partie :

1. Allez sur le MOOC HTML5 Coding Essentials and Best Practices chapitre 2.2 sur l'API Javascript des éléments <audio> et <video> de HTML5.
2. Reprenez l'exemple 2 sur le repo GitHub, qui contient un exemple très simple de lecteur audio avec des boutons customs. Complétez le avec par exemple : controle de volume, avancer/reculer de + et - 5 secondes, barre de progression (dans un slider html par exemple, ou un <div> coloré qui grandit horizontalement, ou un canvas si vous vous souvenez de comment ça marche.
3. Transformez ce lecteur en Web Component en vous inspirant de l'Exemple 1. Vous l'appellerez <my-audio-player> et il pourra prendre des attributs tels que "src" ou "playlist". Le premier dit au lecteur de ne lire qu'un seul fichier, le second de gérer une playlist composée de plusieurs morceaux (ex: playlist="url1, url2, url3 etc."). Autre attribut possible : loop pour boucler etc.
4. Essayez de lui faire envoyer un ou plusieurs événements (de manière similaire à Exemple1, par exemple, il pourra envoyer l'événement "ended" pour indiquer que le morceau courant est terminé.

Une fois votre lecteur en Web Component fonctionnel, on continuera le cours...

Deuxième partie : utiliser la WebAudio API pour ajouter des effets réglables et des visualisations à votre lecteur audio

1. Allez sur le MOOC "HTML5 Apps and Games" et suivez la section WebAudio API dans le module 1
2. Modifiez votre lecteur audio pour ajouter quelques effets audio + interface graphique à votre lecteur. Le cours montre par exemple comment ajouter un égaliseur graphique, des effets de réverbération, de modification du son à l'aide de waveshaper, etc.
3. ... ou des visualisations de fréquences, waveforms, volume

Séance 3 : on continue le cours, contraintes liées aux assets avecs URLs relatifs, webaudiocontrols etc.

Exemples vus en cours:

•  Web Component qui dérive de HTMLButtonElement, notez comment il est utilisé dans index.html, et notez qu'il utilise le DOM et pas un Shadow DOM : https://codesandbox.io/s/hardcore-st...x.html:143-149
   
• J'ai montré comment utiliser des assets relatifs (ie. ./image/chat.jpg), et comment utiliser la librairie de widgets https://github.com/g200kg/webaudio-controls (voir exemple dans le repo GitHub du cours : https://github.com/micbuffa/WebComponentsExamplesMaster2Intense_2023_2024.git
  
  
• Pour la visualisation graphique du signal audio : voir le MOOC HTML5 Apps and Games, module 1 partie "web audio"
   
• Un visualiseur audio de folie : https://github.com/jberg/butterchurn 

Séance 4 : utilisation de plugins WebAudio (WebAudioModules), démo de butterchurn

Il serait intéressant que vous intégriez dans votre projet de super lecteur audio, la possibilité de traiter le son à l'aide d'effets audio de haut niveau (comme ceux disponibles dans https://wam-studio.i3s.univ-cotedazur.fr/). Il existe un standard de "plugins Web Audio pour le Web" intitulé "Web Audio Modules" (ou WAM). Ces WAMs sont des WebComponents, qui peuvent s'afficher à l'écran, mais aussi se connecter à un graphe WebAudio pour traiter le son.

Attaché à cette page, vous trouverez un .zip d'un effet audio chargé dans une simple page HTML. Regardez le fichier host.js, le plugin chargé ici a comme URL "./index.js" mais on aurait pu utiliser à la place un URL absolu.

Par ailleurs, il existe un "serveur" de plugins en ligne, qui propose des dizaines d'effets audio de haut niveau: https://www.webaudiomodules.com/community/plugins.json 

Le format des données est le suivant :

Pour récupérer les URL des plugins WAM décrits dans le JSON que vous recevrez lorsque vous demanderez l'URL ci-dessus, vous devrez transformer légèrement la propriété path : 

1. ajouter l'URL de base du serveur au début (dans ce cas : https://www.webaudiomodules.com/community/)
2. Ajouter "plugins/" au début de chaque URL de plugin, par exemple cette URL est correcte https://www.webaudiomodules.com/community/plugins/burns-audio/distortion/index.js alors que celle-ci est incorrecte : https://www.webaudiomodules.com/community/burns-audio/distortion/index.js (manque /plugins)

Vous pouvez tester cela directement dans l'hôte suivant : https://mainline.i3s.unice.fr/wam2/packages/_/ entrez l'URL du plugin dans le champ de saisie et cliquez sur le bouton "load plugin". Cela permettra de vérifier que l'URL est valide.

A partir de là, vous pouvez facilement écrire une petite application web qui affichera la liste des plugins disponibles + les vignettes, etc. Regardez le code que j'ai écrit ici : https://jsbin.com/sujerarabe/edit?html,js,console,output (il fonctionne, vous pouvez l'exécuter). Ce qu'il fait : 

• A partir d'une page HTML, avec du code JavaScript :
• Envoie une requête utilisant l'API fetch à l'URL https://www.webaudiomodules.com/community/plugins.json (fetch = la manière standard de faire des requêtes AJAX)
• Affiche le nom et l'auteur des plugins dans la page sous forme de H2 + image miniature.

A vous de compléter pour instancier le plugin (voir le code de host.js)

CONSIGNES POUR REMETTRE LE PROJET, SUJET ETC.