Audio Slideshow with jPlayer

Today we’ll share an audio slideshow with you. Using the open source audio framework jPlayer the slideshow will show images and play sound, changing the images at specified moments of the song/audio. While we’ll demonstrate a photo slideshow here, it is not limited to photos. It could also use div tags containing any kind of markup whatsoever.

The photos used in this tutorial are from the Library of Congress Flickr set. The mp3 is a Kurt Vile song that was downloaded from the Free Music Archive, a wonderful resource for Creative Commons Licensed songs.

So let’s take a look at how it’s done!

The Markup

We will require a container div, the class in the example is ‘audio-slideshow’, however it can be whatever you’d like. This tag has two HTML5 data attributes:

1. data-audio: This is the path to the audio file
2. data-audio-duration: This is the length of the audio file in seconds. This is required so we can position the markers on the timeline without having to load the audio file into the browser

<div class="audio-slideshow" data-audio="audio.mp3" data-audio-duration="161">
	<div class="audio-slides">
		<img src="image.jpg" data-thumbnail="thumbnail.jpg" data-slide-time="0">
		<img src="image.jpg" data-thumbnail="thumbnail.jpg" data-slide-time="1">
	</div>
	<div class="audio-control-interface">
		<div class="play-pause-container">
			<a href="javascript:;" class="audio-play" tabindex="1">Play</a>
			<a href="javascript:;" class="audio-pause" tabindex="1">Pause</a>
		</div>
		<div class="time-container">
			<span class="play-time"></span> / <span class="total-time"></span>
		</div>

		<div class="timeline">
			<div class="timeline-controls"></div>
			<div class="playhead"></div>
		</div>

	 	<div class="jplayer"></div>
	</div>
</div>

Within the .audio-slideshow container is a div with a class of .audio-slides. The child tags within this div can be anything you want. In this particular example, they are images. However, they could be divs that contain text. They can be whatever tag you want, as long as they have two HTML5 data attributes:

1. data-thumbnail: This is the thumbnail that will show up when someone mouses over the marker
2. data-slide-time: This is the time, in seconds, when this slide should be displayed.

The other tags represent the other items within the player: The play and pause button, the playhead and timeline…etc. The plugin only needs to know their class or id names.

The CSS

/* Component style */

.audio-slideshow {
	width: 640px;
	height: 520px;
	position: relative;
	margin: 0 auto;
}

.audio-slideshow .audio-slides {
	position: relative;
}

.audio-slideshow .audio-slides img {
	display: block;
	position: absolute;
	top: 0; left: 0;
}

.audio-slideshow .audio-control-interface {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
}

.audio-slideshow .play-pause-container, .audio-slideshow .time-container {
	position: absolute;
	bottom: 25px;
	height: 18px;
	font-weight: bold;
	color: #777;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.audio-slideshow .play-pause-container a {
	outline: none;
	text-indent: -99999px;
	width: 16px;
	height: 16px;
	position: absolute;
}
.audio-slideshow .play-pause-container a.audio-play {
	background: transparent url(../images/play.png) no-repeat center center;
}

.audio-slideshow .play-pause-container a.audio-pause {
	background: transparent url(../images/pause.png) no-repeat center center;
}

.audio-slideshow .audio-control-interface .time-container {
	right: 3px;
}

.audio-slideshow .timeline {
	position: absolute;
	width: 100%;
	background-color: #fff;
	height: 20px;
	bottom: 0;
	left: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.audio-slideshow .timeline .playhead {
	position: absolute;
	height: 20px;
	background: #333;
	width: 0;
}

.marker {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4) inset;
	position: absolute;
	background: #B8BAC6;
	top: 5px;
}

.marker span {
	padding: 5px;
	position: absolute;
	bottom: 20px;
	opacity: 0;
	left: -50px;
	z-index: -1;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	background: linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
	transition: all 0.3s ease-in-out;
}

.marker span img {
	display: block;
}

.marker:hover span {
	opacity: 1;
	z-index: 100;
}

As you can see from the CSS, pretty much everything can be customized. The timeline could be larger, smaller, above or even on top of the slides. The slides could be scaled to the size of the browser and the markers could be graphics instead of CSS circles.

The Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('>script src="/lib/js/jquery-1.7.1.min.js?x22827"></script>')</script>
<script src="jplayer/jquery.jplayer.js"></script>
<script src="js/jquery.audioslideshow.js"></script>
<script>
	$(document).ready(function() {
		$('.audio-slideshow').audioSlideshow();
	});
</script>

You will need three scripts to set this up:

1. jQuery (although I recommend utilizing Google’s CDN as shown above)
2. jPlayer
3. the AudioSlideshow plugin

Once those scripts are added to the page, you just need to call audioSlideshow on any tag that you want.

If you’ve changed any of the tag selectors, you can let the plugin know this by setting any of the following settings:

<script>
	$(document).ready(function() {
		$('.audio-slideshow').audioSlideshow(
			{
				jPlayerPath: "/lib/swf",
				suppliedFileType: "mp3",
				playSelector: ".audio-play",
				pauseSelector: ".audio-pause",
				currentTimeSelector: ".play-time",
				durationSelector: ".total-time",
				playheadSelector: ".playhead",
				timelineSelector: ".timeline"
			}
		);
	});
</script>

Audio Slideshow with jPlayer on Github.