Attention : la lecture de ce billet est probablement plus aisée sur sa page originale.

Et pour commencer, une rapide petite démonstration kawaii♥♥♥

Votre navigateur n'est pas adapté à l'internet moderne
Téléchargez Firefox (3.5), Safari (4) ou Opera (9.6), Chrome (2).
Néanmoins, comme je suis gentil, vous pouvez télécharger le sonore au format Ogg Vorbis et l'écouter par exemple avec VLC.

Vous noterez que l'interface de contrôle est directement gérée par votre navigateur.

Mais on va plus loin

Car l'avantage direct de la balise <audio></>, c'est sa standardisation en dehors du HTML. Principalement dans l'arbre DOM, et donc dans les manipulations avec Javascript. Chose qui n'était bien évidemment absolument pas envisageable avec différents plugins (Windows Media™, Quicktime™, ou entre deux players Flash™ s'ils ont implémenté une interface DOM). Par exemple :


On peut même faire des combos !

Dailymotion a réussi à refaire entièrement son player qu'en utilisant du html5/dom/js/canvas standards et donc en abandonnant Flash™ pour les raisons qu'on sait. Silverlight™ semble avoir aussi du plomb dans l'aile, désormais.

Je jalouse Hadrien qui peut lire du Youtube sur son iPhone en natif, alors que mon Nokia est plombé par le moindre plugin Flash™.

Ça marche aussi avec un flux

Il suffit de préciser une source en stream. Disons Radio <FMR> par exemple.

Votre navigateur n'est pas adapté à l'internet moderne
Et/ou ne supporte pas le format Ogg Vobis.

Et là, on a un bug assez amusant. Bug au sens de « Fonctionnalité non prévue ». Vous avez remarqué que j'ai mis les contrôles habituels, dont la barre de progression, ce qui est par définition incongru pour une écoute d'un flux indéfini. C'est là où ça devient drôle : Vous pouvez revenir en arrière dans le direct ! Comme un instant replay, ce qui m'aurait été bien utile Samedi dernier quand Dusport a lapsussé « des anciens survivants ».

ÀMHA, cette fonctionnalité imprévue vient tout simplement du fait que le flux du stream est considérée par le navigateur comme un fichier de taille fini. Donc il le charge dans son cache disque, de manière indéfinie, et lance la lecture quand il estime qu'il a suffisamment de données en buffer pour avoir une lecture sans sautes. Souci : cela peut exploser votre espace disque si cette fonction est utilisée pour un flux vidéo nettement plus gourmand. C'est pour ça que les lecteurs de stream n'utilisent qu'une taille fixe pour leur buffer, en général en RAM. Il manque donc à définir dans la norme la gestion d'un stream.

À l'attention des utilisateurs de Safari, je suis désolé, mais la radio ne diffuse qu'en ogg vorbis. En effet, la diffusion au format AAC/Mpeg4 demande le paiement de droits de brevets. Si vous utilisez Safari, il est urgent pour vous d'installer le plug officiel de la fondation Xiph. C'est encore la preuve qu'en open-source, rien n'est anodin.

Un standard open-source qui s'adopte vite avec passion

ADOPTEZ UN MINIPOUSS (une puce offerte)
Casons les MiniPouss 2
Eh oui, l'opération “Casons les Mini-Pouss 2” continue.

Previously in Casons les MiniPouss

et le tag poussière.

Et sinon (mais il n'est pas à adopter)

Une autre démo avec la balise <video></>, toute aussi kawaii♥♥♥, est dispo chez Hadrien.