English

DragonPlay English

Lecteur audio JavaScript

Version actuelle

Version 19.47.1 : Ajoute tout seul le tabindex dans la liste de la playlist.

Player seul

Playlist

  • Celtic Impulse
  • Skye Cuillin
  • Errigal
  • Fiddles McGinty

À propos

Ce player JavaScript permet de customiser 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 relativement 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)

Pas de CDN pour l'instant. Vous pouvez récupérer les liens, mais ce sera avec le risque qu'ils soient cassés à l'avenir en cas de changement d'adresse.

Version récente 19.47.1

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 (Depuis la 19.42.1, vous pouvez le charger où vous voulez). 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>
	<!-- Ici sera inséré le player customisé et la balie audio sera masquée (pas supprimée) -->
	<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 .timer{
	white-space:nowrap
}

.player,
.player *{
	box-sizing:border-box;
	margin:0;
	padding:0;
	line-height:1
}

audio{
	display:none
}

.player{
	position:relative;
	display:flex;
	align-items:center;
	margin:20px;
	padding:5px;
	background-color:#FBFBFB;
	border-style:solid;
	border-width:2px 0;
	border-color:#333;
	border-radius:5px;
	flex-wrap:wrap;
	justify-content:space-around
}

.player::after{
	position:absolute;
	content:'';
	height:20px;
	width:40px;
	background-image:url('https://web.silvercherry.fr/img/DragonPlayer.svg');
	background-repeat:no-repeat;
	background-size:contain;
	right:0;
	top:-20px
}

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

.player .play span,
.playlist .forward span:first-of-type{
	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,
.playlist .forward,
.playlist .backward{
	display:flex;
	align-items:center;
	width:15px;
	height:30px;
	margin:0 10px;
	cursor:pointer
}

.playlist .forward,
.playlist .backward{
	width:20px
}

.player .play:hover span,
.playlist .forward:hover span:first-of-type{
	border-color:transparent transparent transparent #666
}

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

.player .prog{
	overflow:hidden;
	cursor:pointer;
	max-width:100%;
	min-width:100px;
	height:20px;
	margin:0 10px;
	background-color:#CCC;
	flex-grow:1
}

.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:75px;
	height:10px;
	margin:5px 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:#FBFBFB;
	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:#FBFBFB
}

.playlist .backward span:first-of-type{
	border:0;
	border-right:5px solid #333
}

.playlist .forward span:last-of-type{
	border:0;
	border-left:5px solid #333
}

.playlist .backward span:last-of-type{
	border-width:10px 15px 10px 0;
	border-color: transparent #333 transparent transparent
}

.playlist .backward:hover span:first-of-type,
.playlist .forward:hover span:last-of-type{
	border-color: #666
}

.playlist .backward:hover span:last-of-type{
	border-color: transparent #666 transparent transparent
}

.player .title{
	margin:5px
}

.playlist ul li.active{
	text-decoration:underline;
	font-style:italic
}

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="none" 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="none" controls>
	Votre navigateur ne supporte pas la balise audio.
</audio>

Fonctionnalités désactivées :

L'autoplay a été volontairement désactivé en 19.25.3. Si vous l'intégrez dans votre code, le player se chargera de le supprimer immédiatement. Avant cette version, l'autoplay fonctionnait partiellement : le player restait visuellement en pause comme s'il n'avait jamais été activé mais le son était joué.

Pourquoi avoir supprimé l'autoplay plutôt que le coder proprement ? L'autoplay est insupportable d'un point de vue utilisateur, il n'a que pour but de falsifier les chiffres d'écoutes... Et même une petite musique de fond discrète peut très vite devenir un cauchemar pour un utilisateur qui souhaitait juste naviger discrètement. Et, de toute façon, les navigateurs commencent (enfin!) à intégrer par défaut un bloqueur d'autoplay, pour le bonheur de ses utilisateurs et le malheur des services marketing qui se retrouvent avec les véritables chiffres d'audience à remonter.

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::after{
	display: none;
}

.custom .player .backward,
.custom .player .forward{
	display: none;
}

.custom .player .title{
	order: 1;
	width: 100%;
}

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

.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: 3;
}

.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: 6;
	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: 5;
	margin-left: auto;
}

.custom .player .volumeF{
	background-color: skyblue;
	align-self: center;
	position: relative;
	order: 4;
	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{
	width: 90%;
}

.custom2 .playlist{
	position: relative;
	z-index: 1;
	margin-top: 75px;
}

.custom2 .playlist .player .title{
	position: absolute;
	width: 100%;
	top: -25px;
	left: 150px;
	color: #111;
}

.custom2 .playlist .player .title::before{
	content: 'Titre en cours : ';
	font-weight: bold;
}

.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;
}

.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,
.custom2 .player .title{
	color: #eee;
}

Exemple 3

Micro-version

.custom3 .player .prog,
.custom3 .player .timer,
.custom3 .player .volumeF{
	display: none;
}

.custom3 .player{
	border: 0;
	background-color: transparent;
	width: 50px;
	height: 50px;
	display: block;
}

.custom3 .player .play,
.custom3 .player .pause{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	background-color: maroon;
	border: 0;
	padding: 0 10px;
	border-radius: 50%;
}

.custom3 .player .play span{
	border-color: transparent transparent transparent #fff;
}

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

.custom3 .player .pause span{
	border-color: transparent #fff;
}

.custom3 .player .pause:hover span{
	border-color: transparent #aaa;
}

.custom3 .player::after{
	display: none;
}

Voilà. Bon ce ne sont pas des exemples transcendant non plus mais je suis développeur, pas graphiste ; Il faut pas trop m'en demander non plus !

Plus sérieusement, ces exemples basiques sont là pour vous montrer des possibilités et j'en oublie très certainement. De même, je n'ai pas inclus de media query dans le css pour faciliter la customisation mais je conseille d'en faire pour vos versions mobiles. De base, il est largement utilisable sur mobile mais s'étale vite sur plusieurs lignes sur de petits écrans.