Простой аудио-плеер 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");
        }
    });
    
    Способ поблагодарить автора сайта:

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

    1. Напишите первый комментарий
    *Комментарий будет опубликован после проверки модератором

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

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

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

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

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

    [MODx] Подсказки по API

    [MODx] minishop2 tips

    [Code helper] Заготовки для работы

    Преобразовать JSON в HTML

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

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

    [MODX, pdoCrumbs] Вывести список всех родителей в ТВ поле ресурса

    [JS] Связать значения инпутов через jQuery (биндинг)

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

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

    [OpenCart 1.5.1] Массово изменить адреса картинок у товаров

    Вывести список всех файлов на сервере (и размер файла)

    [PHP] Фиксированная сортировка массива на основе хэша

    Курсы валют с cbr.ru на PHP, с запасным вариантом и кэшированием

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

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

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

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

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

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

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

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

    [PHP] Узнать скорость выполнения кода. Простой таймер PHP

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

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

    [MODX, MiniShop2] Отредактировать шаблон письма

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

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

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

    [JS] Маска для ввода телефона +7(___)___-__-__

    [MODX, MiniShop2] Добавить в письмо контактную информацию

    [MODX, MiniShop2] Email сделать не обязательным полем

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

    [MODX, MiniShop2] Изменить формат номера заказа

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

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

    reCaptcha не через форму (без тега <form>)

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

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

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

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

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

    Передать файл с одного на другой сервер

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

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

    [MODX, MIGX] Простейшая авторизация

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

    [MODX] Узнать размер файла

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

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

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

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

    [MODX, MIGX] Вывести getImageList только если он не пустой

    Bxslider отображение картинок после полной загрузки слайдера

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

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

    [MODX, MIGX] Простой аудио-плеер HTML5

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

    [OpenCart] Вывести на главную все категории с картинками

    [PHP] Получить древовидный массив за один запрос к базе

    Вырезать кавычки - фильтр MODx

    Регулярное выражение

    [MODx] Генератор настроек MIGX

    [MODx, MIGx] Документация на русском по MIGx

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

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

    [MODx,MiniShop2] Не приходит почта администратору

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

    [Opencart] Вернуть английский язык, если вы его удалили

    Универсальная форма обратной связи — feedBackForm

    [MODx, miniShop2] Генерация YML для выгрузки в маркет

    Редиректы

    [MODx] pdoPage pagination css

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

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

    [MODx, minishop] Фильтрация по TV параметрам в msProducts

    Регулярные выражения notepad++ примеры

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

    [JS] Заготовочки

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

    [MODx, XML] Ответ для сервиса moneta.ru

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

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

    [PHP] Простое логирование

    [OpenCart] Вывести модуль напрямую через контроллер

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

    [MODx, MIGX] Примеры использования

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

    [Opencart, FilterPro] Не работает пагинация

    [OpenCart] Заготовки для автоматического заполнения товарами магазина 1.5.5.1.2

    [PHP] Разные фишки, заготовки

    [PHP, JSON] Пример перевода с помощью Yandex Translate API

    [MySQL] Примеры запросов

    [MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

    [MODx] Дата на русском

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

    [Opencart] API tips

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

    [PHP] Загрузить файл для постобработки

    [Opencart 2] Показывать в категориях

    [MODx, Quip] Более рабочий вариант.

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

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

    [MODx] getResources заготовки

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

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

    Удалить HTML-теги span, и стили из тега br

    Полезные ссылки

    Все записи