Le Pensionnat Rayen est un RPG manga où tu incarnes un adolescent de quinze ans et plus ou un adulte du personnel, dans un pensionnat remplis d'élèves aux caractères bien divers. Entres originaux, musiciens, gothiques, sportifs, pom-pom girls, neutres, racailles, emos, artistes et punks, trouveras-tu ta place ?



 
AccueilAccueil  FAQFAQ  RechercherRechercher  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  



Partagez | 
 

 [HTML5/JS] Utiliser la balise <audio>.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar

Invité
Invité


MessageSujet: [HTML5/JS] Utiliser la balise <audio>.   Sam 5 Jan - 7:37


Tutoriel | | Html 5 / JS.



Introduction.


Html 5 s'impose comme une véritable révolution sur la toile. En quelques mois seulement, cette nouvelle mouture du W3C a littéralement dévorée le xHtml 1.1 pour former un nouveau standard. Dans les nouveaux éléments, deux on le vents en poupe : les balises audio et video.

Dans ce tutoriel je n'apporterais que les spécifications de la balise audio. Pourquoi c'est-elle fait autant remarqué dès sa sortie ? Pour des raisons simple. Il était auparavant compliqué d'utiliser un fichier audio sur le web. Il n'existait pour cela que des applications lourdes et souvent propriétaires, les très connues lecteurs Flash, puis dans les solutions moins populaires : QuickTime et quelques sombres bibliothèques Javascript. Pour couronner le tout, la comptabilité inter-navigateurs de ces solutions étaient souvent quelques peu hasardeuse et demandait du temps de développement supplémentaire.

Heureusement, HTML 5 rend cela incroyablement simple grâce à une API (Interface de programmation), une balise et quelques attributs. Vous allez voir, c'est un jeu d'enfant (;

La balise audio et ses attributs.


La balise audio doit contenir l'adresse du fichier à lire. Elle peut l'inclure directement comme attributs ou entre une balise source, solution privilégiée dans l'exemple ci-dessous. Nous allons chercher deux fichiers, un en MP3 et l'autre en OGG pour des questions de comptabilités.

Code:
<audio id="MyPlayer">
   <source src="ADRESSE_DU_FICHIER.mp3"></source>
   <!-- Si le navigateur ne supporte pas le mp3, il charge le fichier ogg. -->
   <source src="ADRESSE_DU_FICHIER.ogg"></source>
   <!-- Le message suivant ne sera affiché que si le navigateur ne supporte pas l'élément -->
   Votre navigateur ne supporte pas la balise audio.
</audio>

Comme vous pouvez le constater, nous ajoutons également un ID (MyPlayer) à notre balise pour pouvoir facilement la modifier par la suite avec Javascript. L'élément audio dispose également de trois attributs supplémentaires.

Controls : Affiche les contrôles, soit un lecteur basique.
Autoplay Lance la musique automatiquement dès que celle-ci est chargée.
Loop : Répète indéfiniment le fichier audio.

Pour terminer, une petite astuce, qui permet de jouer de la musique de manière complètement transparente. Ajouter ce style CSS à votre balise pour la faire disparaître :

Code:
visibility: hidden;
display:none;
Il suffira d'un peu de JavaScript pour l'utiliser sans que celle-ci soit visible. C'est ce qui est utilisé pour faire des signatures contenant de la musique ou pour les jeux vidéos en HTML 5. (;

Un peu de JavaScript.


{U.C}

Browser Support & Audio Format


Internet Explorer 8 et ses versions précédentes ne supportent pas l'élément audio. Elle est tout de même compatible avec Internet Explorer 9, Mozilla Firefox, Chrome, Safari et Opera. Tout les utilisateurs du web à jour par rapport aux nouvelles technologies en somme tongue .

Un problème subsiste cependant, les navigateurs bien incapables se concerter pour choisir un format audio standard ont chacun choisit le leur. Ainsi il est toujours nécessaire de charger au minimum deux fichiers pour assurer la comptabilité cross-navigateur. Les deux formats en questions sont MP3 (Standard pour Internet Explorer, Chrome et Safari) et OGG (Pour Firefox et Opera).

Le tableau suivant comporte les différents formats supportés :





BrowserMP3WavOgg
Internet Explorer 9+OuiNonNon
Chrome 6+OuiOuiOui
Firefox 3.6+NonOuiOui
Safari 5+OuiOuiNon
Opera 10+NonOuiOui

Revenir en haut Aller en bas
 

[HTML5/JS] Utiliser la balise <audio>.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: HORS RPG :: » Musée d'art :: « Tutoriels-