Аудио-слайдшоу с использованием jPlayer

Сегодня мы попробуем создать аудио слайд-шоу. Используя бесплатный аудио-фреймворк jPlayer, слайд-шоу будет показывать изображения и воспроизводить звук, сменяться изображения будут в указанных моментах мелодии. В нашем слайд-шоу мы ограничимся показом фотографий, но вообще можно использовать любой html-код на слайдах.

Фотографии, используемые в этой статье, из Library of Congress Flickr set. Мелодию можно скачать из бесплатного архива  музыки - Free Music Archive.

Итак, давайте посмотрим как это сделать!

HTML-разметка

Нам нужен будет контейнер, с классом, например, "audio-slideshow". Этот контейнер будет иметь два атрибута данных HTML5:

  • data-audio: это путь к аудио файлу
  • data-audio-duration: это длина звукового файл в секундах. Это необходимо, чтобы мы могли поместить маркеры на временной шкале, без загрузки звукового файла.

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

Внутри контейнера с классом .audio-slideshow будет div с классом .audio-slides. В данном конкретном примере, в этом блоке будут находиться изображения, но вообще вы можете разместить любой html-код, например, текстовую информацию. Наши изображения будут иметь два атрибута данных HTML5:

  • data-thumbnail: это превьюшка, которая показывается когда курсор мыши находится над маркером
  • data-slide-time: это время в секундах, когда этот слайд должен быть показан.

Другие теги представляют собой элементы управления плеера: кнопки воспроизведения, паузы, временная линия ... и т.д.

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

Как вы можете видеть в CSS, почти все можно настроить под свой дизайн. Временная шкала может быть большая, маленькая, сверху или снизу слайд-шоу. Слайды можно масштабировать до размера браузера и маркеры могут быть с использованием изображений.

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>

Вам нужны будут три скрипта:

  • jQuery (я рекомендую использовать CDN Google, как показано выше)
  • jPlayer
  • плагин AudioSlideshow

После того как эти скрипты будут подключены к странице, вам нужно будет только вызвать плагин audioSlideshow для любого тега, который вы захотите.

Если вы изменили какие-либо классы в плеере, вы можете дать знать об этом плагину, установив любой из следующих параметров:

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

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments