Простой аудио-плеер HTML5

Случилось так, что потребовалось сделать простенький плеер без подклюения сервисов вроде SoundCloud. Для решения задачи нам потрубуется:

  1. MIGX чтобы пдминистрировать список песен
    Если вы не в курсе что такое MIGX, и пользуетесь MODX, то вам сюда
    Если вы не в курсе что такое MIGX, и вы НЕ пользуетесь MODX, то можете проигнорировать часть "бэкэнда" и перейти к пункту 3. Просто загляните под спойлер пункта 2.5 и посмотрите какой HTML вам надо подготовить.
  2. Немного javascript'a

1. Формирования плейлиста в админке с момощью MIGX

1.1 Создаем дополнительное поле:

  • Имя: migx_audio
  • Подпись: Песни
  • Тип ввода: migx
  • Вкладки формы: Показать
    [
      {
        "caption": "Заголовок",
        "fields": [
          {
            "field": "file",
            "caption": "Файл",
            "inputTVtype": "file"
          },
          {
            "field": "name",
            "caption": "Название",
            "inputTVtype": "text"
          },
          {
            "field": "time",
            "caption": "Продолжительность (Мин:Сек)",
            "inputTVtype": "text"
          }
        ]
      }
    ]
    
    Скрыть
  • Разметка колонок: Показать
    [{
        "header": "Файл",
        "dataIndex": "file"
    },{
        "header": "Название",
        "dataIndex": "name"
    },{
        "header": "Продолжительность (Мин:Сек)",
        "dataIndex": "time"
    }]
    
    Скрыть
  • Доступно для шаблонов: Галочку, где нужно:)

1.2 Заполняем его примерно так:

2. Вывод плейлиста на сайте через getImageList

У меня была задача, чтобы при загрузке страницы первый трек уже был активен (не проигрывался, а просто был готов к воспроизведению). Из-за этого я разбил вывод плейлиста на 2 части:

  1. Вывод первой песни
  2. Вывод всех остальных песен

Уверен, есть еще много более или менее лаконичных способов это сделать. Лично я не запарился и просто разбил вывод на 2 сниппета. В первом вывел особым чанком первую песню, а во втором сниппете уже все остальные.

2.1 Чанк вывода первой песни (migx_audio_tpl_first) Показать
  • [[+name]]
    [[+time]]
  • Скрыть
    2.2 Чанк вывода остальных песен (migx_audio_tpl) Показать
  • [[+name]]
    [[+time]]
  • Скрыть
    2.3 Сниппет getImageList для вывода первой песни: Показать
    [[!getImageList?
        &tvname=`migx_audio`
        &tpl=`migx_audio_tpl_first`
        &docid=`[[*id]]`
        &limit=`1`
    ]]
    
    Скрыть
    2.4 Сниппет getImageList для вывода остальных песен: Показать
    [[!getImageList?
        &tvname=`migx_audio`
        &tpl=`migx_audio_tpl`
        &docid=`[[*id]]`
        &limit=`999`
        &offset=`1`
    ]]
    
    Скрыть
    2.5 В результате, поместив вывод обоих сниппетов внутрь некоего тега ul мы получаем примрено такую верстку: Показать
    • Игра
      4:42
    • Рандеву
      2:54
    • Танцуй вместе с нами
      3:37
    • Уже не вернуть
      3:21
    Скрыть

    3. Добавление стилей и интерактива

    3.1 Стили CSS:

    li.audio_item {
    	list-style-type: none;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding: 20px;
    	background: #252525;
    	color: #fff;
    	cursor: pointer;
    }
    .audio_item + .audio_item{
        border-top: 1px solid #444;
    }
    li.audio_item.active{
    	background: #444;
    	cursor: default;
    }
    .audio_item_name{
        float: left;
    }
    .audio_item_time{
        float: right;
    }
    .audio_item .clearafter{
        margin-bottom: 5px;
    }
    .audio_item audio{
        width: 100%;
    }
    

    3.2 JavaScript (Нужна библиотека jQuery)

    $(".audio_item").click(function(){
        var t = $(this);
        t.siblings(".audio_item").removeClass("active").find("audio").remove();
        if(!t.find("audio").length){
            t.append("");
            t.addClass("active");
        }
    });
    

    Комментарии (1)

    1. Юрий 26 февраля 2019, 16:22 # 0
      Чтобы не мучиться с выводом отдельно первой песни и отдельно остальных, можно было через js первую песню сделать активной с плеером ) Поправьте, если ошибаюсь. А так спасибо за ваше решение, сейчас буду пробовать его воплотить ))
      *Комментарий будет опубликован после проверки модератором

      Комментарии easyComm

      Александр 17 марта 2018, 22:31

      Согласен с комментатором выше. Ниче не работает: на паузу композиция не ставится, переключение не переключается. Фигня какая то

      Вадим 17 марта 2018, 22:31

      Не переключаются песни. В чем может быть проблема?

      Похожие статьи

      Генератор настроек MIGX

      Документация на русском по MODX MIGX

      Подсказки по работе и заготовки для MiniShop2

      Импорт и экспорт в MiniShop2. Реализация 1

      pdoPage и getImageList - Постраничная навигация MIGX

      Как включить HTTPS (SSL) в MODX - Подробная инструкция

      Генерация YML для выгрузки в маркет

      Примеры работы с API MODX

      Расширение свойств товаров minishop2

      Примеры выборки where, optionFilters, innerJoin

      pThumb - ресайз изображений. Примеры использования.

      Примеры использования

      Сайт на обслуживании (выключить сайт)

      Вывести getImageList только если он не пустой

      Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

      Оформление и настройка easyComm. Комментарии и отзывы на сайте.

      Добавить в письмо контактную информацию

      Поиск на сайте с пакетом SimpleSearch

      Простая и симпатичная галерея fancybox

      Вывод tv-параметров в формате -

      Галерея. Вывести обложки альбомов и фотографии

      Подсчет и вывод количества потомков ресурса в MODX

      Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

      Quip для MODX. Более рабочий вариант

      pdoResources Заготовки для работы

      Сниппет для вывода размера и расширения файла

      Простой аудио-плеер HTML5

      Вывести список всех опций MiniShop2

      Как контролировать кэш CSS и скриптов

      Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

      Слайдер Slick slider в контенте ресурса

      Подключить MODX в стороннем PHP файле

      Простейшая авторизация

      Красивое адаптивное меню под pdoMenu

      Массово обновить ТВ, или другое поле через базу

      Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

      Изменить формат номера заказа

      Создать свою страницу в админке

      Сообщение о том, что сайт использует Cookie

      Получить grandparent. Вывести родитель родителя

      Симпатичный список файлов, загружаемых к ресурсу через MIGX

      Создать источник файлов

      Установить шаблон по-умолчанию для новых, создаваемых ресурсов

      Вывести все доступные плейсхолдеры

      Отредактировать шаблон письма

      Добавить скрипт перед тегом body

      Общая сумма по каждому товару в корзине Minishop2

      Создать раздел с паролем на сайте MODX

      Что делать если ее приходит почта администратору

      Фильтрация по TV параметрам в msProducts

      Дата на русском

      FontAwesome - часто используемые иконки для шаблонов MODX

      Создать пакет с пользовательской таблицей

      Заготовки для работы

      Курсы валют с cbr.ru на PHP

      Обязательный чекбокс при оформлении заказа

      getResources заготовки

      Загрузка сниппета после загрузки страницы через AjaxSnippet

      Соответствие названия классов с названиями таблиц в MySQL

      Баннеры с использованием BannerY

      Разбить вывод pdoResources на несколько колонок (блоков)

      Обработка остатков заказа в miniShop2

      CSS для постраничной навигации pdoPage

      Вывести время загрузки (формирования) страницы

      Расширить таблицу site_content (объект modResource) за 5 минут

      Счетчик посещений и скачиваний для сортировки ресурсов

      Вырезать кавычки — фильтр-сниппет MODX

      Обновить alias (псевдоним) у всех ресурсов

      Динамическое поле emailSubject в FormIt

      Бесплатная доставка от 5000 рублей в MiniShop2

      Скрыть информацию о том, что сайт работает на MODX

      Отсортировать ресурсы по количеству комментариев Quip MODx

      Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

      Создать редирект через autoRedirector API

      Вывести 404 ошибку по настройке TV MODX

      Ответ для сервиса moneta.ru

      Email сделать не обязательным полем

      Как разместить исходный код сниппета на сайте, в документации

      Ускорить установку MODX revo до пары кликов

      Постраничная навигация — набор параметров и CSS PdoPage

      Сделать поле размер обязательным

      Не работает подгрузка товаров ajax mfilter2 на мобильном

      Сделать все элементы статичными для Git и IDE

      Cортировать по списку id в pdoResources и pdoTools

      Кастомный чанк для AdminPanel

      Настройка стилей для комментариев Tickets

      Подключить текстовой редактор к доп. полям ресурса

      Разместить корзину внутри блока с оформлением заказа

      Динамическая замена шаблона ресурса - плагин

      Вывести список всех родителей в ТВ поле ресурса

      Вложенные условия в xPDO MODX

      Плагин для формирования замороженных URL с редиректом

      Приветственный экран / заглушка на сайт

      Вывести список всех емэйлов miniShop2

      Если getParentIds не работает в плагине

      Как получить данные пользователя сразу после авторизации через API

      xPDO Выборка из одной таблицы с зацепкой значения из другой

      Контролировать кэширование файлов CSS и JS MiniShop2

      Не приходят / не отправляются письма - в чем причина?

      Кэширование в MODX: использование $modx->cacheManager

      Наш сайт использует куки, нажмите «ОК» если вы не против
      OK