Главная » Файлы » Прочие скрипты » jQuery

Классный адаптивный музыкальный плеер через плагин Responsive & Touch-Friendly на jQuery, CSS3 и HTML5 для вашего сайта
24.06.14, 17:07:19

Скачать файл




Вот набрёл на классный музыкальный плеер для вашего сайта. Меня часто просили показать простой плеер, работающий без флеш и который можно было бы легко использовать. Данный пример не использует НИ ОДНОЙ КАРТИНКИ. Вся графика на чистом css. Воспроизведение основано на HTML5 компоненте audio. Очень важно, что плеер растягивается и сжимается в зависимости от размеров окна браузера и прекрасно работает с планшетными устройствами (По заверениям разработчика)

Для начала посмотрите ДЕМО

Установка:

После < /head > на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/audioplayer.css" />


Следующий код в самый низ страницы перед < /body >:
Код
<script src="/js/audioplayer.js"></script>  
  <script>  
  $(function() {  
  $('audio').audioPlayer();  
  });  
  </script>


Осталось только в нужное место на странице вставить код самого плеера:
Код
<audio preload="auto" controls>  
<source src="Ссылка на mp3 файл" />  
<source src="Ссылка на ogg файл" />  
<source src="Ссылка на wav файл" />  
  </audio>


Скрипт из прикреплённого архива залейте в папку js, стиль в папку css

Для полноценной поддержки всеми браузерами желательно аудиофайл подключать именно в трёх форматах mp3, ogg и wav

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Touch-Friendly, адаптивный, Через, на, плагин, JQuery, Responsive, Классный, музыкальный, плеер
Просмотров: 327 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: