DragonPlay

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 23.20.1

Notes de versions

• 23.20.1 Ajout des data album et artiste pour la gestion de l'overlay windows ainsi que l'affichage d'une pochette
• 21.31.1 Barres de progession et de volume plus dynamiques
• 21.24.1 Ajout des variables CSS pour facilité la modification des couleurs
• 20.29.1 Modifications CSS du logo
• 20.16.1 Correctif d'un bug de playlist à un seul élément (bug de sélection de l'élément suivant).
• 20.14.1 Gestion des heures.
• 19.47.1 Ajoute tout seul le tabindex dans la liste de la playlist.
• 19.42.1 Permet de charger le fichier .js n'importe où sur la page.
• 19.41.1 Changements sur le contrôle clavier des barres progression et volume. Les touches flèche haut / flèche bas sont ajoutées et passage à 10 niveaux de volume (il était à 5 niveaux, c'était trop peu). Ajout du logo.
• 19.40.2 Correction d'un aria-label mal positionné sur le volume.
• 19.40.1 Ajout du contrôle clavier du player pour aider la navigation des mal-voyants.
• 19.27.3 Correction d'un bug sur les boutons Forward et Backward lors de la lecture naturelle.
• 19.27.2 Ajout de la détection d'erreur 404 sur les fichiers.
• 19.27.1 Modifications mineures visant à alléger le code.
• 19.26.2 Ajout de la class "active" sur la liste de la playlist pour désigner le fichier en cours.
• 19.26.1 Légère modification du CSS pour l'aérer sur les écrans mobiles et correction de l'affichage du timer. Ce dernier affichait 0.5 seconde trop tôt les minutes.
• 19.25.3 Suppression de l'autoplay. L'autoplay est le sida de l'Internet, ne le propagez pas.
• 19.25.2 Ajout des deux boutons précédent / suivant sur les playlists et correction d'un bug lorsqu'un fichier était présent sur deux playlists différentes sur une même page ; le player ne savait plus sur quelle playlist il se trouvait et choisissait le dernier player par défaut.
• 19.25.1 Déplacement du titre dans une division à part pour faciliter la customisation. Changements léger du code pour faciliter sa lecture et sa modification.
• 19.13.1 Ajout de l'affichage du "load" lorsque le fichier audio a du mal à charger.
• 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%).
• 18.42.1 Ajout d'une détection de l'attribut "title" sur les balises audio solo, affichant le titre dans la barre de progression, comme pour les playlists.
• 18.40.2 Compresse les boutons play et pause ensemble.
• 18.40.1 Correction d'un bug lorsque l'un des parents de la balise audio se retrouvait positionné en CSS. Le player ne reconnaissait pas son point référent de gauche pour calculer où vous cliquiez sur la barre de progression ou de volume.
• 18.24.1 Premier lancement public du player. Version déconseillée

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 balise 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.

:root{
	--player-col1:#FBFBFB;
	--player-col2:#333333;
	--player-odd:#CCCCCC;
	--player-even:#DDDDDD;
	--player-bar1:#333333;
	--player-bar2:#CCCCCC;
	--player-text:#333333
}

.player .timer{
	white-space:nowrap
}

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

audio{
	display:none
}

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

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

.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 var(--player-col2)
}

.player .pause span{
	border-width:0 5px;
	border-color:transparent var(--player-col2)
}

.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{
	opacity:.75
}

.player .pause:hover span{
	opacity:.75
}

.player .prog{
	overflow:hidden;
	cursor:pointer;
	max-width:100%;
	min-width:100px;
	height:20px;
	margin:0 10px;
	background-color:var(--player-bar2);
	flex-grow:1;
	border-radius:1px
}

.player .prog:hover .progBarre{
	opacity:.75
}

.player .progBarre{
	width:0;
	background-color:var(--player-bar1);
	height:20px;
	overflow:visible;
	text-indent:5px
}

.player .timer,
.playlist{
	color:var(--player-text)
}

.player .volumeF{
	cursor:pointer;
	width:75px;
	height:10px;
	margin:5px 10px;
	background-color:var(--player-bar2);
	border-radius:1px;
	overflow:hidden
}

.player .volumeF:hover .volumeBarre{
	opacity:.75
}

.player .volumeBarre{
	width:100%;
	background-color:var(--player-bar1);
	height:10px
}

.playlist{
	margin:15px
}

.playlist .player{
	border-bottom:0;
	border-radius:5px 5px 0 0;
	margin:0
}

.playlist ul{
	background-color:var(--player-col1);
	margin:0;
	padding:0 5px 5px;
	list-style-type:none;
	border-style:solid;
	border-width:0 0 2px;
	border-color:var(--player-col2);
	border-radius:0 0 5px 5px
}

.playlist ul li{
	padding:5px;
	cursor:pointer
}

.playlist ul li:nth-of-type(odd){
	background-color:var(--player-odd)
}

.playlist ul li:nth-of-type(even){
	background-color:var(--player-even)
}

.playlist ul li:hover{
	opacity:.75
}

.playlist .backward span:first-of-type{
	border:0;
	border-right:5px solid var(--player-col2)
}

.playlist .forward span:last-of-type{
	border:0;
	border-left:5px solid var(--player-col2)
}

.playlist .backward span:last-of-type{
	border-width:10px 15px 10px 0;
	border-color:transparent var(--player-col2) transparent transparent
}

.playlist .backward:hover span:first-of-type,
.playlist .forward:hover span:last-of-type{
	opacity:.75
}

.playlist .backward:hover span:last-of-type{
	opacity:.75
}

.player .title{
	margin:5px
}

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

.player .pochette{
	margin-right:25px;
	border:2px solid var(--player-col2)
}

.player .pochette img{
	max-width:150px;
	max-height:150px
}

Fonctionnalités bonus :

Title

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>

Data-volume

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>

Data-pochette

Vous pouvez ajouter une pochette avec l'attribut "data-pochette" :

<audio src="https://nebuleuse.silvercherry.fr/enclosures/nebuleuse/Nebuleuse01.mp3" data-pochette="https://nebuleuse.silvercherry.fr/img/pochette_mini.jpg" preload="none" controls>
	Votre navigateur ne supporte pas la balise audio.
</audio>

Data-album et data-artiste

En plus de l'attribut "data-pochette" et "title", vous pouvez préciser l'album et l'artiste de l'album pour la gestion de l'overlay Windows 10 et +. La playlist est également gérée :

<div class="playlist">
	<audio src="https://nebuleuse.silvercherry.fr/enclosures/nebuleuse/Nebuleuse01.mp3" data-pochette="https://nebuleuse.silvercherry.fr/img/pochette_mini.jpg" data-album="Nébuleuse" data-artiste="SilverCherry" title="Nébuleuse - Épisode 1" preload="none" controls>
		Votre navigateur ne supporte pas la balise audio.
	</audio>
	<ul>
		<li id="https://nebuleuse.silvercherry.fr/enclosures/nebuleuse/Nebuleuse01.mp3">Nébuleuse - Épisode 1</li>
		<li id="https://nebuleuse.silvercherry.fr/enclosures/nebuleuse/Nebuleuse02.mp3">Nébuleuse - Épisode 2</li>
		<li id="https://nebuleuse.silvercherry.fr/enclosures/nebuleuse/Nebuleuse03.mp3">Nébuleuse - Épisode 3</li>
		<li id="https://nebuleuse.silvercherry.fr/enclosures/nebuleuse/Nebuleuse04.mp3">Nébuleuse - Épisode 4</li>
	</ul>
</div>

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

.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

Vous pouvez aussi jouer avec la pochette.

.custom2{
	width: 90%;
}

.custom2 .playlist{
	position: relative;
	margin-top: 120px;
}

.custom2 .playlist .player .title{
	position: absolute;
	width: 100%;
	top: -55px;
	left: 160px;
	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;
}

.custom2 .playlist:before{
	position: absolute;
	content: '';
	top: -98px;
	left: 55px;
	border-radius: 50%;
	box-shadow: 3px 2px 2px rgba(0,0,0,0.5);
	background-color: #333;
	border: 49px 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,
.custom2 .playlist .forward span:first-of-type{
	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,
.custom2 .playlist .forward:hover span:first-of-type{
	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 .playlist .backward span:first-of-type{
	border-right:5px solid #eee
}

.custom2 .playlist .forward span:last-of-type{
	border-left:5px solid #eee
}

.custom2 .playlist .backward span:last-of-type{
	border-color:transparent #eee transparent transparent
}

.custom2 .playlist .backward:hover span:first-of-type{
	border-right:5px solid rgba(255,100,100,1)
}

.custom2 .playlist .forward:hover span:last-of-type{
	border-left:5px solid rgba(255,100,100,1)
}

.custom2 .playlist .backward:hover span:last-of-type{
	border-color:transparent rgba(255,100,100,1) transparent transparent
}

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

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

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

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

.custom2 .player .pochette{
	position: absolute;
	box-shadow: 3px 2px 2px rgba(0,0,0,0.5);
	border: 0;
	margin: 0;
	top: -100px;
	left: 15px;
	z-index: -1;
}

.custom2 .player .pochette img{
	position: relative;
	border: 1px solid rgba(100,100,100,0.75);
	max-width: 100px;
	max-height: 100px;
}

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,
.custom3 .player .pause:hover{
	animation: pulsar 1s infinite;
}

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

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

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

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

@keyframes pulsar{
	0% {background-color: rgba(128, 0, 0, 0.473);}
	100% {background-color: rgba(128, 0, 0, 1)}
}

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.