RAPPEL: L’an dernier, on s’est payé la traite: on a créé un calendrier-affiche 2011 que nous avons offert à nos invités lors du 5e anniversaire de notre agence web. À l’intersection de l’imprimé et de l’interactif, l’affiche présente, en son centre, un code QR qui permet d’accéder à un contenu numérique renouvelé chaque mois.
Pour le projet de janvier, nous avons d’abord eu une idée toute simple: offrir aux visiteurs un mix musical concocté par le très sympathique Patrick Williams pour les célébrations du Nouvel An. Fait de pistes distribuées gratuitement sur Internet, nous pensions l’offrir dans un lecteur audio Flash « conventionnel ». C’était simple et pratique, puisque nous avions déjà plusieurs projets à livrer.
Sauf qu’on n’aimait pas trop la notion de « simple » (pas plus que celle de « pratique », d’ailleurs…)
Après avoir réalisé quelques maquettes du lecteur et de son environnement visuel, nous avons eu l’idée de le programmer en HTML et JavaScript. Ce projet devenait donc un excellent prétexte pour explorer une nouvelle possibilité offerte par le HTML5, qui est supporté par l’ensemble des fureteurs (à l’exception du Saint-Damné Internet Explorer, dont la version 9 se fait attendre). La partie visuelle est apparue plus tard, lorsque j’ai décidé d’animer un triangle sur un trajet imaginaire qui se dupliquait au rythme de la musique, mais ça c’est une autre histoire…
HTML5
Définissons d’abord une chose: qu’est-ce que le HTML5? HTML5 est la prochaine version majeure du HTML, le langage de balisage qui sert à structurer une page web, rien de plus. À lui seul, il n’est pas suffisant pour rivaliser avec un outil comme Flash. De façon générale, on regroupe, sous l’appellation « HTML5 », HTML5, CSS3 et JavaScript: un trio qui offre des possibilités rivalisant facilement avec Flash. C’est donc en combinant les nouveaux éléments de structure et de sémantique offerts par le HTML5, les possibilités d’affichage graphique du CSS3 et du bon vieux JavaScript que les possibilités deviennent vraiment intéressantes.
Le lecteur audio codé en HTML5 et en JavaScript
Nous avons utilisé le lecteur gratuit jPlayer comme base afin de se familiariser avec les rouages d’un lecteur audio codé au format HTML5, pour ensuite le modifier afin qu’il réponde à nos besoins. Nous avons pu explorer les possibilités offertes par cette technologie en terme de « streaming » et de support sur différents fureteurs et sur les appareils mobiles.
L’avantage principal de cette technique selon moi: aucun plug-in externe n’est requis pour la consultation. À une époque où les sites web sont de plus en plus consultés en version mobile, il m’apparaît farfelu d’utiliser une technologie qui n’est pas compatible avec un iPhone ou un téléphone Android. Surtout qu’il est difficile de trouver un avantage majeur à un lecteur codé en Flash et qu’en l’absence de support sur une plateforme donnée, on peut toujours se rabattre sur une présentation en Flash.
D’un point de vue graphique, on peut créer une présentation complexe avec un ensemble complet d’éléments de contrôle personnalisés: boutons « Play », « Pause », barre de progression, etc. On peut aussi récupérer les données d’une piste audio et les visualiser en temps réel (tel que démontré ici ou encore ici). Ce processus est encore embryonnaire et, comme l’adoption de certains éléments du JavaScript se fait toujours au compte-gouttes sur certains fureteurs, on ne peut pas encore en garantir le bon fonctionnement, mais ça s’en vient.
Aussi, on peut lire un seul fichier audio ou construire une liste de lecture de plusieurs pistes. Encore une fois, le JavaScript nous permet de gérer cette liste de lecture et il est possible d’ouvrir plusieurs connexions simultanées afin de mettre en mémoire plusieurs pistes audio.
Sans oublier que, d’un point de vue des ressources, un lecteur HTML natif est beaucoup plus léger qu’un lecteur construit à l’aide d’un plug-in externe.
Adoption du HTML5
Le seul hic en ce moment, c’est l’adoption du HTML5 et du CSS3 par les différents fureteurs. C’est peut-être là le seul avantage de Flash sur HTML5. Bien qu’on constate que Safari, Chrome et Firefox ont fait beaucoup de chemin, certains tirent toujours de la patte. À preuve, les premières ébauches du HTML5 ont été esquissées en 2004 (il y a presque 7 ans!) et ce n’est que récemment qu’on a commencé à en parler de façon sérieuse.
La différence: le HTML5 n’est qu’une série de recommandations dont l’adoption est laissée au bon vouloir de chacun. On tape sur Internet Explorer depuis la nuit des temps, mais c’est toujours le fureteur le plus populaire sur la planète! À l’opposé, Flash est un plug-in externe sur lequel Adobe a un contrôle absolu.
Ma conclusion
HTML5 a certainement un avenir plus brillant que Flash, mais nous devrons attendre encore un peu avant d’opérer une transition complète vers ce nouveau standard. En attendant, il est bon d’explorer cette nouvelle façon de faire, mais nous devons prévoir des alternatives afin de préserver l’expérience usager.
