Lecteur HTML5. J’ai cherché comment avoir une solution la plus standard et la plus simple possible, donc via le lecteur audio HTML5, mais qui permette de lire non pas un seul fichier mais toute une liste, afin de proposer l’accès le plus rapide possible pour le lecteur aux podcasts de « monnaie libre ». La balise fonctionne ainsi pour un fichier son quelconque, encodé ici en deux format libre ogg. (On peut proposer d’autres formats comme mp3 ou autres, on peut ainsi rajouter autant de lignes <source> que l’on souhaite vers différents formats du même fichier son). <audio controls="controls"><source src="chanson.ogg" type="audio/ogg" /> Votre navigateur ne supporte pas la balise HTML5 audio. </audio> Ce qui nous donne : Après quelques recherches et modifications, j’ai réalisé ce que je souhaitais à savoir un même lecteur avec une liste de plusieurs fichiers différents.
<html><head><title>HTML5 Audio Player with Playlist</title><script> function loadSong(elt, e) { if(! Happy coding ! Boutons graphiques en CSS - CSS Debutant. Le bouton en image qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons graphiques étaient animés par un javascript ou pire (car plus lourd) par un applet java. Avec les CSS, par effet "rollover", la légèreté et la simplicité est de mise pour créer de beaux boutons.
Fonctionne avec : tous les navigateurs graphiques Attributs utilisés : background color display float line-height margin padding text-align ; text-decoration vertical-align width Bouton CSS simple Code (x)html Un bouton étant en général utilisé pour faire un lien vers une autre page, les sélecteurs exploités dans le code CSS seront a et a:hover pour le changement d'aspect au survol du bouton (si changement souhaité bien sûr...). Pour un seul bouton, le code html peut être le suivant : <div class="bouton"><p><a href="#">Bouton</a></p></div> Prenons maintenant deux images dont l'une servira pour le bouton au repos, et l'autre pour le survol. Code CSS Plusieurs boutons CSS. L'audio et la vidéo - Javascript. <audio> : Page de démonstration et tutoriel - <html5> par l'exemple - Le site français de démo des balises HTML5 et de test du support des navigateurs.
Lecture d’un fichier .mp3 ou audio en HTML5. S’il y a encore quelques temps il était assez compliqué de lire un fichier audio ou mp3 depuis votre site web, le HTML5 à simplifié sa mise en place. A partir d’une simple balise à insérer dans votre page web, la lecture de votre fichier musicale s’effectuera simplement. Pour utiliser ce lecteur HTML5, vous devez utiliser la balise <audio>. Cette balise a été implanté dans le HTML5 afin de faciliter la lecture de fichier musicaux ou sonore. Compatibilité des différents navigateurs Pour connaître la compatibilité des balises HTML5 avec les différents navigateurs, consultez le CSS3 & HTML5 Readiness.
A l’heure ou j’écris ces lignes – septembre 2011, la balise <audio> est compatible avec les principaux navigateurs suivants : ChromeOpéra 11Safari 5Internet explorer 9Firefox (à partir de la version 3.6) Exemple d’utilisation de la balise <audio> Et enfin, à la dernière et quatrième ligne nous refermons la balise <audio>.
Attribut spécifique à la balise <audio> L’attibut preload – préChargement.