Créer un player audio en HTML5, 1 : fonctionnalités et design

Aujourd'hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Dudley Storey nous entraîne par étapes dans la construction d'un super player.

Par

Vous êtes peut-être trop jeune pour vous rappeler l’époque de WinAmp, qui était (dans sa première incarnation) une appli permettant d’écouter des mp3 avec la possibilité de personnaliser votre thème. Aujourd’hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Nous allons planifier et construire ce player, ce qui nous permettra de mieux connaître HTML5 multimedia, JavaScript DataViews et l’API WebAudio.

Dans cette première partie, nous allons mettre en place une planification du design de l’interface player. Les articles qui suivront seront consacrés au code.


image

Le player de base

Tout d’abord, dressons une liste raisonnable de fonctionnalités :

  • Évidemment, le code devrait jouer des fichiers MP3 : tout à fait réalisable, maintenant que Firefox suppporte le codec. Pour simplifier, au début notre player aura juste une piste prédéfinie.
  • Nous aurons besoin de contrôles audio basiques : Play, Pause, Volume et Mute.
  • Une barre de progression devrait montrer combien de musique a été jouée, et combien il en reste à jouer.
  • Un timer devrait montrer combien il reste de temps à jouer sur la piste.
  • Un autre bouton devrait permettre de jouer la piste en boucle.
  • Le nom de la piste et de l’artiste, ainsi que les informations relatives à l’album devraient être affichées (dans la première version du player, cette information sera déjà connue).

Le player avancé

Il est important d’esquisser déjà les améliorations futures du player audio. Elles comprendront les fonctionnalités suivantes :

  • Un clic sur la barre de progression devrait faire avancer ou revenir en arrière la piste audio.
  • La possibilité de charger des pistes, et à partir de celles-ci de créer des playlists. Pour cela, nous aurons besoin d’un bouton Load.
  • Tout metatag d’information ID3 sur ces pistes — nom, année, artiste et album — sera lisible et affichable.
  • Un VU-mètre montrera les niveaux sonores des canaux gauche et droit.

Fonctionnalité et tests

Comme nous avons une liste croissante de fonctions, l’interaction doit être soignement prise en compte, même dans la version la plus simple du player.

  • L’interface doit être simple : le bouton Play devrait se transformer en Pause, plutôt que d’avoir deux boutons séparés pour chacune de ces actions.
  • Un clic sur Mute devrait faire glisser le niveau du volume vers 0 et mettre en pause le son. Un clic sur ce même bouton fait revenir le son au volume initial.
  • Quand la piste est terminée, elle doit revenir au début et être en pause, sauf si le bouton Loop est activé.

Les fonctions avancées doivent également être testées, pour vérifier qu’elles sont réalisables.

Ressources

Il est important de savoir de quelles ressources et quel contenu nous disposons avant de nous lancer dans le projet. Dans notre exemple, j’ai ce qui suit :

  • Une piste musicale de Nine Inch Nails, sous licence Creative Commons.
  • Les éléments HTML5 <audio> et <progress> et un JavaScript compatible.
  • Des fichiers PNG pour les boutons et le background du player, basés sur des esquisses initialement réalisées.

Design initial

Je préfère toujours travailler avec un stylo et du papier, pour avoir une idée grossière du design. La photo illustrant l’article montre quelques esquisses initiales, réalisées sur des pages GridBooks (un outil que je présenterai dans un article à venir).

Expansion et accessibilité

Il est important également de planifier la maintenance, l’accessibilité et l’expansion de notre code. À cette fin, j’écrirai des fonctions clairement définies dans mon JavaScript, avec le HTML et le CSS correspondant, ainsi que les affordances d’accessibilité. Idéalement, l’audio comprenant un contenu ou des paroles parlées devrait être accompagné de sous-titres, mais ce sera sans doute pour une série d’articles à part.

Lire l’article suivant : Créer un player audio en HTML5, 2e partie : le prototype.


Liste des articles de cette série :

Créer un player audio en HTML5, 1ère partie : fonctionnalités et design
Créer un player audio en HTML5, 2e partie : le prototype
Créer un player audio en HTML5, 3e partie : microdonnées
Créer un player audio en HTML5, 4e partie : (tba)


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.