HTML5 et Audio

Une présentation réalisée rapidement dans le cadre de mes études.

Transcript

1. HTML5 et Audio HTML5 et Audio « Du son, des formats, des APIs : du fun ! » Stanislas Signoud – mercredi 20 mars 2012 1
2. HTML5 et Audio Quoi donc ? • L’histoire ancienne • L’histoire proche • Une histoire de formats • La balise <audio> • Plus qu’un lecteur : les APIs 2
3. HTML5 et Audio L’histoire ancienne
4. HTML5 et Audio La préhistoire de l’Internet • Des débits non-adaptés (56k) • Des lecteurs dédiés à cet effet : • RealPlayer, • Quicktime, • Winamp… • Pas d’intégration avec le navigateur 4
5. HTML5 et Audio La préhistoire du HTML • Jim Davis (www-talk, 1993) : • <IMG HREF="http://example.com/aaarg.wav" CONTENT-TYPE=audio/basic> • Jay C. Weber (www-talk, 1993) : • <AUD SRC="http://example.com/beurk.wav"> • Microsoft (Internet Explorer 2) : • <BGSOUND SRC="http://example.com/laid.wav" LOOP="infinite"> 5
6. HTML5 et Audio Les autres méthodes • La balise <embed> • <embed src="http://example.com/daft.mp3" /> • La balise <object> • <object type="audio/mpeg" data="http://example.com/ladygaga.mp3" /> (Premier usage standardisé par le W3C.) 6
7. HTML5 et Audio L’histoire proche
8. HTML5 et Audio L’arrivée de Flash • Façon quasi-universelle de jouer du son, sans plugins « mal intégrés » et hétérogènes 8
9. HTML5 et Audio Comment l’utiliser ? • Des player simples ou complexes en Flash • Dewplayer • Players personnalisés (radios…) • Un player « caché » en Flash contrôlé en JS • SoundManager2 9
10. HTML5 et Audio Les problèmes de Flash • Technologie propriétaire • « Vendor lock-in », dépendance à Adobe • Faible accessibilité • Incompatibilité avec les lecteurs d’écrans • Sécurité controversée • Nombreuses failles du plugin au fil des années • Interopérabilité difficile • Indisponible sur iOS et Android (4+) • Flash parfois bloqué (entreprises, privacy…) 10
11. Une histoire de formats
12. HTML5 et Audio Rappel sur les formats audio • De nombreux codecs existent • Moins nombreux sont ceux utilisés fréquemment 12
13. HTML5 et Audio Sur le Web, six formats (1) 13 MP3 • Le plus répandu • Codec fermé et breveté (€€€) AAC • Moins répandu, meilleure qualité • Codec fermé et breveté également (€€€€) WAV • Pas de dégradation • Pas de compression non plus : très lourd !
14. HTML5 et Audio Sur le Web, six formats (2) 14 Speex • Codec spécialisé dans la voix • Codec libre sans brevets Opus • Nouveau codec, idéal pour toute situation • Codec libre sans brevets Vorbis • Excellent taux de compression • Codec libre sans brevets • Empaquetés dans OGG
15. Balise <audio>
16. HTML5 et Audio Démonstration 16 Démonstration (avec du code !)
17. HTML5 et Audio Usage de la balise • Forme simple : • <audio src="http://example.com/sympa.ogg" controls></audio> • Forme plus complète : • <audio controls id="player"> <source src="http://example.com/sympa.mp3" type="audio/mpeg" /> <source src="http://example.com/sympa.ogg" type="audio/ogg; codecs=vorbis" /> Votre navigateur ne supporte pas HTML5. <a href="http://example.com/sympa.ogg"> Télécharger </a> </audio> 17
18. HTML5 et Audio Une balise complète • autoplay Démarre la lecture dès que possible • preload Télécharge automatiquement le contenu nécessaire pour démarrer la lecture sans délai. • controls Affiche une barre de contrôle (lecture, pause, muet) • loop Redémarre la lecture à la fin de l’audio. • mediagroup Groupe le média avec un autre. • src Indique la/les sources du média (séparés par des espaces). 18
19. HTML5 et Audio Plus loin : les APIs
20. HTML5 et Audio Le but : « utiliser » l’audio • Pour créer des visualisations • Pour générer des sons • Pour créer des œuvres artistiques multimédia • …dans le navigateur ! 20
21. HTML5 et Audio Deux APIs, un standard • Gecko : Firefox • WebKit : Chrome, Android, Safari, iOS… 21 Audio Data API Web Audio API
22. HTML5 et Audio Audio Data API • Se base sur un évènement JS simple : • MozAudioAvailable • L’évènement contient deux propriétés : • Le framebuffer, contenant les samples • Le timestamp, situant ces samples dans le temps (en secondes) • Et sur une méthode simple : • MozWriteAudio • La méthode présente un paramètre : • Un framebuffer, tableau contenant des samples 22
23. HTML5 et Audio Web Audio API • S’articule autour d’AudioNodes qui se connectent entre eux • Le graphe résultant définit comment le son doit être rendu • Les nœuds peuvent être du code natif, ou du Javascript • Autant de possibilités qu’avec Audio Data API • …l’optimisation en plus ! 23
24. HTML5 et Audio API Audios 24 Démonstration (avec une bibliothèque : Dancer.js)
25. HTML5 et Audio Conclusion
26. HTML5 et Audio Conclusion • Tout se fait dans le navigateur • Une utilisation facile • Des problèmes de formats résolubles facilement (MP3 + Opus) • De nouveaux horizons d’usages • Le tout, standardisé ! 26
27. HTML5 et Audio Références • Dive Into HTML5, Mark Pilgrim and al. E-book disponible sur http://diveintohtml5.info/ • The audio element, HTML Living Standard, W3C • http://www.w3.org/TR/html5/embedded-content-0.html#the-audio-element • Introducing the Audio API Extension (et articles connexes), MDN : Mozilla Developer Network • https://developer.mozilla.org/ • Web Audio API, W3C Audio Group • https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html 27