Aujourd’hui nous allons découvrir AmplitudeJS qui permet de mettre en place sur vos page un lecteur audio flexible et complètement personnalisable. Comme on peux le voir sur leurs exemples avec un peu de travail on peux avoir des résultats très sympas.
Avant d’en arriver la, je vous propose un exemple bien plus simple. Le résultat est visible ici et il suffit de regarder le code source de la page pour comprendre le fonctionnement.
Le visuel obtenu sera le suivant, mais graphiquement tout est possible, il n’y à pas de contraintes à ce niveau.
Quelques explications supplémentaires ci-dessous.
Pour commencer on va inclure la « library » « amplitude.js », ainsi que « bootstrap », « font-awesome » et un fichier « styles.css » pour la mise en page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/style.css">
<!-- JS -->
<script src="./js/amplitude.min.js"></script>
Dans le corps de la page mettons en place notre player en utilisant les éléments « amplitude », les boutons « bootstrap » et les icones « font-awesome » :
<div class="glob-btn">
<span class="amplitude-prev btn btn-primary"><i class="fa fa-step-backward" aria-hidden="true"></i></span>
<span class="btn amplitude-play-pause btn-primary" amplitude-main-play-pause="true"><i class="fa fa-play" aria-hidden="true"></i> <i class="fa fa-pause" aria-hidden="true"></i></span>
<span class="my-next-btn amplitude-next btn btn-primary"><i class="fa fa-step-forward" aria-hidden="true"></i></span>
</div>
<div>
<div class="meta-name" amplitude-song-info="name" amplitude-main-song-info="true"></div>
<progress class="amplitude-song-played-progress" amplitude-main-song-played-progress="true" id="song-played-progress"></progress>
</div>
</div>
On ajoute juste quelques ligne pour le style dans notre fichier « styles.css »
.glob-player{padding: 10px;border-radius: 5px;background: #000;}
.glob-player .glob-btn{text-align: center;}
.glob-player .meta-name{color:#fff;text-align: center;padding:10px;}
/*progres-bar*/
.amplitude-song-played-progress {
-webkit-appearance: none;-moz-appearance: none;appearance: none;
background-color: #ccc;width: 100%;height: 5px;display: block;border: none;
}
progress.amplitude-song-played-progress[value]::-webkit-progress-bar {
background-color: #0069d9;
}
progress.amplitude-song-played-progress[value]::-moz-progress-bar {
background-color: #0069d9;
}
progress.amplitude-song-played-progress[value]::-webkit-progress-value {
background-color: #0069d9;
}
Il nous suffit maintenant d’uploader nos MP3 dans le dossier que l’on souhaite et d’indiquer à « amplitude » de les prendre en charge.
Amplitude.init({
"songs": [
{
"name": "Le bal masqué",
"artist": "Opium du peuple",
"album": "La révolte des opiumettes",
"url": "./song/le-bal-masque.mp3",
},
{
"name": "Poupée de cire, poupée de son",
"artist": "Opium du peuple",
"album": "La révolte des opiumettes",
"url": "./song/poupee-de-cire.mp3",
}
],
callbacks: {
//pour démarrer la lecture à cuaque fois que l'on passe au morceau suivant ou préc
song_change: function () {
Amplitude.play();
}
}
});
</script>
Salut,
j’arrive pas à faire fonctionner ce lecteur audio, le css fonctionne méais pas la partie JS
Génial ! Tu as sauvé ma vie !!
Juste une correction, il faut ajouter des « data- » sur la ligne suivante
ce qui donne :
Exemple de page où cela fonctionne : http://www.tousauxbalkans.net/Radio
Zut, le HTML a été interprété
je disais donc
div class= »meta-name » amplitude-song-info= »name » amplitude-main-song-info= »true »
doit devenir
div class= »meta-name » data-amplitude-song-info= »name » data-amplitude-main-song-info= »true »
sinon le titre de la chanson n’apparaît pas
Les exemple sont maintenant dispo sur: https://521dimensions.com/open-source/amplitudejs/docs/examples/