Prise en main de l’élément audio HTML5

Windows Internet Explorer 9 prend désormais en charge l’audio HTML5.Vous pouvez utiliser l’élément audio pour ajouter un lecteur audio de base à votre page Web sans contrôles de script ou de modules complémentaires.

Lecture audio dans sa plus simple expression

La méthode principale d’ajout d’audio sur une page Web est l’utilisation de l’élément audio. À l’instar de nombreuses nouvelles prises en charge HTML5, l’élément audio vous permet d’obtenir un message d’erreur ou une autre technologie de lecture si le navigateur de l’utilisateur ne prend pas en charge l’élément audio HTML5, comme c’est le cas des navigateurs moins récents. Vous pouvez placer un message d’erreur entre les balises audio comme indiqué dans l’exemple suivant ou insérer du code pour un contrôle de lecteur externe comme le plug-in de navigateur Silverlight. L’exemple de code suivant montre une simple page Web qui lit un fichier audio.


<!doctype html>  
<html>
<head>
    <title>Audio Element Sample</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
</head>
<body>
    <h1>Audio Element Sample</h1>
    
    <!-- Display the audio player with control buttons. -->
    <audio src="demo.mp3" controls autoplay loop> 
        HTML5 audio not supported
    </audio>
</body>
</html>


L’élément audio est ajouté directement à votre code HTML à l’aide de la propriété src pour indiquer le fichier audio à lire, et de l’attribut controls pour que les contrôles de lecteur intégrés soient utilisés. Si vous utilisez le lecteur intrinsèque du navigateur, aucun autre script n’est requis. Le style et les fonctionnalités du lecteur intrinsèque peuvent varier selon les navigateurs.

Dans Internet Explorer 9, l’élément audio affiche un lecteur simple qui dispose des contrôles de base : lecture, pause, curseurs de position et volume. Le lecteur affiche aussi la durée de lecture, et la durée restante. Si vous survolez l’un des affichages de durée, vous pouvez avancer ou reculer par intervalles de 30 secondes.

Image du lecteur audio HTML5 d’Internet Explorer 9

Dans Internet Explorer 9, l’élément audio prend en charge deux autres attributs, autoplay et loop. autoplay indique à Windows Internet Explorer de charger et lire immédiatement le fichier audio, une fois l’objet audio chargé. Cette fonctionnalité est similaire à l’utilisation de l’élément HTML bgsound . Mais, contrairement à bgsound, les contrôles pause et play permettent aux utilisateurs de la page Web de désactiver le son. L’attribut loop permet de relire en continu le fichier son depuis le début. Si vous n’avez besoin d’aucun contrôle intrinsèque, n’utilisez pas les attributs.

Dans cet exemple, le fichier "demo.mp3" est un espace réservé pour votre propre fichier. Si le fichier audio figure dans le même répertoire que le code source de la page Web, vous pouvez simplement indiquer le nom du fichier. Si le fichier audio se trouve dans un autre répertoire, incluez un chemin d’accès semblable à "music\demo.mp3". Si le fichier se trouve sur un autre site, utilisez le nom de domaine complet et le chemin d’accès au fichier (par exemple, "http:\\www.contoso.com\music\demo.mp3").

Bien que l’élément audio puisse être appliqué en code HTML uniquement, l’utilisation du script vous permet d’optimiser votre page Web en utilisant vos propres boutons, en créant des listes de lecture ou en ajoutant l’état de votre lecture. Pour plus d’informations sur le script de l’élément audio, voir la rubrique Utilisation de JavaScript pour contrôler l’objet audio.

Remarque  Si vous développez une application sur un intranet et que vous rencontrez des problèmes d’affichage liés à HTML5, ajoutez le code <meta http-equiv-“X-UA-Compatible” content=”IE=edge”/> dans le bloc <head> d’une page Web pour forcer Windows Internet Explorer à utiliser les dernières normes. Si vous le souhaitez, vous pouvez configurer votre serveur de développement Web afin d’envoyer un en-tête meta http-equiv-"X-UA-Compatible" avec IE=edge, à la place. Pour plus d’informations sur la compatibilité des documents, voir Définition de la compatibilité des documents.

Informations de référence sur les API

HTML5 Audio and Video

Exemples et didacticiels

Utilisation de JavaScript pour contrôler l’objet audio
Utilisation des événements multimédias pour ajouter une barre de progression
Prise en charge de plusieurs formats de fichier audio
Pause ou modification du volume d’un élément multimédia quand vous quittez la page

Démonstrations du site Internet Explorer Test Drive

Audio Explosion
HTML5 Audio Player + XML Playlist
IE Beatz
Fireflies

Billets IEBlog

Exploiter la puissance de l’élément audio HTML5
Balise identique : utilisation de <canvas>, <audio> et <video>

Spécification

HTML5 : Section 4.8.7

Rubriques connexes

Exploiter la puissance de l’élément audio HTML5
Format audio natif avec HTML5

 

 

Afficher:
© 2014 Microsoft