Аудио-слайдшоу с использованием 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