Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Аудио плеер на HTML5
DEMO +
Всем привет, вскоре гугл начнет отключать Flash в своем браузере, исключения конечно будут. Но зачем мучать пользователя чтоб тот разрешил его использование. Да и моб. Устройства не поддерживают его. Мы решили написать легкий код плеер.

Особенности:
1. Работает на HTML5
2. Легкая установка и настройка размеров под свой сайт.
3. Может быть установлен на любой модуль который позволяет загружать файлы. (Пример ниже для модуля Онлайн игры)
4. Имеет функцию автоподгрузки треков при скроле!.
5. Имеет возможность поиска треков, после перехода возможно прослушивание.
6. Также чистит хлам кода BODY.

Установка:
1. На Главную страницу нужного модуля а также на страницы Категории, раздела и поиска заменяем BODY на:
Код
<audio preload></audio>
<form onsubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="/stuff/">
<input type="text" name="query" maxlength="30" size="20" class="queryFieldes" placeholder="Поиск по $NUM_ENTRIES$ аудиозаписям">
<input type="hidden" name="a" value="2"></form><div id="sMusikAdd"></div>
<ol>
$BODY$
<div class="selector" id="selector" style="display:none">$PAGE_SELECTOR$</div>  
</ol>


2. Куда угодно на страницы модуля добавляем js:
Код
<script src="http://www.swordart-online.ru/ggo/audio.js"></script>


3. В вид материалов модуля:
Код
<li><i></i><a href="#" data-src="$FILE_DIRECT_URL$">$TITLE$</a><p>$FILE_SIZE$</p></li>


FILE_DIRECT_URL - Ссылка выводящия загруженный на сервер .mp3 файл.
TITLE - Название темы
FILE_SIZE - размер файла

4. Добавим базовый вид нашему плееру в CSS:
Код
div#allEntries li p {
  margin: 0px;
  padding: 0px;
  float: right;
  display: inline-block;
  position: relative;
  top: 5px;
  font-size: 9px;
  font-weight: 100;
  right: 5px;
}
input.queryFieldes { top: 39px;font-family: -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;
  border-bottom: 1px solid #e7e8ec !important;
  background: #fff url(https://vk.com/images/search_icon.png) no-repeat 11px 5px;
  display: block;
  border: 0px;
  position: fixed;
  z-index: 999;
  padding: 7px 30px 7px 40px;
  width: 430px;box-shadow: 0px 10px 10px #fff;
}
body {
  text-align: left; }
#allEntries {
  display: block;text-align: left;
}
li.playing {
  background-color: #e8edf4;
}
li i {
  cursor: pointer;
  background: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png) -4px -4px;
  width: 20px;
  display: inline-block;
  height: 20px;
  border-radius: 50%;
  background-color: #577ca1;
  position: relative;
  margin: 0px 10px -8px 0px;
}
li.playing i {
  background-position: -4px -60px;
}
div#sMusikAdd {
  background-image: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png);
  height: 15px;
  cursor: pointer;
  width: 16px;
  -o-transition: background-position 150ms ease;
  transition: background-position 150ms ease;
  background-position: 0px -185px;
  height: 14px;
  width: 18px;
  float: left;
  top: 47px;
  position: fixed;
  z-index: 999999;
  right: 2px;
}
.play-replay {
  background-image: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png);
  height: 15px;cursor:pointer;
  width: 16px;
  -o-transition: background-position 150ms ease;
  transition: background-position 150ms ease;
  opacity: 0.75;
  background-position: 0 -132px;
  height: 14px;
  width: 18px;
  float: left;
  position: relative;
  top: 9px;
  left: 15px;
}
.play-download {
  background-image: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png);
  height: 15px;cursor:pointer;
  width: 16px;
  -o-transition: background-position 150ms ease;
  transition: background-position 150ms ease;
  background-position: 0px -238px;
  height: 14px;
  width: 18px;
  float: left;
  position: relative;
  top: 9px;
  left: 25px;
}
ol {list-style: none;
  background: #fff;
  padding: 10px 0px 10px 0px;
  margin: 70px 0px 0px 0px;
  max-width: 430px;
}
ol li:hover {background:#f5f7fa;}
ol li {
  padding: 3px 0px 9px 5px;
  margin: 0px 0px 4px 0px;
}
ol li a {font-family: -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;
  color: #2a5885;
  text-transform: capitalize;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  max-width: 325px;
  overflow-x: hidden;
  display: inline-block;
  position: relative;
  top: 4px;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  border-radius: 8px;
  height: 3px;
  background-color: #e1e8ee;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #577ca1;

width: 6px;
height: 6px;
border-radius: 50px;
cursor: pointer;
}
#jcp-volume {
  float: left;
  width: 50px;
  position: relative;
  top: 22px;
}
.play-prew, .play-next {float:left;position:relative;top:10px;left:7px;
  background-image: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png);
  height: 10px;
  width: 12px;cursor:pointer;
  background-position: 0 -88px;
}
.play-next {background-position: 0 -102px;margin-left:7px;
}
.play-name {font-family: -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;
  text-transform: capitalize;
  position: absolute;
  top: -19px;
  color: #393e42;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 148px;
  overflow-x: hidden;
}
.play-pause {
  display: inline-block;
  float: left;
}
div#audiojs_wrapper0 {
  width: 420px;display: inline-block;
  background-color: #fafbfc;
  border-bottom: 1px solid #e7e8ec;
  padding: 5px;
position: fixed; top: 0px;
  z-index: 9999;
}
p.play {cursor: pointer; margin: 0px;
  background-image: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png);
  width: 28px; display: inline-block;
  height: 28px;
  border-radius: 50%;
  background-color: #577ca1;
}
p.pause {background-image: url(http://www.swordart-online.ru/ggo/images/plauer/audio_player_controls.png);
  width: 28px; cursor: pointer; margin: 0px; display: inline-block;
  height: 28px;
  border-radius: 50%;
  background-color: #577ca1;background-position: 0px -56px;}
.progress {
  background: #577ca1;
  height: 3px;
}
.loaded {
  height: 3px; position: absolute;
}
.scrubber {
  background: #b8c7d7;
  height: 3px;
  display: inline-block;
  width: 215px;
  float: left;
  position: relative;
  top: 24px;
  margin: 0px 15px;
}
.time {
  color: #7f8184;
  font-style: normal;
  position: absolute;
  left: 265px;
  font-size: 8px;
}
em.played {font-family: -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;
  font-style: normal;
}
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 01.09.2016 в 13:33 по МСК
Категория: Другие модули
Просмотров: 1086
Комментариев: 12
Эмоций:
Теги: autoload, js, html5, audio, pleer, online, css, Scroll, Stuff, module
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Milan_Shubin
28.04.2018 | # |№11
Обновите скрипт для stuff и делайте по удобнее если возможно) когда ставлю у себя то весь дизайн ломается из за стилей) обновите пж)))
Ok

Marishka
29.04.2018 | # |№12
Будет расмотрено по возможности.
Ok

Milan_Shubin
22.03.2018 | # |№9
Жаль не работает (
Ok

Best_Studio
22.03.2018 | # |№10
Все работает, ставим правильно.
Ok

waak
28.07.2017 | # |№7
у меня почему то он не в низ перелистывает а вверх как исправить так как это не совсем удобно если я включаю вторую песню на стр то играет она а после первая и не переходит к другим просто повторяет первую модуль каталог сайтов

И ещё как сделать чтоб можно было остановить трек по клику играющей песни а не по кнопки пауза в плеере тоесть если сейчас нажать на кнопку пауза в виде материалов то трек просто начнёт играть сначала а как сделать чтоб была остановка трека
Ok

Best_Studio
14.08.2017 | # |№8
Желателен Log ошибок, или сайт.
Ok

feyssmesh
01.09.2016 | # |№3
СПС большое за предоставленную релизную версию плеера, написали модуль под себя.....
Ok

Marishka
01.09.2016 | # |№4
:)
Ok

feyssmesh
01.09.2016 | # |№5
Код действительно легкий и простой, также благодарность за оптимазицию скрипта легкий, для моб. трафика!.
Ok

Best_Studio
02.09.2016 | # |№6
Пока для тестирования версия.
Ok

Бармен
01.09.2016 | # |№1
Классная установка :)
В любой случае не плохо выглядит.
Ok

Marishka
01.09.2016 | # |№2
Подобные темы скриптов всего анонс, которые тестируются на полной для исходного сайта!. По желанию автора может и не выложить код :)
Ok