Track24 Ghosts III
AlbumGhosts III
ArtistNine Inch Nails
Time00:00

Cet article est également disponible en français

In the first two articles of this series I introduced the concept and code of a customized audio player. The prototype constructed to this point is “raw”, without any styling: the HTML5 and JavaScript has been written as fast as possible to prove that the basic concept works. In this article, I’ll focus on improving the look of the player and adding microdata, before introducing further functionality in part 4.

Audio Elements

First, let’s look at the DOM we have to this point. The script in part 2 of this series added slider controls and other features via progressive JavaScript to the basic markup to create the following:

<figure id="audioplayer">
	<figcaption>
		<div>Track<span>24 Ghosts III</span></div>
		<div id="album">Album<span>Ghosts III</span></div>
		<div id="artist">Artist<span>Nine Inch Nails</span></div>
		<div id="time">Time<span>00:00</span></div>
	</figcaption>
	<div id="fader">
		<input type="range" min="0" max="1" step="any" value="1" id="volumeSlider">
		<button type="button">volumehigh</button>
	</div>
	<div id="playback">
		<button type="button">Play</button>
		<progress min="0" max="100" value="0" id="playhead">
		</progress>
</div>
		<audio src="/assets/audio/24-ghosts-III.mp3" id="audiotrack" preload="auto">
	</audio>
</figure>

To this we add microdata, both for the benefit of search engines and to hook more JavaScript in later in this series. The code changes to:

<figure id="audioplayer" itemprop="track" itemtype="http://schema.org/MusicRecording">
	<figcaption>
		<div>Track
			<span itemprop="name">24 Ghosts III</span>
		</div>
		<div id="album">Album
			<span itemprop="inAlbum">Ghosts III</span>
		</div>
		<div id="artist">Artist
			<span itemprop="byArtist">Nine Inch Nails</span>
		</div>
		<div id="time">Time
			<span>00:00</span>
		</div>
	</figcaption>
<meta itemprop="duration" content="PT2M29S">
<div id="fader">
	<input type="range" min="0" max="1" step="any" value="1" orient="vertical" id="volumeSlider">
	<button type="button">volumehigh</button>
</div>
<div id="playback">
	<button type="button">Play</button>
	<progress min="0" max="100" value="0" id="playhead">
	</progress>
</div>
	<audio src="/assets/audio/24-ghosts-III.mp3" id="audiotrack" itemprop="audio" preload="auto">
	</audio>
</figure>

Styling Audio

The CSS used in the player draws nicely on a number of intermediate to advanced techniques. The initial CSS resets the box-sizing model, sets the overall styling for the audio player, and hides the <audio> element completely:

* {
	box-sizing: border-box;
}
figure#audioplayer {
	border: 1px solid #000;
	background: url(dark_wall.png) #333;
	overflow: hidden;
	width: 27rem;
	padding: .4rem;
	margin: 2rem auto;
}
figure#audioplayer audio {
	width: 0; height: 0; 
}

Next, the various data elements inside the player are styled, with borders set on different sides to create dividers between them. The range input is set to vertical for Webkit and Chrome using CSS:

figure#audioplayer figcaption {
	width: 21.5rem;
	font-size: 0;
	margin: .45rem;
	background: #000;
	float: left;
	border: 1px solid #555;
	text-align: left;
}
figure#audioplayer figcaption div {
	background: #000;
	color: #fff;
	padding: .8rem;
	font-family: Avenir, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: .8rem;
	display: inline-block;
}
figure#audioplayer figcaption div span {
	display: block;
	font-size: 1.3rem;
	text-indent: 1rem;
}
div#album {
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	width: 100%;
}
div#time {
	width: 7.55rem;
	border-left: 1px solid #555;
}
input#volumeSlider{ 
	-webkit-appearance: slider-vertical;
width: 35px;
}

The buttons use a semantic ligature icon font to turn their text into an image:

figure#audioplayer button {
	width: 3rem;
	height: 3rem;
	background: #000;
	color: #fff;
	border: none;
	-webkit-font-feature-settings: "liga", "dlig";
	font-feature-settings: "liga", "dlig";
}
#playback {
	clear: both;
}
div#fader {
	display: inline-block;
}

The <progress> element is also styled. It uses HSL to make color changes later (if needed) easier:

#playback progress {
	margin-left: 1rem;
	width: 20rem;
	height: 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #888;
	border: none;
	color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar,
	progress::-moz-progress-bar,
		progress::progress-bar {
			background: hsl(44,100%,44%);
}
progress::-webkit-progress-value { 
	background: hsl(44,100%,44%);
}
progress::-moz-progress-bar { 
	background-color: hsl(44,100%,44%);
}

Finally, the player is made , moving elements around and decreasing the padding as the viewport narrows:

@media screen and (max-width:500px){
	div#time { 
		display: block !important;
		border-top: 1px solid #555;
		width: 100%;
}
	figure#audioplayer { 
		width: 100%;
		padding: .2rem;
	}
	figure#audioplayer figcaption div { 
		padding: .4rem;
	}
}
@media screen and (max-width:450px){
	figure#audioplayer figcaption { 
		width: 16rem;
	}
	#playback progress {
		width: 220px;
	}
}
@media screen and (max-width:400px) { 
	figure#audioplayer figcaption { 
	width: 14rem;
	}
}

In the next article, I’ll use the Web Audio API to add and animate a left and right channel meter display for the player.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/GEyzn