html5 tutorial game maker : le son, l’audio




 

Avec les médias connectés, HTML 5 va devenir incontournable dans un proche avenir. Si vous ne vous y êtes pas encore mis, il est encore temps. Mais demain, il sera trop tard. Je vous propose donc un court article où je vous montre comment utiliser l’audio et les formats supportés par le HTML 5 et aussi par le biais de Javascript. En bref, le minimum à savoir….

 

Prérequis

– au moins un navigateur sous la main;
– savoir ce qu’est le Javascript et en avoir pratiqué un peu.

 

HTML 5, c’est quoi ?

Evolution de la norme HTML, la spécification HTML 5 reste à ce jour en construction. Ce sont principalement les éditeurs de navigateurs qui, aujourd’hui, font évoluer cette norme par leur contribution, chaque éditeur faisant évoluer son navigateur avec les contributions de l’autre.

 

La balise HTML 5 audio

La balise audio permet d’intégrer du son aussi facilement qu’une image, les codecs étant intégrés au navigateur. Toutefois, les navigateurs ne supportent pas tous les mêmes codecs.

Intégration dans un document HTML 5

L’intégration d’un fichier audio en HTML 5 se fait à l’aide de la balise HTML 5 audio comme suit :

<audio src="nom_fichier_audio">
Votre navigateur ne supporte pas la balise audio
</audio>

Si votre navigateur ne supporte pas la balise audio, il affichera le message texte placé entre les balises d’ouverture et de fermeture.
 

Attributs de la balise

Les attributs s’utilisent à l’intérieur de la balise audio comme suit :

<audio src="nom_fichier_audio" attribut1 attribut2 ....>
Votre navigateur ne supporte pas la balise audio
</audio>

La présence de l’attribut :
autoplay démarre automatiquement la lecture du fichier audio référencé;
loop joue en boucle le fichier audio référencé;
controls affiche des icônes permettant de démarrer, stopper la lecture d’un fichier audio, et d’en contrôler le volume.

Ces trois attributs peuvent être utilisés conjointement.
 

Le support des codecs audio

Les navigateurs ne supportent pas les mêmes codecs.

Pour pallier à ce problème, il est possible d’intégrer à la balise audio HTML 5 plusieurs fichiers sources comme suit :

<audio controls>
  <source src="fichier1">
  <source src="fichier2">
   .....
  <source src="fichierN">
</audio>

Le navigateur jouera le premier fichier de la liste dont il supportera le codec.

 

L’audio HTML 5 avec javascript

Déclarer un objet Audio

Javascript propose un objet Audio qui s’instancie comme suit :

var soundObject = new Audio("nom_fichier_audio");

ou

var soundObject = new Audio();
soundObject.src = "nom_fichier_audio";

 

Utiliser un objet Audio pour lire un fichier

Pour lire le fichier audio :

soundObject.play();

Pour le mettre en pause :

soundObject.pause();

Pour en contrôler le volume :

soundObject.volume = valeur; // valeur entre 0 et 1

Où en est la lecture du fichier audio ?

soundObject.currentTime;

renvoie la position courante de la lecture du fichier audio. Cette propriété est aussi en écriture, vous pouvez donc l’utiliser pour positionner le curseur de lecture.

Quelle est la durée total du fichier audio ?

soundObject.duration;

 

Tester le support d’un codec audio par le browser

La méthode canPlayType renvoie une chaîne de caractères indiquant le support ou non d’un format audio. Cette chaîne peut prendre trois valeurs :
probably : il y a une forte probabilité pour que le navigateur supporte le format
maybe : le navigateur supporte peut être le format
chaine vide : le navigateur ne supporte pas le format

Cette méthode s’utilise de la manière suivante :

var soundObject = new Audio();
var stringSupport = soundObject.canPlayType("type Mime du format audio testé");

En fonction du résultat, vous pouvez spécifié le fichier source adapté au navigateur via :

soundObject.src("nom_fichier_audio");

 

Les principaux types MIME audio

Voici la liste des principaux types MIME audio :

 

Support des formats audio

Voici la liste des principaux navigateurs du marché et les formats audio qu’ils supportent :

 

Conclusion

Un article court mais efficace. La série HTML 5 va continuer, donc à suivre….
Et vous, vous y mettez quand au HTML 5 ?

 
[important]Si vous travaillez déjà avec HTML 5, expliquez nous dans quel cadre….[/important]

 

Posté dans html5Taggé apprendre html 5, balise audio, balise audio html5, balise audio mp3 ogg, balise audio multi support, balise audio support, faire des jeux, formation html 5, game maker, HTML 5, html 5 audio, html 5 audio tag, html 5 tutorial, HTML5, html5 tutorial, javascript html 5, jouer des sons html, jouer des sons html5, la balise html 5 audio, les formats audio html 5  |  2 commentaires

2 réponses à "html5 tutorial game maker : le son, l’audio"

Répondre

*