Accueil > Intranet Michel Buffa > Technologies Web 2 - Master 2 Miage > TP : écriture de lecteurs multimédia améliorés sous forme de WebComponents

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

De $1

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).

Ressources :

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'intéragir 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

  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...
  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 :

Mots clés:
FichierTailleDateAttaché par 
 EXEMPLE_WEB_COMPONENT.zip
Aucune description
411.06 Ko08:30, 2 Nov 2021MichelBuffaActions
 EXEMPLE_WEB_COMPONENT 2.zip
Aucune description
412.02 Ko10:55, 2 Nov 2021MichelBuffaActions
Images (6)
Voir 1 - 6 sur 6 images | Voir tout
Aucune description
audioPlay...  Actions
Aucune description
audioPlay...  Actions
Aucune description
audioPlay...  Actions
Aucune description
audioPlay...  Actions
Aucune description
audioPlay...  Actions
Aucune description
audioPlay...  Actions
Commentaires (0)
Vous devez être connecté pour poster un commentaire.