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

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

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

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

Ретро MP3 плеер для Joomla 5 с плейлистом (Сalamansi)

1 1 1 1 1
Рейтинг 5.00 (3 голосов)

Версия плеера (с встроенным/невидимым плейлистом) на скрипте Сalamansi, шаблон в стиле ретро-мини с плейлистом саундтреков Sims 2.

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

Простой по функционалу плеер mp3 предназначен для сайта с НЕ-белым фоном (в примере прописан фон: rgba(0,0,0,.1) , элементы шаблона полупрозрачные. Ширина плеера «резиновая» (100% контейнера публикации), в примере: 380px.

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

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

  • название трека;
  • автор (исполнитель);
  • обложка саундтрека (оформленного в виде винилового диска);
  • основные элементы управления: воспроизведение / пауза / промотка назад / вперед;
  • два ползунка: громкость и длительность трека.

На этой странице опубликован рабочий вариант плеера Calamansi с оригинальным шаблоном — san-ayon. Скин (шаблон) создан для публикации на разных проектах, адаптирован под определенные особенности Joomla, содержит необходимый для проекта функционал, отражает личные вкусовые пристрастия автора сайта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).
  • Установка и подключение плеера законченыjoomlaСтоит, однако, дать некоторые рекомендации «к применению».

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

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

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

mp3 плеер, скрипт в joomla, модуль joomla

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

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



МЕНЮ