Player JavaScript

Démo fichier
Avec loop
Playlist
  • Episode 1
  • Episode 2
  • Episode 3
  • Episode 4
  • Episode 5
  • Episode 6
  • Episode 7
  • Episode 8
  • Episode 9
  • Episode 10-1
  • Episode 10-2

Gestion de multiples playlist intégré.

Où le trouver :
Lien vers le fichier JS
Comment ça marche :

Intégrez le fichier .js dans votre code. Il transformera vos balises <audio> en player personnalisés et entièrement customisable en css.

Pour les playlists, voici le code à intégrer :

<div class="playlist">
	<audio src="https://monsite.fr/monfichier1.mp3" preload="metadata" controls>
		Votre navigateur ne supporte pas la balise audio.
	</audio>
	<ul>
		<li id="https://monsite.fr/monfichier1.mp3">Fichier 1</li>
		<li id="https://monsite.fr/monfichier2.mp3">Fichier 2</li>
		<li id="https://monsite.fr/monfichier3.mp3">Fichier 3</li>
	</ul>
</div>
		
Code css :

Voici le code css en clair. Pour passer vos modifications en priorité sans passer par la valeur "!important", ajouter body ou main (si vous en avez mis un) devant le nom des classes.

.player, 
.player *{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
audio{
	display: none;
}
.player{
	display: flex;
	align-items: center;
	margin: 15px;
	padding: 0 5px;
	background-color: #EEE;
	border-style: solid;
	border-width: 2px 0 2px 0;
	border-color: #333;
	border-radius: 5px;
}
.player .play span{
	display: inline-block;
	width: 25px;
	height: 20px;
	border-style: solid;
	border-width: 10px 0 10px 20px;
	border-color: transparent transparent transparent #333;
}
.player .pause span{
	display: inline-block;
	width: 15px;
	height: 20px;
	border-style: solid;
	border-width: 0 5px 0 5px;
	border-color: transparent #333 transparent #333;
}
.player .play, 
.player .pause{
	display: flex;
	align-items: center;
	width: 30px;
	height: 30px;
	margin: 5px;
	cursor: pointer;
}
.player .play:hover span{
	border-color: transparent transparent transparent #666;
}
.player .pause:hover span{
	border-color: transparent #666 transparent #666;
}
.player .prog{
	overflow: hidden;
	cursor: pointer;
	width: 100%;
	height: 20px;
	margin: 0 10px;
	background-color: #CCC;
}
.player .prog:hover .progBarre{
	background-color: #666;
}
.player .progBarre{
	width: 0;
	background-color: #333;
	height: 20px;
	overflow: visible;
	color: #000;
	text-indent: 5px;
	white-space: nowrap;
}
.player .timer {
	white-space: nowrap;
}
.player .timer, 
.playlist{
	color: #333;
}
.player .volumeF{
	cursor: pointer;
	width: 100px;
	height: 10px;
	margin: 0 10px;
	background-color: #CCC;
}
.player .volumeF:hover .volumeBarre{
	background-color: #666;
}
.player .volumeBarre{
	width: 100%;
	background-color: #333;
	height: 10px;
}
.playlist{
	margin: 15px;
}
.playlist .player{
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	margin: 0;
}
.playlist ul{
	background-color: #EEE;
	margin: 0;
	padding: 0 5px 5px 5px;
	list-style-type: none;
	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: #333;
	border-radius: 0 0 5px 5px;
}
.playlist ul li{
	padding: 5px;
	cursor: pointer;
}
.playlist ul li:nth-of-type(odd){
	background-color: #CCC;
}
.playlist ul li:nth-of-type(even){
	background-color: #DDD;
}
.playlist ul li:hover{
	background-color: #fff;
}