Un Audio Player simple intégré
Un Audio player simple, avec playlist !
très simple, responsive design, intégré directement dans un article, une boite libre de GuppY.
(une version .html dans un Iframe peut permettre de l'installer ailleurs aussi -voir plus bas dans l'article-)
L'origine de cet audio player est multiple, sur différents sites, il est difficile d'en créditer un auteur en particulier. Une recherche rapide sur le Web, peut donner beaucoup de sources d'inspiration et notamment ici pour l'essentiel.
L'aspect de la playlist peut être réglé assez facilement, mais le lecteur lui même est "classique" et dépend du navigateur utilisé. Il faut donc tester ensuite le rendu (en particulier pour les marges entre le titre et le lecteur et entre le lecteur et la playlist, très variables suivant le navigateur...).
Musiques, libres de droits, issues de Dogmazic
Ci-dessous, la partie <style></style> et la partie <script></script> à placer dans le code source, au début de l'article ou de la boite libre (éventuellement la partie surlignée en violet de <style></style> peut être placée dans le fichier styleplus de la skin). Ces parties sont commentées le plus possible pour vous aider à les adapter.
<style type="text/css">
#playlist,audio{ /*attribut de la playlist et du lecteur*/
width: 90%; /*largeur en % pour être responsive, mais peut être en pixels*/
padding:5px 0px;
}
audio { /*marge extérieure haute du lecteur*/
margin-top:20px;
}
#playlist{ /*attribut de la playlist*/
margin:50px auto 0px; /*marges extérieures, auto pour centrer horizontalement*/
background: linear-gradient(rgba( 230, 230, 230, 0.5), rgba( 180, 180, 180, 0.5)); /*couleur de fond*/
border: solid 2px #197793; /*bordure : épaisseur-nature-couleur*/
border-radius: 10px; /*arrondis*/
}
h1 { /*attributs titre*/
font-size: 16px; /*taille police*/
font-weight:bold; /*gras police : normal ou bold*/
width: 90%; /*largeur en % pour être responsive, mais peut être en pixels*/
margin:5px auto 10px; /*marges extérieures, auto pour centrer horizontalement*/
color: #FFFFFF; /*couleur du texte*/
border-radius: 10px; /*arrondis*/
padding: 5px; /*marges intérieures*/
background: linear-gradient(rgba( 29, 41, 41, 1.0), rgba( 25, 119, 147, 1.0)); /*couleur de fond*/
}
h1 a, h1 a:hover { /*attributs liens et liens survolés du titre*/
font-weight:bold; /*gras police : normal ou bold*/
color: #CA7C3A; /*couleur du texte*/
background:none; /*pas de fond*/
}
#playlist ul { /*attribut de la liste*/
list-style:none; /*pas de puce*/
margin:0; /*marges extérieures*/
padding:0; /*marges intérieures*/
}
#playlist .active a { /*attributs de la plage active*/
text-decoration: none;
color:#7B1E00; /*couleur du texte*/
background: #95D7E8; /*couleur de fond*/
border-radius: 4px; /*arrondis*/
}
#playlist li { /*attributs éléments liste*/
border-bottom: 1px solid #7B1E00; /*bordure basse : épaisseur-nature-couleur*/
}
#playlist li:last-child { /*attributs dernier élément liste*/
border:none; /*pas de bordure*/
}
#playlist li a{ /*attributs des plages*/
color:#197793; /*couleur du texte*/
padding: 3px; /*marges intérieures*/
display: block;
}
#playlist li a:hover{ /*attributs des plages survolées*/
color:#7B1E00; /*couleur du texte*/
text-decoration: none;
}
div.center { /*centrage (de la playlist et du lecteur)*/
text-align: center;
}
</style>
<!-- PARTIE SCRIPT : NE PAS MODIFIER
sauf volume initial .1 .2 .3 .4 etc... -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length;
audio[0].volume = .3; // mettre le volume initial
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
});//]]>
</script>
Ci-dessous, la partie du code qui permet les appels aux fichiers musicaux, à placer où vous le souhaitez dans l'article. Il faut bien sûr adapter les liens, et ensuite, il est tout à fait possible de personnaliser directement dans l'éditeur de GuppY l'écriture des titres. Notez que le premier item à une classe particulière : c'est le premier sélectionné... Mais ce n'est pas une obligation (car le player ne démarre pas automatiquement), et on peut en cliquant démarrer n'importe quel morceau, la playlist se déroulera ensuite à partir de ce morceau et tourne en boucle.
<div class="center">
<h1>Musiques, libres de droits, issues de <a href="https://www.dogmazic.net/" target="_blank"><em>Dogmazic</em></a></h1>
<audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">Désolé, votre navigateur ne supporte pas HTML5 audio.</audio>
</div>
<div id="playlist">
<ul>
<li class="active"><a href="file/List/Que_sommes_nous_en_train_de_faire.mp3">Que sommes nous en train de faire <span style="color:#ff0000;"><em>-[Dogbreath]-</em></span></a></li>
<li><a href="file/List/Suonos_fur_monkey_s_corones.mp3">Suonos für monkey's corones <span style="color:#ff0000;"><em>-[Dogbreath]-</em></span></a></li>
<li><a href="file/List/La_grande_peste_de_1348.mp3">La grande peste de 1348 <span style="color:#ff0000;"><em>-Phat-</em></span></a></li>
<li><a href="file/List/What_cool.mp3">What cool <span style="color:#ff0000;"><em>-Tom la mèche-</em></span></a></li>
<li><a href="file/List/Jazz_urban.mp3">Jazz urban <span style="color:#ff0000;"><em>-Les Oreilles en ballades-</em></span></a></li>
</ul>
</div>
Ci-dessous, la structure de cette partie du code à copier-coller et adapter, bien sûr ! Et en cas de liste plus longue ou plus courte, ajoutez ou supprimez une partie <li></li>
<div class="center">
<h1>MES MUSIQUES</h1>
<audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">Désolé, votre navigateur ne supporte pas HTML5 audio.</audio>
</div>
<div id="playlist">
<ul>
<li class="active"><a href="file/Mes_musiques/morceau01.mp3">Titre morceau 1</a></li>
<li><a href="file/Mes_musiques/morceau02.mp3">Titre morceau 2</a></li>
<li><a href="file/Mes_musiques/morceau03.mp3">Titre morceau 3</a></li>
<li><a href="file/Mes_musiques/morceau04.mp3">Titre morceau 4</a></li>
<li><a href="file/Mes_musiques/morceau05.mp3">Titre morceau 5</a></li>
</ul>
</div>
Une version .html intégrable dans un Iframe est également possible. Un zip est téléchargeable ici.
Ce zip contient un fichier AudioPlayersimple.html et un dossier APSjs qui contient le fichier jquery-2.4.4.js. Le fichier AudioPlayersimple.html contient les mêmes informations que ci-dessus et se règle de la même manière.
Pour créer votre propre AudioPlayersimple, vous pouvez enregistrer ce fichier sous un nouveau nom, et l'adapter, notamment pour les chemins des morceaux musicaux, l'important est de laisser ce (ces) fichier(s) au même niveau que le dossier APSjs et son contenu.
Ci-dessous, le contenu du fichier AudioPlayersimple.html pour information.
Pour toute question ou aide pour utiliser ce dispositif, postez sur le forum de ce site.
Catégorie : Astuces - Audio Player
Page lue 94300 fois