Fran├žais

DragonPlay Fran├žais

JavaScript Audio player

Current version

Version 20.29.1 : CSS change for the logo

Player

Playlist

  • Celtic Impulse
  • Skye Cuillin
  • Errigal
  • Fiddles McGinty

About

This JavaScript player allows you to customize the browsers' HTML5 audio tags that, by default, can either superbly integrate or radically clash with your design. It's sober and its colors and shapes are fully customizable in CSS. The JS file is relatively light, doesn't use any libraries and runs on mobile.

Optional bonus: it integrates the possibility of using a playlist.

Download

Different versions (year, week, version)

No CDN for now. You can take the links, but they can be broken in case of address change.

Latest version 20.29.1

Release notes

Code

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

Installation and use

Integrate .js file at the end of your code (Since 19.42.1 release, wherever you want). It will transform <audio> tags on custom player that you can design in CSS.

To do a playlist, here the code :

<div class="playlist">
	<audio src="https://mywebsite.com/file1.mp3" preload="metadata" controls>
		Your browser does not support the audio element.
	</audio>
	<!-- Here will be insert the custom player and audio tag will be masked (not deleted) -->
	<ul>
		<li id="https://mywebsite.com/file1.mp3">File 1</li>
		<li id="https://mywebsite.com/file2.mp3">File 2</li>
		<li id="https://mywebsite.com/file3.mp3">file 3</li>
	</ul>
</div>

And that's all. Yes, that's all.

CSS code :

Here CSS code. To make your changes a priority without using the "!important" value, add body or main (if you have one) in front of the class name.

.player .timer{
	white-space: nowrap
}

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

audio{
	display: none
}

.player{
	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;
	position: relative
}

.player::after{
	position: absolute;
	content: '';
	height: 20px;
	width: 40px;
	background-image: url('https://web.silvercherry.fr/img/DragonPlay.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;
	border-radius: 1px
}

.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;
	border-radius: 1px;
	overflow: hidden
}

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

Features :

You can add the title to solo players with a "title" attribute :

<audio src="https://silvercherry.fr/sources/musics/Folk_Round.mp3" title="Folk Round" preload="none" controls>
	Your browser does not support the audio element.
</audio>

You can manage the volume with a "data-volume" attribute (value between 0 and 1) :

<audio src="https://silvercherry.fr/sources/musics/Folk_Round.mp3" data-volume="0.5" preload="none" controls>
	Your browser does not support the audio element.
</audio>

Disabled features :

The autoplay was intentionally disabled in 19.25.3. If you include it in your code, the player will remove it immediately. Before this version, the autoplay worked partially: the player remained visually paused as if it had never been activated but the sound was played.

Why remove the autoplay rather than develop it properly? The autoplay is unbearable from a user point of view, its only purpose is to falsify the numbers of plays ... And even a small discreet background music can quickly become a nightmare for a user who just wanted to surf discreetly. And, anyway, browsers start (finally!) to integrate by default an autoplay blocker, for the happiness of its users and the misfortune of marketing services that end up with the real audience figures.

Examples of customization

As said, this player can be completely customized without too many limits.

Example 1

The elements can be ordered as you want and the font isn't fixed (don't forget the pause button ;) ).

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

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

Example 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)}
}

Well, these are not transcendent examples either, but I am a developer, not a graphic designer; Don't ask too much!

More seriously, these basic examples are there to show you possibilities and I most certainly forget some of them. And I didn't include a media query in the CSS for easy customization but I advise you to do this for your mobile versions. It works on mobile but spreads quickly on multiple lines on small screens.