Audio & Vidéo

Par défaut, les lecteurs audio et vidéo créés via leurs balises HTML respectives viennent avec des contrôles permettant de déclencher des actions (jouer, pauser, etc.). Cependant, pour des raisons esthétiques ou pratiques, il est possible de déclencher soi-même ces actions via JavaScript.

Pour manipuler un élément audio ou vidéo, il faut en premier lieu stocker une référence de l'élément HTML en question dans une variable.

Par exemple:

const starwars = document.querySelector('.starwars');

play() & pause() ⏯️

Les fonctions play() et pause() permettent de démarrer et d’arrêter la lecture via:

starwars.play();

ou

starwars.pause();

Il est donc possible de déclencher ces actions au moment souhaité. Par exemple, lorsqu’un bouton est appuyé.

paused

Une bonne pratique de garder le statut de la vidéo dans une variable afin de pouvoir y faire référence au besoin. Par exemple, pour déterminer quels boutons afficher ▶️⏸️

Si pour quelconque raison, cette information n’est pas disponible via une variable, il est possible de vérifier le statut de la vidéo via:

starwars.paused

qui retournera un boolean true ou false en fonction de si la vidéo est arrêtée ou en train de jouer.

currentTime ⌛

Utilisé simplement starwars.currentTime retourne la position actuelle de la vidéo en secondes. Par exemple, si l’utilisateur a écouté dix secondes au moment ou cette fonction est appelée, elle retournera 10.

Si une valeur lui est attribuée starwars.currentTime = 0 elle déplacera la position courante de la vidéo à la position correspondante au chiffre en secondes attribué. Dans ce cas-ci, la vidéo retournera au début, puisque le temps attribué est 0.

Cette technique, combiné à la fonction pause() est particulièrement utile afin de recréer le comportement "Stop" ⏹️.

duration

La fonction starwars.duration retourne la durée de la vidéo en secondes. Donc si une vidéo dure dix secondes, cette fonction retournera 10.

Diviser le currentTime par la duration est particulièrement utile afin d'obtenir une fraction correspondant à l'avancement de la vidéo. Ainsi, il est possible de synchroniser des animations, par exemple une barre de progrès, avec la vidéo.

playbackRate

Utilisé simplement starwars.playbackRate retourne le vitesse de lecture de la vidéo sous forme d’un chiffre allant de 0 à 16. Par exemple, si l’utilisateur écoute sa vidéo à la vitesse normale, son playback rate est des 1.

Si une valeur lui est attribuée starwars.playbackRate = 5 elle ajustera la vitesse de lecture en fonction de cette nouvelle valeur. Dans ce cas-ci, la vidéo jouera 5x plus rapidement.

volume 🎚️

Utilisé simplement video.volume retourne le volume actuel de la vidéo sous forme d’un chiffre allant de 0 à 1. Par exemple, si l’utilisateur écoute sa vidéo à la moitié du volume, cette fonction retournera 0.5.

Si une valeur lui est attribuée video.volume = 1 elle ajustera le volume en fonction de cette nouvelle valeur. Dans ce cas-ci, la vidéo jouera le plus fort possible.

Événements

Il est possible d'écouter plusieurs événements sur les lecteurs audio ou vidéo grâce à addEventListener.

Notamment:

• canplay déclenché lorsque le lecteur est prêt à jouer.

• pause déclenché lorsque le lecteur arrête de jouer.

• play déclenché lorsque le lecteur commence à jouer.

• timeupdate déclenché à chaque fois que la valeur de currentTime change.

• ended déclenché lorsque la lecture du média est complétée.

Audio sans balise

L'élément audio peut-être créé directement en JavaScript sans avoir recours à une balise HTML associée.

Par exemple:

const song = new Audio('main-title.mp3');

Cette approche est particulièrement utile pour gérer les sons ponctuels.