Создаём аудиоплеер для нашего сайта

demosourse

До сих пор мне вспоминаются 2000-е годы, когда воспроизведение музыки или видео на сайте было ограниченным. Сегодня же ситуация сильно изменилась, в нашем распоряжении есть такие сайты как last.fm, Youtube...

Как вы уже поняли из названия данного поста, сегодня мы займёмся созданием собственного веб аудио плеера. Если вы занимаетесь подкастингом и хотите создать плеер, который будет вписываться в дизайн вашего сайта, этот урок специально для вас.

Дизайн плеера был позаимствован с сайта Dribbble.

Что нам необходимо

Перед тем как приступить к созданию плеера, нам надо определиться с инструментами, которые мы будем для этого использовать: jPlayer, jQuery и иконки FontAwesome.

jPlayer представляет собой jQuery плагин, так что нам для начала, понадобится скачать jQuery последней версии. Также нам понадобятся иконки для интерфейса плеера.

После скачивания нужных нам библиотек, подключаем их к папке нашего проекта. Пишем код подключения для jquery.js, jquery.jplayer.min.js и таблиц стилей:

<link rel="stylesheet" href="css/normalize.css">
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

Таблица стилей normalize.css предназначена для сброса некоторых CSS настроек браузеров, чтобы наш дизайн был как можно больше универсален. В style.css мы закинем наши собственные стили.

Структура HTML

Теперь давайте приступим к написанию html кода, который нужен для работы плеера. Тут нам необходимо создать общий div контейнер и задать ему id = jquery_jplayer_1. В дальнейшем значение данного атрибута мы будем использовать при настройке jPlayer.

Идём дальше и создаём элементы с классами jp-play, jp-pause, jp-mute и jp-unmute, для создания кнопок контроля за воспроизведением аудио. Для начала, я советую вам не экспериментировать с собственными стилями для этих классов, а оставить всё как есть.

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
  <div class="jp-type-single">

    <div class="jp-title">
      <ul>
        <li>TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change</li>
      </ul>
    </div>

    <div class="jp-gui jp-interface">

        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">?</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">?</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">?</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">?</a></li>
        </ul>

        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>

        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
        </div>

        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>

    <div class="jp-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>

В приведённой HTML структуре вы найдёте подобные наборы символов: ?,?, ? ? Это специальные HTML вставки, которые отобразят нам иконки FontAwesome.

Активация аудио плеера

Поскольку нужный нам HTML код уже готов, следующим шагом будет активация плеера в специальном скрипте. В наш пример мы добавим несколько аудио файлов одного и того же выпуска в формате mp3 и ogg. Формат ogg мы можем использовать для кроссбраузерности, особенно для Firefox и Opera.

$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3",
        oga: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg"
      });
    },
    swfPath: "/js",
    supplied: "mp3,oga"
  });
});

После добавления данного скрипта, плеер по сути находится в рабочем состоянии. Если мы посмотрим на код страницы, то увидим специально сгенерированный HTML5 тег <audio>

Создаём свой стиль

В этой секции мы начнём оформление нашего плеера. В первую очередь, подключим шрифты и уберём подчёркивание у ссылок.

@font-face {
    font-family: "FontAwesome";
    src: url("fonts/fontawesome-webfont.eot");
    src: url("fonts/fontawesome-webfont.eot?#iefix") format("eot"),
    	 url("fonts/fontawesome-webfont.woff") format("woff"),
    	 url("fonts/fontawesome-webfont.ttf") format("truetype"),
    	 url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
    font-weight: 400;
    font-style: normal;
}
a {
    text-decoration: none;
}
.jp-jplayer,.jp-audio {
    width: 420px;
    margin: 50px auto;
}

Название аудио

Тут ничего такого особенного менять мы не будем, просто сделаем размер текста немного меньше, чем он есть.

.jp-title {
    font-size: 12px;
    text-align: center;
    color: #999;
}

.jp-title ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

GUI контейнера

GUI контейнеру плеера был задан класс jp-gui. Результат наших преобразований вы можете глянуть в демо. Тут мы применяем градиенты и специальные цвета #f34927, #dd3311. Также обратите внимание на то, что опция position нашего div-а содержит значение relative.

.jp-gui {
	position: relative;
	background: #f34927;
	background: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
	background: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);
	background: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
	-webkit-box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
    box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
    border-radius: 3px;
	overflow: hidden;
	margin-top: 10px;
}

GUI блока управления

GUI блока управления представляет собой кнопки контроля за воспроизведением аудио: пауза, громкость и так далее. Тут мы снова поиграем с шрифтами, сделаем цвет текста белым и добавим тенюшку.

.jp-controls {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: "FontAwesome";
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.jp-controls li {
    display: inline;
}

.jp-controls a {
    color: #fff;
}

Кнопки воспроизведения и паузы

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

.jp-play,.jp-pause {
    width: 60px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
    border-right: 1px solid #d22f0f;
}

.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
    background-color: #de3918;
}

.jp-mute,.jp-unmute {
    position: absolute;
    right: 55px;
    top: 0;
    width: 20px;
    height: 40px;
    display: inline-block;
    line-height: 46px;
}

.jp-mute {
    text-align: left;
}
.jp-time-holder {
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    right: 90px;
    top: 14px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

Перемотка и уровень громкости

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

.jp-progress {
    background-color: #992E18;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    position: absolute;
    right: 133px;
    top: 15px;
    width: 210px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}

.jp-play-bar {
    height: 12px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
}

.jp-volume-bar {
    position: absolute;
    right: 10px;
    top: 17px;
    width: 45px;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    background-color: #992E18;
    overflow: hidden;
}

.jp-volume-bar-value {
    background-color: #fff;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
}

Вот и всё. Теперь вы можете насладиться аудио плеером в демо или скачать исходник.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/web-audio-player/
Перевел: Станислав Протасевич
Урок создан: 7 Марта 2013
Просмотров: 56391
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Марта 2013 11:54
    Vlados907
    Как я этого долго ждал
  • 7 Марта 2013 12:27
    Barahten
    А я чет не понял-это только для аудио? или же можно и видео прикрутить?
    • 7 Марта 2013 12:34
      iammaster
      только аудио
  • 7 Марта 2013 15:53
    ferzisdis
    Скажите, пожалуйста, почему в соц. сетях для личной страницы пользователя создается отдельная папка (например: vk.com/id172178323 ), а не просто вытаскиваются необходимые данные из таблиц по переданному GET запросу (например: vk.com/index.php?id=1623137137727)??? В чем разница и какой способ, на ваш взгляд лучше всего использовать?
    • 7 Марта 2013 16:11
      nikki
      vk.com/id172178323 - это тоже самое что и - vk.com/index.php?id=1623137137727 физически не создается никакая директория для пользователя читайте про htaccess rewriterule
      • 7 Марта 2013 16:20
        ferzisdis
        спасибо огромное)
  • 7 Марта 2013 16:22
    ferzisdis
    А почему бы просто не оставить vk.com/index.php?id=1623137137727 ?? зачем задурять голову и придумывать замену в адресной строки??
    • 7 Марта 2013 17:09
      iammaster
      Причин уйма. Приведу пример из жизни. Связываются с вами по телефон у и просят скинуть вашу страничку на вконтакте. Вы же не будете диктовать им адрес vk.com/index.php?id=1623137137727. Если вы помните ваш ID то просто продиктуете vk.com/id1623137137727. Кстати раз уж пошла такая тема. На странице http://vk.com/settings в области "Адрес Вашей страницы" в поле "Адрес страницы" можете указать любую строку для доступа к вашему vk. Тогда и цифры писать не надо будет. Просто vk.com/ferzisdis
      • 7 Марта 2013 17:13
        ferzisdis
        Не поделитесь ссылкой, с хорошим уроком на эту тему
        • 7 Марта 2013 17:19
          iammaster
          Можете начать с этого: http://ruseller.com/lessons.php?rub_id=28&id=309 Воспользуйтесь поиском: http://ruseller.com/search.php?s=rewriterule
  • 7 Марта 2013 17:16
    eduard97
    А для видео будет?) или самим додумывать?)
    • 7 Марта 2013 17:39
      iammaster
      можете посмотреть тут: http://evgeniypopov.com/jurnal/vyipusk-45.html Video Player FX
  • 7 Марта 2013 20:25
    Andreyka76
    Подскажите, что делать если на одной странице аудио файлов много (больше одного). Что нужно дублировать?
    • 8 Марта 2013 10:28
      Barahten
      код плеера дублируете, а в парметрах вписываете нужные файлы (не проверял, но думаю что так), ну и дивы соотвествено НЕодинаковые должны быть
      • 8 Марта 2013 13:45
        Andreyka76
        Я так сделал, но при воспроизведении первого трека, сразу воспроизводятся все, которые присутствуют на странице.?? Нужно делать что-то ещё, только ЧТО???? Помогите плиз...
        • 8 Марта 2013 15:48
          Barahten
          Не может такого быть, у вас наверно дивы с одинаковыми идентификаторами. а еще лучше приведите код
          • 8 Марта 2013 17:45
            Andreyka76
            Вышлите мне на почту andreyka76@gmail.com код страницы, как правильно сделать. Вроде проверяю код - всё правильно. В <head> прописал два одинаковых скрипта, только строки разные
            $("#jquery_jplayer_1").jPlayer({
            и
            $("#jquery_jplayer_2").jPlayer({
            и конечно пути к аудио файлам. Дальше в <body> два дива
            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <div id="jp_container_1" class="jp-audio">
            ...
            </div></div>
            
            и соответственно
            <div id="jquery_jplayer_2" class="jp-jplayer"></div>
            <div id="jp_container_2" class="jp-audio">
            ...
            </div></div>
            
            что тут не верно??? Подскажите кто знает!!!
            • 9 Июня 2013 13:21
              nikbarn
              Можете мне тоже помочь? У меня такая же проблема Почта: kozhuh919@gmail.com
  • 8 Марта 2013 17:07
    San4oooo
    useful
  • 8 Марта 2013 17:41
    rostikpua
    <script>alert(1);</script>
    • 8 Марта 2013 18:02
      Andreyka76
      Не понял, поясните???
  • 9 Марта 2013 01:28
    raff
    Спасибо огромное за помощь сайт the bext))))
  • 10 Марта 2013 11:32
    Andreyka76
    Переделайте скрипт!!! Подходит только для одного аудио файла на странице. Для нескольких аудио не подходит!!!
  • 10 Марта 2013 12:54
    Revy
    лучше юзать прозрачный flash с JS API к нему, тогда не придется одну и туже песню заливать в разных форматах
  • 10 Марта 2013 21:19
    oc1tane
    Товарищи! Можно ли запустить с помощью такого плеера iPTV поток ? где можно почитать подробнее?
  • 12 Марта 2013 03:06
    adriancic13
    like it! :P
  • 14 Марта 2013 22:52
    advetech
    Мне очень понравилась статья НО очень жаль что в ruseller.com отсутствует возможность пользователям задавать свои вопросы получается что можно комментировать то что уже представлено на сайте. Если бы админ сделал так чтобы можно было задавать вопросы и получать на них ответы например как в GOOGLE ANSWERS. Например я очень долго в сети искал как сделать парсер PHP для yandex структур и поделился что я сделал в этом направлении. Я понимаю что форум это тяжело но сделать чтобы люди задавали и отвечали было бы лучше любого форума.
  • 21 Марта 2013 20:45
    bazilio100lei
    Плеер как в vk.com? =) Повёлся на это... Этот плеер работает по другому принципу - как обычный плеер. Вот бы действительно объяснили как сделать плеер как вконтакте, чтобы при переходе на другую страницу сайта музыка не сбрасывалась, а играла в фоне!
  • 10 Апреля 2013 20:50
    Vladimir111333
    А как закольцевать трек на етом плеере? помогите плз?
  • 6 Мая 2013 14:10
    shturval
    можно ли использовать для прослушивания радио??? адрес потока будет примерно такой: site:8000/live
  • 17 Октября 2013 11:05
    eboldarev
    Получилось добавить 2 плеера на странице. Способ не очень хороший. Для таких целей лучше найти другой плеер.
  • 18 Марта 2014 15:47
    sharipov_ruslan
    Здравствуйте, у меня тоже не получается сделать что бы плееры на странице пели разные песни, и не подскажите как сделать так чтобы один плеер выключался когда начинает петь другой, или если можно как добавить плейлист
  • 6 Июня 2014 02:27
    stefani_de
    что нужно сделать чтоб он сразу начинал воспроизводить музыку?
    • 7 Января 2015 21:37
      Misheles
      Мадам зачем такой громосткий код?Вам всего лишь вставить маленький код к примеру вот такой
      <audio controls> <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis"> <source src="audio/den.mp3" type="audio/mpeg">/* src= путь к файлу */ </audio>
      • 1 Апреля 2016 21:29
        Bulat_Ibrahim
        Misheles, спасибо огромное! Именно в комментариях я нашел самый лучший и самый кроссбраузерный плеер! :) А не знаешь, можно у этого плеера регулировать длину? И нет ли такого же простого плеера для видео?
  • 6 Мая 2016 16:33
    gook
    Спасибо за статью оч помогла! Не могу только разобраться как сделать перемещение движка громкости типо такого http://jsfiddle.net/Uy5sD/281/ Заранее Спасибо
  • 12 Июня 2016 11:34
    Андрій Мрига
    Вышлите мне на почту andreyka76@gmail.com код страницы, как правильно сделать. Вроде проверяю код - всё правильно. В <head> прописал два одинаковых скрипта, только строки разные $("#jquery_jplayer_1").jPlayer({ и $("#jquery_jplayer_2").jPlayer({ и конечно пути к аудио файлам. Дальше в <body> два дива <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> ... </div></div> и соответственно <div id="jquery_jplayer_2" class="jp-jplayer"></div> <div id="jp_container_2" class="jp-audio"> ... </div></div> что тут не верно??? Подскажите кто знает!!!
  • 24 Августа 2016 16:42
    geektema
    Подскажите, как сделать чтоб была не пауза, а СТОП. И дело не в отображении кнопки, а реально, чтоб плеер не буферил то что звучит, а останавливал.
  • 1 Октября 2016 11:00
    muslife
    Приветствую. У нас идет в режиме реального времени запись mp3 файла на хостинг (поток аудио). Можно ли использовать в нашем случае этот плеер? Будет ли он подгружать вновь обновленный аудио файл? Спасибо
^ Наверх ^