Простой аудио-плеер 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      getResources заготовки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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