Introduction à AmplitudeJS

Introduction à AmplitudeJS

Table des matières

1      Principe

2      Installation et première main sur AmplitudeJS

  1. Installation
  2. Première main sur AmplitudeJS

Glossaire

Sitographie

 

  • Principe

AmplitudeJS est une librairie Javascript permettant d’avoir un media player* sur son client web. Son principe réside en l’affichage d’une interface type Spotify, afin de gérer une bibliothèque de musiques sur son poste ou son serveur.

Les fonctionnalités de cette librairie sont principalement : toutes les actions que peut faire un lecteur audio (lecture, stop, pause, suivant, précédent…).

Un autre avantage d’AmplitudeJS est que le lecteur peut tout aussi bien être personnalisé, afin d’avoir un design propre à notre goût.

Voici un exemple de ce que l’on peut faire avec AmplitudeJS

 

 

  • Installation et première main sur AmplitudeJS

  1. Installation

Amplitude.js ne nécessite pas d’installation à proprement dite. Etant donné que c’est une librairie JavaScript, on a la possibilité de l’ajouter directement dans notre code HTML.

Pour cela, il existe trois façons :

  1. Récupérer directement sur internet une url CDNJS, et l’intégrer entre les balises <head>
  2. Si un injecteur de dépendances est installé sur votre ordinateur, notamment NPM, Amplitude.js est installable ainsi.
  3. Télécharger le dossier manuellement sur le github et intégrer les fichiers au projet

 

Dans notre cas, on utilisera la première option, en allant sur CDNJS, et en cliquant sur ce lien :

https://cdnjs.com/

Puis rechercher Amplitude et récupérer le lien que l’on mettra de côté pour le mettre dans notre page html. Si vous ne trouvez pas, voici le lien ci-dessous :

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/amplitudejs/3.2.3/amplitude.min.js"></script>

Dans ce tutoriel, nous allons utiliser la version 3.2.3, qui reste la plus stable pour le moment.

NB : Par ailleurs, étant donné que cette librairie est indépendante, elle utilise uniquement du Javascript, donc il n’y a pas d’intérêt d’ajouter jQuery.

  1. Première main sur AmplitudeJS

Cette première main sur AmplitudeJS se déroulera en deux étapes.

La première consistera à faire un media player simple, et ensuite, nous partirons sur une application un peu plus développée.

  • Media player simple

Ci-dessous le visuel de notre première application :

 

Pour commencer, générer un index.html basique avec votre environnement tel que ci-dessous :

<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
</body>
</html>

 

Ensuite, il va nous falloir intégrer toutes les libraires javascript et CSS dont on aura besoin par la suite.

Veillez à créer un fichier app.js et app.css, que vous intégrerez aussi par la suite.

Le corps de votre page web, devrait ressembler à ci-dessous :

<!DOCTYPE html>

<html>

<head>
<title>Amplitude JS</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/amplitudejs/3.2.3/amplitude.min.js"></script>
<script type="text/javascript" src="app.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="app.css" />
</head>

<body></body>
</html>

AmplitudeJS fonctionne par référence dans votre site web, c’est-à-dire qu’il va aller chercher sur votre serveur ou dans un dossier en local, toutes les informations nécessaires à l’affichage de ou des chansons.

Pour cela, il suffit simplement d’ajouter dans une balise script, un JSON comprenant les informations sur votre ou vos chansons. Dans notre exemple, nous prendrons pour un premier temps une simple chanson, mais par la suite, nous créerons une playlist, et de ce fait, l’affichage et la lecture de plusieurs chansons.

Voici ci-dessous le JSON à intégrer :

<script type="text/javascript">
Amplitude.init({
"bindings": {
37: 'prev',
39: 'next',
32: 'play_pause'
},
"songs": [
{
"name": "Clubbed to death",
"artist": "Matrix",
"album": "Clubbed to death",
"url": "songs/clubbed-to-death-Matrix-soundtrack.mp3",
"cover_art_url": "img/matrix.jpg"
}
]
});
</script>

Décortiquons un peu cet objet verbeux.

Amplitude.init : correspond à la classe principale, permettant d’utiliser la méthode d’AmplitudeJS d’initialisation.

Bindings : les bindings correspondent à des liaisons avec des codes de boutons. Par exemple ici, nous avons relié le code 37 pour précédent, 39 pour suivant et 32 pour la lecture ou la pause, pour ensuite les relier à des touches du clavier.

Songs : Songs est par défaut un tableau d’objets, correspondant à des chansons, lui-même composé de plusieurs propriétés :

  • Name : le nom de la chanson
  • Artist : le nom de l’artiste ou le groupe
  • Album : le nom de l’album s’il est connu
  • Url : lien à mettre ici du fichier mp3 situé sur votre ordinateur ou sur le serveur
  • Cover_art_url : une image, prend du PNG ou JPG par défaut

Pour notre cas, j’ai choisi une chanson de la bande originale du film Matrix.

Prochaine étape : affichage de la chanson et d’un bouton pause/lecture

Libre à vous de réaliser votre propre media player, pour ma part, j’ai fait un design assez simpliste, pour que vous compreniez un peu mieux comment fonctionne cette librairie.

Je vous propose donc, de créer un conteneur principal, qui sera composé de deux sections :

  • Le header, affichant les informations de la chanson (nom, artiste…)
  • Un bloc avec temps et une barre de progression
  1. Le conteneur principal
<div id="player"></div>
  1. Le header
<div id="headerPlayer">
   <div id="amplitude-play-pause" class="amplitude-paused" amplitude-main-play-pause="true"></div>
   <div id="infoSong">
      <span id="title" amplitude-song-info="name" amplitude-main-song-info="true">Titre de la chanson</span>
      <br>
      <span id="artist" amplitude-song-info="artist" amplitude-main-song-info="true">Artiste</span>
   </div>
   <div id="infoAlbum">
     <img id="album" amplitude-song-info="cover_art_url" amplitude-main-song-info="true" alt="album">
   </div>
</div>

Penchons-nous en détail sur ce header…

La première div permet d’ajouter le bouton pause/lecture. AmplitudeJS fonctionne avec des attributs afin d’afficher les informations à propos de la chanson qu’il récupère du JSON que l’on a renseigné dans la balise de script en bas de page.

Pour faire fonctionner le bouton, la librairie aura besoin d’un id bien spécifique, amplitude-play-pause, d’un attribut qui active la fonction, amplitude-main-play-pause et une classe CSS permettant de changer l’affichage du bouton en pause/lecture. Par défaut, la classe sera sur paused pour afficher le bouton play.

Il est recommandé d’utiliser une image côté CSS pour les boutons, plutôt que directement sur le HTML, afin d’éviter les problèmes de mauvais clics.

Attention :Les attributs qui ne sont pas préfixés par amplitude- ne seront pas interprétés par AmplitudeJS.

On peut voir ensuite que les deux autres div sont des informations sur la chanson et la couverture de l’album. Afin d’avoir l’affichage des informations, AmplitudeJS fournit un attribut, amplitude-song-info qui va analyser le JSON et récupérer la propriété demandée. Ici, on récupère le nom (name), l’artiste (artist) et la couverture de l’album (cover_art_url). Pour afficher côté HTML, il suffit de mettre à true l’attribut amplitude-main-song-info, comme fait dans l’exemple ci-dessus.

  1. Le Timer

Nous avons aussi besoin pour un media player d’avoir un affichage du temps et de la progression de la chanson que l’on est en train d’écouter.

AmplitudeJS a donc intégré plusieurs attributs, pouvant récupérer directement le temps, minutes et secondes, de la chanson.

Pour cela, il suffit d’ajouter les attributs : amplitude-duration-minutes et amplitude-duration-seconds et de mettre l’attribut amplitude-main-current- à true.

Il est possible aussi de récupérer le temps actuel de la chanson qui défile, pour cela, ajouter l’attribut amplitude-current-minutes et amplitude-current-seconds.

Enfin, pour la barre de progression, une classe CSS avec AmplitudeJS a été ajoutée, amplitude-song-played-progress. Cependant, il faut impérativement ajouter un id nommé song-played-progress pour que la barre de progression soit reconnue.

<div class="timer">
   <span class="current-time">
     <span class="amplitude-current-minutes" amplitude-main-current-minutes="true"></span>:
     <span class="amplitude-current-seconds" amplitude-main-current-seconds="true"></span>
   </span>
   <progress class="amplitude-song-played-progress" amplitude-main-song-played-progress="true" id="song-played-progress"></progress>
   <span class="duration">
     <span class="amplitude-duration-minutes" amplitude-main-duration-minutes="true"></span>:
     <span class="amplitude-duration-seconds" amplitude-main-duration-seconds="true"></span>
   </span>
</div>

Pour le moment, vous devriez avoir un affichage de ce type :

Effectivement, ce n’est pas très beau… Rendons le un peu plus esthétique.

Dirigeons nous alors dans notre fichier CSS. Voici pour la partie du lecteur de musique :

#player{
  width: 400px;
  margin: auto;
  box-shadow: 1px 5px 5px #888888;
  border-radius: 15px;
}
#headerPlayer{
  border-radius: 15px;
  padding: 10px;
  height: 80px;
  background-color: white;
}
#infoSong{
  float: left;
  font-size: 10px;
  width: 170px;
  overflow: hidden;
  margin-left: 10px;
}

Ensuite, une personnalisation des éléments d’AmplitudeJS :

#amplitude-play-pause{
  width: 70px;
  height: 70px;
  cursor: pointer;
  float: left;
}
.amplitude-paused{
  background-image: url('img/play.png');
  color: black;
  background-repeat: no-repeat;
}
.amplitude-playing{
  background-image: url('img/pause.png');
  color: black;
  background-repeat: no-repeat;
}

On peut voir que sur les classes amplitude-paused et amplitude-playing, une image en background-image a été utilisée comme dit dans la recommandation plus haut. Les images, vous pouvez prendre ce qu’il vous plaira, pour ma part, je me suis contenté de ces deux icônes :

Enfin, rendons un peu plus design les informations de la chanson :

#artist{
  font-family: "Arial", "sans-serif";
  font-size: 14px;
}

#title{
  color: #3b3b3b;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px #ffffff;
  font-family: "Arial", "sans-serif";
  margin-top: 20px;
}

#infoAlbum #album {
  width: 75px;
  height: 75px;
  float: right;
}
.timer{
  margin-left: 10px;
}

Maintenant, le rendu devrait plutôt ressembler à ci-dessous :


Rajoutons un peu plus de dynamisme sur notre media player.

Dans le script de bas de page, où nous avons le JSON, nous allons rajouter une fonction permettant d’activer la lecture ou la pause via la barre d’espace, et une avance de lecture au clic sur la barre de progression.

  1. Activer lecture/pause
window.onkeydown = function (e) {
return !(e.keyCode == 32);
};

Il suffit simplement d’écouter la touche pressée, et de regarder le code de la barre d’espace.

  1. Avance lecture
document.getElementById('song-played-progress').addEventListener('click', function (e) {
  var offset = this.getBoundingClientRect();
  var x = e.pageX - offset.left;
  Amplitude.setSongPlayedPercentage((parseFloat(x) / parseFloat(this.offsetWidth)) * 100);
});

L’avance rapide est un peu plus compliquée, car elle fait intervenir un petit calcul mathématique.

En effet, il faut récupérer la barre de progression (en javascript), et écouter le clic sur cette même barre. Ensuite, créer nous-même les rectangles correspondants à l’avance rapide. Enfin, Amplitude fournit une méthode, setSongPlayedPercentage, permettant de changer le pourcentage d’avancement de la chanson.

Ce qui nous donne un aperçu :

Après, libre à vous de personnaliser la barre de progression en mettant une meilleure couleur ou autre…

Voilà pour la première partie de ce tutoriel sur AmplitudeJS. Maintenant, passons à une amélioration de notre media player : l’ajout d’une playlist !

  • Media player avec playlist

Dans la suite de ce tutoriel, nous allons voir une autre façon d’utiliser AmplitudeJS.

En effet, lors de notre simple media player, on utilisait des div et un JSON afin de réaliser notre application.

Ici, nous allons recourir à une balise HTML5, la balise <audio>.

Tout d’abord, ajoutons les différentes chansons dont nous avons besoin. Pour cela, nous aurons besoin d’une div avec un id spécifique à Amplitude, amplitude-playlist, tel que ci-dessous.

<div id="amplitude-playlist">
   <audio id="1" amplitude-artist="Linkin Park" amplitude-title="What I've done" amplitude-album="What I've done" amplitude-audio-type="song"
   amplitude-album-art-url="Images/abstract.jpg" amplitude-visual-element-id="song-1">
      <source src="songs/Linkin Park - What I've Done.mp3" type="audio/mp3" />
   </audio>
   <audio id="2" amplitude-artist="Bring me the horizon" amplitude-title="Don't go" amplitude-album="There Is a Hell, Believe Me I've Seen It. There Is a Heaven, Let's Keep It a Secret"
   amplitude-audio-type="song" amplitude-album-art-url="Images/abstract.jpg" amplitude-visual-element-id="song-2" preload="none">
      <source src="songs/Bring Me The Horizon - Don't Go.mp3" type="audio/mp3" />
   </audio>
   <audio id="3" amplitude-artist="Disturbed" amplitude-title="The sound of silence" amplitude-album="Cover" amplitude-audio-type="song"
   amplitude-album-art-url="Images/abstract.jpg" amplitude-visual-element-id="song-2" preload="none">
      <source src="songs/Disturbed - The Sound Of Silence.mp3" type="audio/mp3" />
   </audio>
</div>

Si on se penche un peu plus sur une piste audio par exemple, on remarque qu’elle dispose de plusieurs attributs :

  • Amplitude-artist, représente l’artiste
  • Amplitude-title, représente le titre de la chanson
  • Amplitude-album, représente le nom de l’album
  • Amplitude-audio-type, détermine le type audio, ici nous avons song pour une chanson
  • Amplitude-album-art-url, représente l’url de l’image pour afficher la couverture de l’album
  • Amplitude-visual-element-id, donne un id à la chanson afin de pouvoir la reconnaître
  • Preload est un attribut HTML5 pour la balise audio. Elle permet de ne pas charger les chansons directement.

Ajoutons maintenant les différents boutons pour manipuler la playlist :


<div id="bottom">
    <div class="buttons" onclick="togglePlaylist()">
    <img src="img/toggle-down.png" width="30" height="30" />
  </div>
  <div class="buttons" id="amplitude-previous">
    <img src="img/left-arrow.png" width="30" height="30" />
  </div>
  <div class="buttons" id="amplitude-next">
    <img src="img/right-arrow.png" width="30" height="30" />
  </div>
</div>

J’ai simplement récupéré des icônes adéquates pour avoir l’action précédent, suivant et replier la liste.

AmplitudeJS permet d’ajouter des ids dans les éléments HTML afin d’avoir les actions des boutons que l’on souhaite. Dans notre cas, nous aurons donc :

  • Amplitude-previous pour précédent
  • Amplitude-next pour suivant

Le CSS quant à lui ressemble à cela :


#bottom{
  background-color: white;
  height: 45px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

Après avoir ajouté les différents boutons, passons à un affichage de la playlist.

Pour cela, nous utiliserons un conteneur avec un id playlist, avec à l’intérieur les différents musiques que l’on souhaite avoir dans notre playlist.

<div id="playlist"></div>

Voici le squelette principal, et ensuite nous rajoutons les chansons…


<div id="playlist">
    <div class="songs" id="1">
      <div class="albumPlaylist">
        <img src="Images/abstract.jpg" width="150" height="150">
      </div>
      <div class="information">
        Titre: What I've done
        <br> Artiste: Linkin Parl
        <br> Album: What I've done
      </div>
      <div class="playlist-audio-controls">
        <div class="amplitude-play-playlist" amplitude-song-id="1"></div>
      </div>
    </div>
</div>

Décomposons une chanson. Elle dispose premièrement d’un id, pour pouvoir la repérer dans la liste, en effet, amplitude se sert de cet id pour modifier le json qu’il manipule. Il faut donc le renseigner à la main pour notre exemple.

Ensuite, on peut rajouter l’image de l’album si on le souhaite, comme fait ci-dessus. Par ailleurs, il faut ajouter à la main les informations de la chanson (titre, artiste…). Et enfin, nous utiliserons ce même id, dans un attribut amplitude, nommé amplitude-song-id pour qu’Amplitude sache où il en est dans la liste. Ceci permettra par exemple d’effectuer ce que l’on appelle un shuffle, un mix des chansons, afin d’avoir une playlist aléatoire.

Voici le CSS assez simple que j’ai réalisé :


#playlist{
  height: 400px;
  width: 100%;
  background-color: #940494;
  color: white;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 11px;
}
.songs{
  clear: both;
  float: left;
  margin-bottom: 3px;
  width: 100%;
 border-bottom: solid 2px white;
}

Maintenant, ajoutons d’autres chansons, tout en modifiant les id, qui nous donne :


<div id="playlist">
    <div class="songs" id="1">
      <div class="albumPlaylist">
        <img src="Images/abstract.jpg" width="150" height="150">
      </div>
    <div class="information">
       Titre: What I've done
       <br> Artiste: Linkin Parl
       <br> Album: What I've done
    </div>
    <div class="playlist-audio-controls">
       <div class="amplitude-play-playlist" amplitude-song-id="1"></div>
    </div>
    </div>
    <div class="songs" id="2">
    <div class="albumPlaylist">
    <img src="Images/abstract.jpg" width="150" height="150">
    </div>
    <div class="information">
        Titre: Don't go
        <br> Artiste: Bring me the horizon
        <br> Album: There Is a Hell, Believe Me I've Seen It. There Is a Heaven, Let's Keep It a Secret.
    </div>
    <div class="playlist-audio-controls">
    <div class="amplitude-play-playlist" amplitude-song-id="2"></div>
    </div>
    </div>
    <div class="songs" id="3">
     <div class="albumPlaylist">
     <img src="Images/abstract.jpg" width="150" height="150">
     </div>
     <div class="information">
        Titre: The sound of silence
        <br> Artiste: Disturbed
        <br> Album: Cover
     </div>
     <div class="playlist-audio-controls">
         <div class="amplitude-play-playlist" amplitude-song-id="3"></div>
     </div>
     </div>
</div>

On peut ensuite, ajouter un peu de style, pour rendre un peu plus propre l’affichage


.songs:hover{

background-color: #fa37fa;

cursor:pointer;

}

 

.albumPlaylist img {

float: right;

}

C’est-à-dire, lorsque l’on passe le curseur sur une chanson de la playlist, une coloration se fait, etc…

Ce qui nous donne ce visuel final:

Avec le curseur sur une chanson :

Libre à vous de réaliser votre propre design, en mieux, que ce qui est proposé dans ce tutoriel.

 

Cette première approche a été réalisée avec l’aide du site officiel d’AmplitudeJS ainsi que son github, dont voici les liens :

Documentation amplitude : https://521dimensions.com/open-source/amplitudejs/docs

Lien Github : https://github.com/521dimensions/amplitudejs

 

La documentation y est très bien expliquée même si elle reste en anglais.

 

Glossaire

 

Media player : Un media player est un lecteur multimédia qui permet de lire, ou manipuler des données, qu’elles soient audio, vidéo ou autre.

JSON : JSON ou JavaScript Object Notation est un format de données, simple et facile à lire/écrire. Il est moins verbeux que le format XML, et fait plus penser à un langage objet.

Composé d’une propriété sous forme de string et d’une valeur, on peut voir ici un système de clé/valeur.

 

Sitographie

https://github.com/521dimensions/amplitudejs

https://521dimensions.com/open-source/amplitudejs/examples/single-song

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *