adHoc.71site.fr

→ Un Audio player avec playlist, simple, responsive design, intégré directement dans une page, une boîte.

L'origine de ce type d'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 les navigateurs...).

-----=====+++++=====-----

Pour l'intégrer dans adHoc, il a été nécessaire de déclarer un fichier jquery-2.2.4.js faute de quoi le lecteur ne fonctionne pas. Ci-dessous les déclarations de script et de style dans cette page :

 <link charset="utf-8" href="skin/css/audio_player_simple.css" rel="stylesheet" />
<script src="skin/js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script src="skin/js/audio_player_simple.js" type="text/javascript" charset="utf-8"></script>

Vous pouvez télécharger le zip de ces trois fichiers : audio_player_simple.zip, à placer, si vous les utilisez dans le dossier skin/css pour le style et skin/js pour les fichiers .js.

Ci-dessous, la partie [style type="text/css"]...[/style] du fichier audio_player_simple.css puis la partie [script]...[/script] du fichier audio_player_simple.js déclarés ci-dessus ou à placer dans le code source, au début de la page ou de la boîte encadré de leur balises respectives.
La partie de style est commentée le plus possible pour vous aider à l'adapter. Pour le script, contentez-vous d'ajuster le volume initial : .3 dans le script... .4 .5 ... jusqu'à 1 volume maxi.

/*Audio Player simple*/
#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:10px;
}
#playlist{ /*attribut de la playlist*/
	margin:20px auto 0px; /*marges extérieures, auto pour centrer horizontalement*/
	background: rgba( 0, 0, 0, .5); /*couleur de fond*/
	border-radius: 10px; /*arrondis*/
	box-shadow: -1px -1px 2px #777777; /*ombre portée de la boite*/
}
titre { /*attributs titre*/
	display:block;
	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: rgba( 0, 0, 0, .5); /*couleur de fond*/
	box-shadow: -1px -1px 2px #777777; /*ombre portée de la boite*/
}
titre a { /*attributs liens du titre*/
	color: #FF9900; /*couleur du texte*/
	text-decoration:none;
}
titre a:hover { /*attributs liens survolés du titre*/
	color: #FFFF00; /*couleur du texte*/
}
#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, #playlist .active a:hover { /*attributs de la plage active*/
	text-decoration: none;
	text-shadow: none !important;
	color:#FFFFFF; /*couleur du texte*/
	padding-left:20px; /*marge intérieure gauche*/
	background: #000000; /*couleur de fond*/
	border-radius: 4px; /*arrondis*/
}
#playlist li { /*attributs éléments liste*/
	margin:0 10px; /*marges extérieures*/
	border-bottom: 1px solid #777777; /*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:#FF9900; /*couleur du texte*/
	padding: 3px; /*marges intérieures*/
	display: block;
}
#playlist li a:hover{ /*attributs des plages survolées*/
	color:#FFFF00; /*couleur du texte*/
	text-decoration: none;
}
#playlist li artiste { /*attributs artiste*/
	color:#FF0000;
	font-style:italic;
}
div.center { /*centrage (de la playlist et du lecteur)*/
	text-align: center;
}

-----=====+++++=====-----

$(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();
}
});

Et enfin, ci-dessous, la partie du code qui permet les appels aux fichiers musicaux, à placer où vous le souhaitez dans la page ou la boîte. Il faut bien sûr adapter les liens. Ici les morceaux de musique sont placés dans le dossier files/List à la racine d'adHoc, et ensuite, il est tout à fait possible de personnaliser directement dans l'éditeur d'adHoc l'écriture des titres, des artistes. Notez les balises [artiste]...[/artiste] qui permettent avec une classe spécifique de personnaliser simplement le texte associé. Notez également que le premier item à une classe particulière : c'est le premier sélectionné... Mais ce n'est pas une obligation (car l'Audio 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">
<titre>Musiques, libres de droits, issues de <a href="http://www.dogmazic.net/" target="_blank">Dogmazic</a></titre>

<audio controls="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="files/List/Que_sommes_nous_en_train_de_faire.mp3">Que sommes nous en train de faire <artiste>-[Dogbreath]-</artiste></a></li>
 <li><a href="files/List/Suonos_fur_monkey_s_corones.mp3">Suonos für monkey's corones <artiste>-[Dogbreath]-</artiste></a></li>
 <li><a href="files/List/La_grande_peste_de_1348.mp3">La grande peste de 1348 <artiste>-Phat-</artiste></a></li>
 <li><a href="files/List/What_cool.mp3">What cool <artiste>-Tom la mèche-</artiste></a></li>
 <li><a href="files/List/Jazz_urban.mp3">Jazz urban <artiste>-Les Oreilles en ballades-</artiste></a></li>
</ul>
</div>

Je n'ai pas détaillé ici la possibilité d'insérer ce lecteur dans un fichier .html inclus dans un Iframe... C'est possible et assez simple (utilisé d'ailleurs dans la partie démos de ce site). Contactez-moi sur le forum de ce site pour vous aider à insérer ce lecteur dans votre site selon l'une ou l'autre méthode.