M2 NUMRES 2024/2025: 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/WebComponentsExamplesMaster2NUMRES_2024_2025.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