From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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:
- data-audio: This is the path to the audio file
- 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:
- data-thumbnail: This is the thumbnail that will show up when someone mouses over the marker
- 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?x51189"></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:
- jQuery (although I recommend utilizing Google’s CDN as shown above)
- jPlayer
- 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.
The demo isnt working (firefox 12)
greetz
Frank
I’m using FF 12 and it works just fine.
Not working for me either.
in demo “NetworkError: 404 Not Found – http://tympanus.net/Development/AudioSlideshow/AudioSlideshow/jplayer/Jplayer.swf“
Fantastic!!!
😀
Cool, thanks.
You just keep doing things exceeding your previous creations. Thanks, it’s absolutely astonishing. As always 🙂
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!
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!
Thanks, thats so cool. i like it very much. 🙂
Adoro esse site só coisa legal. Valeu
The Screenshot looks great, but the Demo and also the Downloaded Source doesn’t work…
Can you fix that?
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
😉
Thanks, thats so cool. i like it very much. 🙂
Not working when i downloaded it, just work for me only here online.
Anyone knows what to do?
Thank you!
Does this plugin have to be inside html5 page ?
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.. =/
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.
is it possible to add an autoplay function?
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
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!
Works only in Chrome, not working in Firefox, Opera and Internet Explorer. In one word tragedy. Of course because of Jplayer – an idea is excellent.
Awesome! Though for some reason the markers do not line up with the audio.
Anyone knows why it runs in Firefox,Opera and Chrome only here? When i upload the file on my server it runs only with Chrome, no way with Firefox and Opera… This is really Strange and I’m going crazy for that. Anyway this is a brilliant idea, it’s quite shame for this compatibility problems.