Ретро аудио-плеер с плейлистом для сайта Joomla 5
Версия плейера (с встроенным/невидимым плейлистом) на скрипте Сalamansi, шаблон в стиле ретро-мини с плейлистом саундтреков Sims 2.
DEMO аудио-плеера с плейлистом — в правой части разворота данной страницы.
- название трека;
- автор (исполнитель);
- обложка саундтрека (оформленного в виде винилового диска);
- основные элементы управления: воспроизведение / пауза / промотка назад / вперед;
- два ползунка: громкость и длительность трека.
На этой странице опубликован рабочий вариант плейера Calamansi с оригинальным шаблоном — san-ayon. Скин (шаблон) создан для публикации на разных проектах, адаптирован под определенные особенности Joomla, содержит необходимый для проекта функционал, отражает личные вкусовые пристрастия автора сайта
Функционал плеера в данном шаблоне реализован — частично, согласно своему предназначению (желающие «ковырять потроха» скриптов найдут много интересного в архивах Calamansi).
Установка аудио-плейера на сайте Joomla
Плейер может быть размещен на сайтах Joomla в любом нужном месте проекта. Как правило, это модули в позиции SideBar (но не обязательно). Можно реализовать сокрытие/повление «Музыкальной паузы» (с кнопками вызова скрипта) в модальных окнах или off-canvas sidebar, дело вкуса и поставленных задач.
В архиве Calamansi находится всё необходимое для реализации публикации плейера.
Скин san-ayon скачиваем и размещаем в папку шаблонов Calamansi по адресу https://сайт.ru/js/calamansi/dist/skins/ Адрес, конечно, только для данного конкретного примера. В каждом конкретном случае путь будет свой.
Порядок установки аудио-плейера на сайте Joomla 5
- Скачать архив calamansi и скин san-ayon, разархивировать. Место размещение дистрибутива плейера на сайте — на усмотрение владельца сайта. В данном конкретном случае файлы размещены таким образом:
https://сайт.ru/js/calamansi/(скрипт плейера)https://сайт.ru/js/calamansi/dist/skins/san-ayon/(скин) - В нужном месте сайта (в материале или модуле, внутри <body>) подключаем скрипт плейера:
<script src="/js/calamansi/dist/calamansi.min.js"></script>
Позитив: нет необходимости подключать плейер на всех страницах сайта, достаточно подключить скрипт только на нужных страницах. Стоит опубликовать директиву подключения непосредственно перед кодом html плейера.
Примечание: в шаблоне плейера использован некоторый функционал uikit. - Полностью пример кода выглядит так :
<div style="width:380px; background:rgba(0,0,0,.1); padding:45px 15px 15px;"> <div id="calamansi-player-2"> <div class="center"><div uk-spinner></div></div> </div></div> </div> <script src="/js/calamansi/dist/calamansi.min.js"></script> <script> new Calamansi(document.querySelector('#calamansi-player-2'), { preloadTrackInfo: true, defaultAlbumCover: '/js/calamansi/dist/skins/san-ayon/images/vedio.png', skin: '/js/calamansi/dist/skins/san-ayon', playlists: {'Ретро саунд Sims 2': [ {source: '/download/music/sims-2-1/sound-sims-1.mp3',}, {source: '/download/music/sims-2-1/sound-sims-2.mp3',}, {source: '/download/music/sims-2-1/sound-sims-3.mp3',}, {source: '/download/music/sims-2-1/sound-sims-4.mp3',}, {source: '/download/music/sims-2-1/sound-sims-5.mp3',}, {source: '/download/music/sims-2-1/sound-sims-6.mp3',}, {source: '/download/music/sims-2-1/sound-sims-7.mp3',}, {source: '/download/music/sims-2-1/sound-sims-8.mp3',}, {source: '/download/music/sims-2-1/sound-sims-9.mp3',}, ], }, volume: 30, loop: true, }); </script>
Особых дополнительных пояснений, наверное, и не нужно? Плейлист может быть любой длины. Уровень громкости «по умолчанию»: 30% (варьируется: 0-100]. Включено «круговое» воспроизведение (true / false). - Установка и подключение плейера законченыСтоит, однако, дать некоторые рекомендации «к применению».
Рекомендации «к применению» и примечания
- Саундтреки (файлы *.mp3), предназначенные для воспроизведения, могут находиться как на сайте с плейером, так и на других серверах.
- При использовании «сторонних» источников саунда — отображения обложки альбома не будет (будет отображаться дефолтная картинка — «нет фото»). Вместо названия трека будет отображаться название файла. Возможны проблемы с кодировкой отбражения (если название трека сделано кириллицей, содержит пробелы).
- Адреса саундтреков в скрипте прописаны в строчках, типо:
{source: '/download/music/sims-2-1/sound-sims-9.mp3',},
Таким образом, в данном примере музыукальные треки находятся на сайте по адресу:https://сайт.ru/download/music/sims-2-1/
Место размещения файлов может быть, разумеется, любым: прописываем в плейлист нужный адрес и название файла *.mp3. - Перед «употреблением» музыкальные файлы необходимо «прогнать» через сервис Тэгирование MP3, где придется добавить свою собственную обложку к треку (если ее нет), прописать нужный заголовок трека, автора и исполнителя.
- Названия файлов *.mp3 должны быть на латинице, без пробелов и спецсимволов (используем «-» (дефис) вместо пробелов).
- «В комплекте» архива Calamansi находится несколько вариантов шаблонов плейера, не все они одинаково работоспособны (но могут быть использованы). Данный материал посвящен исключительно шаблону: san-ayon (от автора данного сайта san-san).
- При публикации нескольких плейеров на одной странице необходимо, чтобы они имели разные ID (id="calamansi-player-X").
На этом, наверное, и закончим этот материал. Тестируйте, «перепиливайте», комментируйте. Оставьте свой комментарий, при желании. Вопросы, если возникнут, задавайте. По возможности ответим
Возможно, будет продолжение темы шаблонов Calamansi.
Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.