L'audio

Les éléments <audio> et <video> se ressemblent fortement. D'ailleurs, ils sont représentés par le même objet, à savoir HTMLMediaElement. Comme ils dérivent du même objet, ils en possèdent les propriétés et méthodes.

L'insertion d'un élément <audio> est très simple.

Ce bout de code suffit à insérer un lecteur audio qui lira le son hype_home.mp3. Mais, nous, nous n'allons pas utiliser l'attribut src, mais plutôt deux éléments <source>, comme ceci :

</audio>

De cette manière, si le navigateur est capable de lire le format .ogg, il le fera. Sans quoi, il lira le format .mp3. Ça permet une plus grande interopérabilité (compatibilité entre les navigateurs et les plates-formes).

Pour afficher un contrôleur de lecteur, il faut utiliser l'attribut booléen controls, comme ceci : <audio controls="controls"></audio>. Mais ici, c'est un cours de Javascript, donc nous allons créer notre propre contrôleur de lecture !

Contrôles simples

Voyons pour commencer comment recréer les boutons « Play », « Pause » et « Stop ». On commence par accéder à l'élément :

var player = document.querySelector('#audioPlayer');

Tant qu'à être dans la partie HTML5 du cours, vous remarquerez que nous utilisons désormais la méthode querySelector(), qui est, tout de même, bien plus pratique.

Si on veut lancer la lecture, on utilise la méthode play() :

player.play();

Si on veut faire une pause, c'est la méthode pause() :

player.pause();

Par contre, il n'y a pas de méthode stop(). Si on appuie sur un bouton « Stop », la lecture s'arrête et se remet au début. Pour ce faire, il suffit de faire « Pause » et d'indiquer que la lecture doit se remettre au début, avec la propriété currentTime, exprimée en secondes :

player.pause();

player.currentTime = 0;

On va créer un petit lecteur, dont voici le code HTML de base :

</audio>

Deux boutons ont été placés : le premier est un bouton « Play » et « Pause » en même temps (comme sur la plupart des lecteurs modernes), et le second permet de stopper et de rembobiner la lecture. Voici les fonctions play et resume :

function play(idPlayer, control) {

var player = document.querySelector('#' + idPlayer);

if (player.paused) {

player.play();

control.textContent = 'Pause';

} else {

player.pause();

control.textContent = 'Play';

}

function resume(idPlayer) {

var player = document.querySelector('#' + idPlayer);

player.currentTime = 0;

player.pause();

}

Le fonctionnement du bouton « Play » est simple : avec la méthode paused, on vérifie si la lecture est en pause. En fonction de ça, on fait play() ou pause(), et on change le libellé du bouton.

Contrôle du volume

L'intensité sonore se règle avec la propriété volume sur une échelle allant de 0 à 1. Si le volume est à 0, il est muet, et s'il est à 1, il est à fond. Pour le diminuer de moitié, on mettra 0,5. On va faire un système très simple : cinq barres verticales cliquables qui permettent de choisir un niveau sonore prédéfini :

</span>

Et la fonction associée :

function volume(idPlayer, vol) {

var player = document.querySelector('#' + idPlayer);

player.volume = vol;

}

Barre de progression et timer

Un lecteur sans une barre de progression n'est pas un lecteur ! Le HTML5 introduit un nouvel élément destiné à afficher une progression : l'élément <progress>. Il n'est toutefois utilisable qu'avec Firefox et Chrome. Mais nous n'allons pas l'utiliser ici, car cet élément n'est pas facilement personnalisable avec du CSS. On l'utilisera plus tard dans le chapitre sur l'API File.

Nous allons donc créer une barre de progression « à la main », avec des <div> et quelques calculs de pourcentages !

Ajoutons ce code HTML après l'élément <audio> :

<div>

<div id="progressBar">Pas de lecture</div>

</div>

Analyser la lecture

Un élément HTMLMediaElement possède toute une série d'événements pour analyser et agir sur le lecteur. L'événement ontimeupdate va nous être utile pour détecter quand le média est en train d'être joué par le lecteur. Cet événement est déclenché continuellement pendant la lecture.

Ajoutons donc cet événement sur notre élément <audio> :

Et commençons à coder la fonction update() :

function update(player) {

var duration = player.duration; // Durée totale

var time = player.currentTime; // Temps écoulé

var fraction = time / duration;

var percent = Math.ceil(fraction * 100);

var progress = document.querySelector('#progressBar');

progress.style.width = percent + '%';

progress.textContent = percent + '%';

}

L'idée est de récupérer le temps écoulé et de calculer un pourcentage de manière à afficher la barre de progression (qui fait 100 % de large). Donc, si la chanson dure dix minutes et qu'on en est à une minute de lecture, on a lu 10 %.

La propriété duration sert à récupérer la durée totale du média. Le calcul est simple : on divise le temps écoulé par la durée totale et on multiplie par 100. Comme ça ne tombera certainement pas juste, on arrondit avec Math.ceil().

Une fois le pourcentage récupéré, on définit la largeur de la barre de progression, et on affiche le pourcentage à l'intérieur.

Le petit lecteur est désormais terminé !

Créé avec HelpNDoc Personal Edition: Générateur complet de livres électroniques ePub