Comme Firefox 3.5, Chrome 3, Opera 10.5, et Safari 4, nous pouvons tirer profit de la plupart des nouvelles fonctionnalités de HTML 5, y compris le soutien audio natif sans avoir besoin de Flash. Comme vous le verrez, nous seulement pour créer l’élément <audio> nouvelle, et a fixé un peu d’attributs. Dans cette recommandation de quatre minutes de vidéo rapide, nous passerons en revue la majoration, et aussi un moyen rapide pour lire des fichiers audio avec jQuery.
L’élément audio HTML 5
<audio autoplay="autoplay" controls="controls"> <source src="medias/suhov-skunn.ogg" /> <source src="medias/suhov-skunn.mp3" /> </audio>
L’élément audio accepte une poignée d’attributs, notamment:
- autoplay : IAutostart: joue immédiatement le fichier lors du chargement de la page.
- controls : Contrôles : Affiche le lecteur sur la page.
- preload : Préchargement : commence immédiatement mise en mémoire tampon le fichier. (Valeurs = none, auto, les métadonnées)
- src : src: Le chemin vers le nom de fichier. C’est une bonne pratique pour charger le fichier via l’enfant « source » élément à la place.
Mozilla et WEBKIT ne se sont pas entendu en ce qui concerne le format audio ; Mozilla souhaite favoriser le format ‘ogg’ tandis que WEBKIT souhaite lire les fichiers au format ‘mp3′. Cela signifie que, au moins pour le moment, vous devez créer deux versions audio. Je vous recommande d’utiliser un outil en ligne simple et rapide, appelé Media.io , de convertir vos fichiers MP3 vers le format ogg.
Voici le résultat obtenu par défaut dans un navigateur Firefox (figure 1)
Figure 1 - Rendu lecteur HTML 5
Implémentation avec jQuery
Nous allons voir comment il est possible d’utiliser les propriétés de la balise ‘<audio>’ avec jQuery. Vous trouverez ci-dessous le code qui permet de créer un lecteur à partir d’un lien :
<script type="text/javascript">
$(document).ready(function() {
// Création d'un élément audio, et paramétrages
var audio = $('<audio>', {
autoPlay : 'autoplay',
controls : 'controls'
});
//On ajoute les sources (*.ogg et *.mp3)
addSource(audio, 'medias/suhov-skunn.ogg');
addSource(audio, 'medias/suhov-skunn.mp3');
// Initialisation de l'action sur notre lien
$('.trigger').click(function() {
// Ajout des éléments dans notre div
audio.appendTo('#audio');
// Effet
$(this).fadeOut('slow');
return false;
});
// Initialise la source
function addSource(elem, path) {
$('<source>').attr('src', path).appendTo(elem);
}
});
</script>
<!-- Elements HTML -->
<a href="#" title="Ecouter le titre">suhov-skunn</a>
<div id="audio"></div>
Cet exemple est volontairement simple, il est juste présent pour vous montrer les différentes possibilités qui s’offrent à vous ; Nous aurions pu implémenter cet exemple en générant des liens dynamiques depuis un script PHP et définir les sources dans un attribut ‘rel’.
Compléments
Tous les navigateurs (selon version et moteur) ne supportent pas cette balise ; n’oubliez pas de le notifier dans votre tag :
<audio src="mon-fichier.ogg" src="mon-fichier.mp3" controls="controls"> Your browser does not support the audio element. </audio>
Vous pouvez également utiliser le plugin jQuery « jPlayer » ; Ce plug-in utilise HTML 5 si Flash n’est pas pris en charge et fonctionne sur tous les navigateurs.
