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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      getResources заготовки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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