Geekly Articles each Day
📜 ⬆️ ⬇️

Create an audio slideshow with jPlayer


Hello, dear habradrug!
Today we will share with you an audio slideshow. Using the jPlayer framework, the slideshow will display images and play music, changing pictures at a specific point in a song. There are no restrictions on the number of images. In addition, you can use the div tag or any other layout.
View demo | Download source files

Images taken from Flickr . Music: J-Ralph .

Come on, let's get started!


')

HTML


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


Inside the container .audio-slideshow is a div with the class .audio-slides . Child tags can be whatever you want. In our case, these will be images. However, they can also be divas with text. Our div tag contains two HTML5 attributes:

Other tags are responsible for other elements of the player: the pause and play buttons.



CSS


 /* Component style */ .audio-slideshow { width: 512px; height: 560px; 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: #f5f6f6; background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6)); background: -webkit-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); background: -o-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); background: -ms-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); background: linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; 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 CSS, almost everything can be edited. The time slider may be more or less, above or below images, etc.


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>


To set up the slideshow you need three scripts:

Once the scripts are attached to the page, you need to call audioSlideshow on any tag.

If you changed the name of the selectors, do not forget to specify them in the plugin:

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


View demo | Download source files

PS All remarks about the translation with pleasure I will accept in a personal. Thank!

Source: https://habr.com/ru/post/180657/

More articles:


All Articles