Notre prototype de player audio HTML5 est encore assez brut. Nous allons lui donner son look définitif et ajouter quelques microdonnées pour aider les moteurs de recherche. Par Dudley Storey.

Par

Dans les deux premiers articles de cette série, nous avons vu la conception et la codification d'un player audio personnalisé. Le prototype que nous avons construit jusqu'à présent est relativement “brut”, sans style : le HTML5 et le JavaScript ont été écrits aussi rapidement que possible pour prouver que le concept de base est fonctionnel. Dans cet article, je me concentrerai sur l'amélioration du look de notre player et sur l'ajout de microdonnées, avant d'introduire de nouvelles fonctionnalités dans la 4ème partie.

Éléments audio

Pour commencer, regardons le DOM que nous avons jusqu'ici. Le script de la 2ème partie de cette série a ajouté à notre balisage de base des contrôles par slider, et autres fonctionnalités via un JavaScript progressif, pour créer ceci :

<figure id="audioplayer">

  <figcaption>
    <div>Track<span>24 Ghosts III</span></div>
    <div id="album">Album<span>Ghosts III</span></div>
    <div id="artist">Artist<span>Nine Inch Nails</span></div>
    <div id="time">Time<span>00:00</span></div>
  </figcaption>

  <div id="fader">
    <input type="range" min="0" max="1" step="any" value="1" id="volumeSlider">
    <button type="button">volumehigh</button>
  </div>

  <div id="playback">
    <button type="button">Play</button>
    <progress min="0" max="100" value="0" id="playhead"></progress>
  </div>

  <audio src="/assets/audio/24-ghosts-III.mp3" id="audiotrack" preload="auto"></audio>

</figure>

Nous allons maintenant ajouter quelques microdonnées, à la fois pour aider les moteurs de recherche et pour ajouter quelques hooks pour JavaScript, que nous utiliserons plus tard dans cette série. Le code devient :

<figure id="audioplayer" itemprop="track" itemtype="http://schema.org/MusicRecording">

  <figcaption>
    <div>Track
    <span itemprop="name">24 Ghosts III</span>
    </div>
    <div id="album">Album
    <span itemprop="inAlbum">Ghosts III</span>
    </div>
    <div id="artist">Artist
    <span itemprop="byArtist">Nine Inch Nails</span>
    </div>
    <div id="time">Time
    <span>00:00</span>
    </div>
  </figcaption>

    <meta itemprop="duration" content="PT2M29S">

  <div id="fader">
    <input type="range" min="0" max="1" step="any" value="1" orient="vertical" id="volumeSlider">
    <button type="button">volumehigh</button>
  </div>

  <div id="playback">
    <button type="button">Play</button>
    <progress min="0" max="100" value="0" id="playhead"></progress>
  </div>

    <audio src="/assets/audio/24-ghosts-III.mp3" id="audiotrack" itemprop="audio" preload="auto"></audio>

</figure>

Donner du style à notre audio

Le CSS utilisé dans le player fait appel à quelques techniques avancées ou intermédiaires. Le CSS de départ initialise le modèle box-sizing, fixe le style général du player et cache complètement l'élément <audio> :

//CSS
* {
box-sizing: border-box;
}
figure#audioplayer {
  border: 1px solid #000;
  background: url(dark_wall.png) #333;
  overflow: hidden;
  width: 27rem;
  padding: .4rem;
  margin: 2rem auto;
}
figure#audioplayer audio {
    width: 0; height: 0;
}

Ensuite, les divers éléments constitutifs du player sont stylisés, on ajoute des bordures de chaque côté et entre les éléments. Le range input est mis en position verticale pour WebKit et Chrome à l'aide de CSS :

//CSS
figure#audioplayer figcaption {
  width: 21.5rem;
  font-size: 0;
  margin: .45rem;
  background: #000;
  float: left;
  border: 1px solid #555;
  text-align: left;
}
figure#audioplayer figcaption div {
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: .8rem;
  display: inline-block;
}
figure#audioplayer figcaption div span {
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem;
}
div#album {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  width: 100%;
}
div#time {
  width: 7.55rem;
  border-left: 1px solid #555;
}
input#volumeSlider{
  -webkit-appearance: slider-vertical;
  width: 35px;
}

Les boutons utilisent des fontes-icônes sémantiques avec ligatures pour transformer leur texte en image.

figure#audioplayer button {
  width: 3rem;
  height: 3rem;
  background: #000;
  color: #fff;
  border: none;
  -webkit-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}
#playback {
    clear: both;
}
div#fader {
    display: inline-block;
}

L'élément <progress> est également stylisé. Il fait appel à HSL pour faciliter d'éventuelles modifications ultérieures :

#playback progress {
  margin-left: 1rem;
  width: 20rem;
  height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar,
progress::-moz-progress-bar,
progress::progress-bar {
    background: hsl(44,100%,44%);
}
progress::-webkit-progress-value {
    background: hsl(44,100%,44%);
}
progress::-moz-progress-bar {
    background-color: hsl(44,100%,44%);
}

Enfin, nous rendons notre player responsif, les éléments étant réarrangés et le padding diminué à mesure que le viewport se rétrécit :

@media screen and (max-width:500px){
  div#time {
  display: block !important;
  border-top: 1px solid #555;
  width: 100%;
  }
  figure#audioplayer {
    width: 100%;
    padding: .2rem;
  }
    figure#audioplayer figcaption div {
    padding: .4rem;
  }
}

@media screen and (max-width:450px){
  figure#audioplayer figcaption {
      width: 16rem;
  }
  #playback progress {
      width: 220px;
  }
}

@media screen and (max-width:400px) {
  figure#audioplayer figcaption {
    width: 14rem;
  }
}

Dans le prochain article, j'utiliserai l'API WebAudio pour ajouter et animer les canaux gauche et droit d'un VU-mètre.

Lire l'article suivant (à venir).


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)


Article original paru le 6 février 2015 dans the new code.

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 the new code des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l'aimable autorisation de the new code et de l'auteur.
Copyright the new code © 2015.