Audio Slideshow with jPlayer

Today we'll share an audio slideshow with you, i.e. a slideshow that will be synced with some audio. We are using the open source audio framework jPlayer.
Audio Slideshow with jPlayer

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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"></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.

Tagged with:

Tyler Craft

Tyler Craft is a web developer who is as comfortable server side as he is client side. He is passionate about making sites more user friendly, and occasionally stepping away from the computer to shoot some film.

http://www.tylercraft.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 26

Comments are closed.
  1. You just keep doing things exceeding your previous creations. Thanks, it’s absolutely astonishing. As always 🙂

  2. yeeess, finally something to completely replace the flash! Wow, a slider + music background – this is something new even for an webaholic like me hahah. Thanks for sharing Tyler!

  3. Strong and clean work.
    Several of my friends refused to work with HTML5 is due to inability to synchronize audio and slideshows, but set an example of Flash.
    Now these arguments, they can not lead.

    Thank you, this is a big step forward!

  4. The Screenshot looks great, but the Demo and also the Downloaded Source doesn’t work…

    Can you fix that?

  5. Hi Tyler

    This is a great way of getting audio video and images to work together seamlessly. The code seems a little extensive but Im sure using external files would eliminate any loading issues. I am impressed with the styling of the slideshow too and it seems it would be relatively simple to integrate in to any design

    Cathy

  6. Not working when i downloaded it, just work for me only here online.
    Anyone knows what to do?

    Thank you!

  7. An excellent idea – I’d been looking for something just like this for online lecture presentations! It took me a while to get the demo working – since no-one else has mentioned it, the jPlayerPath in line 6 of the file jquery.audioslideshow.js will need changing, and there’s another relative URL to change in index.html, in the link to the local copy of jQuery. As far as I can see, this works really well on all HTML5-enabled browsers, but it isn’t too difficult to hack the .css file to make an IE8 alternative stylesheet too.

    • I can’t get it works?
      I edited what you mentioned,
      > jPlayerPath: “/jplayer/”, ligne 6 in jquery.audioslideshow.js
      > , ligne 16 in index.html

      Still not working.. =/

  8. Apologies for not giving more details! I have this installed in public_html/demo – my jPlayerPath is “/demo/jplayer” (so I think this might be wrong in your edit) and the index.html line is “/js/jquery-1.7.2.min.js”. I hope this works.

  9. Hello,

    I’m trying tu put a second instance of jplayer (a simple one as we can see from jplayer’s website), but it doesn’t work. Both are playing together with the same audio file.
    How can I do?

    Thanks

  10. Looks like you set the slides up to match the music — with everything based on a timeline. Works very well!
    All you need now is a loop function ad perhaps volume control to complete the controls – would be nice to see. Presumably all these can be modified via the css

    This is more flexible/controllable) to playing a slideshow with background music — or playing music with a slideshow — I mean either the show ends when the slides do or when the music ends — but here you set the timeline according to the music or the slides.

    This does create an interesting possibility of having addional tracks called so you can have the first part with one track and further part/s with different music?

    Can any of these options be achieved using jQuery? i.e. is there the bility to perform different actions/callbacks on the timeline — such as loop at the end — or change tracks — change transition type etc.

    Good work anyway!