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

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

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

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

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

• Скачать архив calamansi, разархивировать. Место размещение дистрибутива плейера на сайте - на усмотрение владельца сайта. В данном конкретном случае файлы размещены таким образом:
  https://сайт.ru/js/calamansi/
• В нужном месте сайта внутри подключаем скрипт плейера:
  <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).
• Установка и подключение плейера законченыСтоит, однако, дать некоторые рекомендации «к применению».

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

• Саундтреки (файлы *.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").

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