Player JavaScript

Version actuelle

Version 18.43.1 : Ajout d'une détection de l'attribut "data-volume" sur les balises audio, permettant de régler le volume plus bas au chargement de la page (de base, le volume est à 100%).

Player seul

Playlist

  • Celtic Impulse
  • Skye Cuillin
  • Errigal
  • Fiddles McGinty

À propos

Ce player JavaScript permet de cutomiser les balises audio HTML5 des navigateurs qui, par défaut, peuvent être aussi bien superbement intégré sur l'un et radicalement à l'opposé du design de votre site sur l'autre. Il est sobre de base et entièrement customisable en CSS en couleurs et en formes. Le fichier JS est léger, n'utilise aucune librairie et fonctionne sur mobile.

Option bonus : Il intègre la possibilité d'utiliser une playlist.

Télécharger

Différentes versions (année, semaine, version)

Pour télécharger : Clic droit, Enregistrer la cible sous. Pas de CDN pour l'instant.

Notes de versions

Code en clair

See the Pen Player audio full JavaScript by Marine Latour (@SilverCherry) on CodePen.

Installation et utilisation

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

Pour faire une playlist, 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>

Et c'est tout. Oui, oui, c'est tout.

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 .progBarre,
.player .timer{
	white-space: nowrap;
}

.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;
	border-color: #333;
	border-radius: 5px;
}

.player .pause span,
.player .play span{
	display: inline-block;
	height: 20px;
	border-style: solid;
	width: 15px;
}

.player .play span{
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent #333;
}

.player .pause span{
	border-width: 0 5px;
	border-color: transparent #333;
}

.player .pause,
.player .play{
	display: flex;
	align-items: center;
	width: 15px;
	height: 30px;
	margin: 5px;
	cursor: pointer;
}

.player .play:hover span{
	border-color: transparent transparent transparent #666;
}

.player .pause:hover span{
	border-color: 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;
}

.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;
	list-style-type: none;
	border-style: solid;
	border-width: 0 0 2px;
	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;
}

Fonctionnalités bonus :

Vous pouvez ajouter le titre sur les players solo avec un attribut "title" :

<audio src="https://silvercherry.fr/sources/musics/Folk_Round.mp3" title="Folk Round" preload="metadata" controls>
	Votre navigateur ne supporte pas la balise audio.
</audio>

Vous pouvez gérer le volume de base avec un attribut "data-volume" (valeur entre 0 et 1) :

<audio src="https://silvercherry.fr/sources/musics/Folk_Round.mp3" data-volume="0.5" preload="metadata" controls>
	Votre navigateur ne supporte pas la balise audio.
</audio>

Exemples de customisation

Comme dit, ce player peut être complètement customisé sans trop de limites.

Exemple 1

Les éléments peuvent être réordonnés comme bon vous semble et la police d'écriture n'est pas fixe (n'oubliez pas le bouton pause ;) ).

  • Galway
  • Thatched Villagers
.custom{
	font-family: monospace;
}

.custom .player{
	flex-wrap: wrap;
	justify-content: flex-start;
	background-color: transparent;
	background: linear-gradient(to bottom,
		skyblue 20%,
		transparent 50%,
		transparent 50%
		);
	background: -webkit-linear-gradient(to bottom,
		skyblue 20%,
		transparent 50%,
		transparent 50%
	);
	background: -o-linear-gradient(to bottom,
		skyblue 20%,
		transparent 50%,
		transparent 50%
	);
	background: -moz-linear-gradient(to bottom,
		skyblue 20%,
		transparent 50%,
		transparent 50%
	); 
	border: 0;
	border-radius: 10px;
	max-width: 250px;
	padding: 5px;
}

.custom .player .play{
	order: 1;
}

.custom .player .play span{
	border-color: transparent transparent transparent #2E8AB0;
}

.custom .player .play:hover span{
	border-color: transparent transparent transparent #66B5D5;
}

.custom .player .pause{
	order: 2;
}

.custom .player .pause span{
	border-color: transparent #2E8AB0 transparent #2E8AB0;
}

.custom .player .pause:hover span{
	border-color: transparent #66B5D5 transparent #66B5D5;
}

.custom .player .prog{
	order: 5;
	background-color: skyblue;
	width: 100%;
	margin: 0;
}

.custom .player .progBarre,
.custom .player .volumeBarre{
	background-color: #2E8AB0;
}

.custom .player .prog:hover .progBarre,
.custom .player .volumeF:hover .volumeBarre{
	background-color: #66B5D5;
}

.custom .player .timer{
	order: 4;
	margin-left: auto;
}

.custom .player .volumeF{
	background-color: skyblue;
	align-self: center;
	position: relative;
	order: 3;
	width: 75px;
	margin: 10px 20px;
}

.custom .player .volumeF:before{
	position: absolute;
	top: -.15rem;
	left: -10px;
	content: '-';
}

.custom .player .volumeF:after{
	position: absolute;
	top: -.15rem;
	right: -10px;
	content: '+';
}

.custom .playlist .player{
	border-radius: 10px;
}

.custom .playlist ul{
	border: 0;
	max-width: 250px;
	background-color: transparent;
}

.custom .playlist ul li{
	color: #000;
}

.custom .playlist ul li:nth-of-type(odd){
	background-color: #2E8AB0;
}

.custom .playlist ul li:nth-of-type(even){
	background-color: skyblue;
}

.custom .playlist ul li:hover{
	background-color: #66B5D5;
}

Exemple 2

  • Minstrel Guild
  • Moorland
.custom2 .playlist{
	position: relative;
	z-index: 1;
	margin-top: 50px;
}

.custom2 .player,
.custom2 .playlist .player,
.custom2 .playlist ul{
	background-color: #111;
	border: 0;
	z-index: 1;
}

.custom2 .playlist:before{
	position: absolute;
	content: '';
	top: -45px;
	left: 35px;
	border-radius: 50%;
	box-shadow: 0 0 5px rgba(255,100,100,0.75);
	background-color: #333;
	border: 50px double #111;
	font-size: 0;
	line-height: 0;
	z-index: -1;
}

.custom2 .playlist ul{
	padding: 0 5px;
}

.custom2 .playlist ul li{
	position: relative;
	color: #eee;
	overflow: hidden;
	text-shadow: 0 0 5px rgba(255,100,100,0.75);
}

.custom2 .playlist ul li:nth-of-type(odd){
	background-color: transparent;
}

.custom2 .playlist ul li:nth-of-type(even){
	background-color: transparent;
}

.custom2 .playlist ul li:hover{
	color: rgba(255,140,140,1);
}

.custom2 .player .play{
	width: 15px;
}

.custom2 .player .play span{
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent #eee;
}

.custom2 .player .pause span{
	border-color: transparent #eee transparent #eee;
}

.custom2 .player .play:hover span{
	border-color: transparent transparent transparent rgba(255,100,100,1);
}

.custom2 .player .pause:hover span{
	border-color: transparent rgba(255,100,100,1) transparent rgba(255,100,100,1);
}

.custom2 .player .prog:hover .progBarre,
.custom2 .player .volumeF:hover .volumeBarre{
	background-color: rgba(255,100,100,1);
}

.custom2 .player .volumeF,
.custom2 .player .prog{
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(255,100,100,0.75);
	overflow: hidden;
}

.custom2 .player .progBarre,
.custom2 .player .volumeBarre{
	background-color: rgba(255,100,100,0.75);
}

.custom2 .player .timer{
	color: #eee;
}