Speakker — музыкальный плеер на jQuery

в 13:29, , рубрики: javascript, jquery, jquery plugins, аудиоплейеры, метки: ,

Ища на просторах сети музыкальный плеер для сайта, я наткнулся на интересный плеер под названием Speakker, написанный на jQuery.
Speakker — музыкальный плеер на jQuery

Плеер имеет два дизаина:
Темный (dark):
Speakker — музыкальный плеер на jQuery
в раскрытом виде:
Speakker — музыкальный плеер на jQuery
И светлый (light):
Speakker — музыкальный плеер на jQuery

Speakker — музыкальный плеер на jQuery

Поддерживаются основные функции аудиоплеера: проигрывание треков, настройка громкости, перемотка, пауза, и повторение композиции.

Устанавливается просто:

  1. Скачиваем Архив
  2. Распаковываем
  3. Вставляем нужные файлы:
    <script src="http://code.jquery.com/jquery.min.js"></script>
     <script type="text/javascript" src="/ПУТЬ_К_ПАПКЕ/speakker-big-ВЕРСИЯ_ИЗ_АРХИВА.min.js"></script> 
    

  4. И инициализируем плеер:
    <script type="text/javascript">
    $(document).ready(function() {
    projekktor('.speakker'); 
    });
                </script>
    <!--Выбираем оформление: темное или светлое-->
                <audio class="speakker dark">
    <!--Путь к плейлисту либо к mp3 или ogg файлу-->
                <source src='/sound/' type="application/json"/>
                </audio>
    

Speakker поддерживает файлы mp3 и ogg.

Помимо проигрывания одного аудиофайла, имеется поддержка плейлистов в формате json.
В архиве имеется инструмент для легкого создания плейлиста в папке server. Для этого нам надо просто закинуть нужные треки в папку sound и указать эту папку как источник плейлиста

   <audio class="speakker dark">
            <source src='/sound/' type="application/json"/>
            </audio>

В результате php скрипт выделит id3 теги, включая изображения, из файлов, и запишет их в json файл.
* Возможны ошибки из-за кириллических названий аудиофайлов.

Присутствуют и кастомные социальные и прочие кнопки:

$(document).ready(function() {
    $projekktor('.speakker dark', {
        plugin_share: {
            links: {
            'download':{
                buttonText: 'download',  
                code:     './sound/?dl=true'        
            },
            'lastfm':{
                buttonText: 'lastfm',    
                code: 'http://www.lastfm.de/music/paniq'        
            },
            'wikipedia':{
                buttonText: 'wikipedia',        
                code: 'http://de.wikipedia.org/wiki/Elektronische_Musik'        
            },
            'admin':{
                buttonText:    'admin',
                code: false
            }                   
        }
    });
});

Так же присутствует кнопка get mix, по которой можно скачать в zip архиве все композиции.

Из минусов можно отметить некорректное отображения слоев (в частности, у меня наезжали кнопки из bootstrap некоторые другие элементы поверх плеера), стили прямо в js файле, и отсутствие api.

Подробнее на www.speakker.com

Автор: SPAHI4


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js