Перейти к содержимому
создание сайта под ключ
×

Обсудить проект

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение. Или звоните: +7(916) 107-51-99 (10.00–18.00, Мск.)

Как к вам обращаться?
Сообщите корректный адрес электронной почты.
Заполните поле, опишите суть задачи.
Необходимо подтвердить согласие с Политикой.

Аудио-плеер с плейлистом для сайта Joomla 5

Для разных сайтов, реализованных на cms Joomla, периодически внедряются разные версии аудио плейеров. Нужность этих «приблуд» на современном сайте спорная. Тем не менее, публикация различных поделок по этой теме до сей поры актуальна. Предлагаем свои версии реализации аудио-плеера с плейлистом для сайтов Joomla 5.

Использовать «поделку» можно на сайте с любой cms, но есть некоторые нюансы.

Для начала, продемонстрируем DEMO аудио-плеера с плейлистом, пример — в правой части разворота данной страницы.

Краткое описание Аудио-плеера

Аудио-плеер выполнен на базе скрипта Calamansi, «укомплектован» следующими элементами:

  • название трека;
  • автор (исполнитель);
  • обложка саундтрека;
  • основные элементы управления: воспроизведение / стоп / пауза / промотка назад / вперед;
  • два ползунка: громкость и длительность трека;
  • «выдвижной» плейлист со списком доступных треков;
  • функции «Повтор», «Случайный трек».

На этой странице опубликован рабочий вариант плейера Calamansi с оригинальным шаблоном — san-dummy. Скин (шаблон) создан для публикации на разных проектах, адаптирован под определенные особенности Joomla, содержит необходимый для проекта функционал, отражает личные вкусовые пристрастия автора сайтаjoomla

Функционал плеера в данном шаблоне реализован — частично, согласно своему предназначению (желающие «ковырять потроха» скриптов найдут много интересного в архивах Calamansi).

Установка аудио-плейера на сайте Joomla

Плейер может быть размещен на сайтах Joomla в любом нужном месте проекта. Как правило, это модули в позиции SideBar (но не обязательно). Можно реализовать сокрытие/повление «Музыкальной паузы» (с кнопками вызова скрипта) в модальных окнах или off-canvas sidebar, дело вкуса и поставленных задач.

В архиве Calamansi находится всё необходимое для реализации публикации плейера.

Загрузка...

Порядок установки аудио-плейера на сайте Joomla

  • Скачать архив calamansi, разархивировать. Место размещение дистрибутива плейера на сайте — на усмотрение владельца сайта. В данном конкретном случае файлы размещены таким образом:
    https://сайт.ru/js/calamansi/
  • В нужном месте сайта внутри <body> подключаем скрипт плейера:
    <script src="/js/calamansi/dist/calamansi.min.js"></script>
    Позитив: нет необходимости подключать плейер на всех страницах сайта, достаточно подключить скрипт только на нужных страницах. Стоит опубликовать директиву подключения непосредственно перед кодом html плейера.
    Примечание: в шаблоне плейера использован Font Awesome 6. Если кто-то надумает установить предложенный здесь шаблон, то стоит это учесть.
  • Полностью пример кода выглядит так :
    <script src="/js/calamansi/dist/calamansi.min.js"></script>
    <div id="calamansi-player-1"><div class="center">
    <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span><span class="sr-only">Загрузка...</span>
    </div></div>
    <script>
    new Calamansi(document.querySelector('#calamansi-player-1'), {
    skin: '/js/calamansi/dist/skins/san-dummy',
    playlists: {'Фильмы и сериалы': 
    [
    {source: '/download/mp3/Hello-Bitches.mp3',},
    {source: '/download/mp3/Game-of-Thrones.mp3',},
    ...................................................................................
    {source: '/download/mp3/When-the-Darkness-Comes.mp3',},
    ],
    },
    defaultAlbumCover: '/js/calamansi/dist/skins/san-dummy/cover/no-album-cover.jpg',
    volume: 30,
    loop: true,
    preloadTrackInfo: true,
    });
    </script>
    

    Особых дополнительных пояснений, наверное, и не нужно? Плейлист может быть любой длины. Уровень громкости «по умолчанию»: 30% (варьируется: 0-100]. Включено «круговое» воспроизведение (true / false).
  • Установка и подключение плейера законченыjoomlaСтоит, однако, дать некоторые рекомендации «к применению».

Рекомендации «к применению» и примечания

  • Саундтреки (файлы *.mp3), предназначенные для воспроизведения, могут находиться как на сайте с плейером, так и на других серверах.
  • При использовании «сторонних» источников саунда — отображения обложки альбома не будет (будет отображаться дефолтная картинка — «нет фото»). Вместо названия трека будет отображаться название файла. Возможны проблемы с кодировкой отбражения (если название трека сделано кириллицей, содержит пробелы).
  • Адреса саундтреков в скрипте прописаны в строчках, типо:
    {source: '/download/mp3/Game-of-Thrones.mp3',},
    Таким образом, в данном примере музыукальные треки находятся на сайте по адресу:
    https://сайт.ru/download/mp3/
    Место размещения файлов может быть, разумеется, любым: прописываем в плейлист нужный адрес и название файла *.mp3.
  • Перед «употреблением» музыкальные файлы необходимо «прогнать» через сервис Тэгирование MP3, где придется добавить свою собственную обложку к треку (если ее нет), прописать нужный заголовок трека, автора и исполнителя.
  • Названия файлов *.mp3 должны быть на латинице, без пробелов и спецсимволов (используем «-» (дефис) вместо пробелов).
  • «В комплекте» архива Calamansi находится несколько вариантов шаблонов плейера, не все они одинаково работоспособны (но могут быть использованы). Данный материал посвящен исключительно шаблону: san-dummy (от автора данного сайта san-san).
  • При публикации нескольких плейеров на одной странице необходимо, чтобы они имели разные ID (id="calamansi-player-X").

На этом, наверное, и закончим этот материал. Тестируйте, «перепиливайте», комментируйте. Оставьте свой комментарий, при желании. Вопросы, если возникнут, задавайте. По возможности ответимjoomlaВозможно, будет продолжение темы шаблонов Calamansi.

Добавить комментарий

Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.



МЕНЮ