Главная > web, Программирование > Встраиваем плеер в WordPress.

Встраиваем плеер в WordPress.

Небольшой урок велосипедостроения от zetblog. Задача: дать возможность встроить аудио-плеер в посты WordPress с помощью плагина. Вообще, какие-то готовые плагины-плееры под wordpress уже существуют, но мне они, по разным причинам, мне не очень приглянулись. Тем более, хотелось заглянуть и узнать как это всё реализовано "под капотом". В качестве самого плеера была выбрана JS-библиотека audiojs.

Cоздние плагина для WordPress

Вообще, это не очень сложная штука. Плагин может состоять как из одного php-файла, так и из нескольких. В первом случае можно просто создать файл plugin_name.php без корневой папки, во втором - поместить всё в каталог с особой структурой. Желательно, чтобы имя плагина было уникальным, поэтому рекомендую перед названием проверить список уже существующих. Если вы решили создать плагин который будет размещён внутри каталога, а не одним файлом, то такой плагин обязательно должен содержать PHP-скрипт с тем же именем, что и его корневая папка. Т.е. если каталог плагина называется zetblog, то внутри неё необходимо создать скрипт с именем zetblog.php. Из соображений безопасности, желательно добавить ещё файл index.php, который можно оставить пустым. Это поможет скрыть отображение списка файлов в каталоге при некоторых небезопасных настройках web-сервера.

Главный файл плагина должен содержать заголовок примерно такого содержания:

Один из способов взаимодействия плагин для WordPress с ядром это регистрация своих функций-обработчиков которые вызываются перед или после выполнения определённых действий, т.н. хуков. Например, вы можете зарегистрировать обработчик, который будет принимать на вход содержимое поста и производить над ним какие-то действия. Это не единственный способ взаимодействия, но для наших целей его будет достаточно. Остальное можно прочитать в официальной документации, которая, кстати, частично переведена и на русский язык.

Audiojs

Audiojs это JavaScript-библиотека для проигрывания меди-файлов. Один из плюсов её использования это готовая кросс-браузерность, вот список поддерживаемых браузеров:

  • Mobile Safari (iOS 3+)
  • Android (2.2+, w/Flash)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)

Современные браузеры могут воспроизводить аудио-файлы с помощью html5, для более старых имеется "fallback"-вариант с использвоанием flash-плеера. Т.е. если audiojs не удастся воспроизвести музыку силами браузера, то автоматом должен подгрузиться flash-вариант проигрывателя.

Встраиваем плеер в WordPress

Приступим к написанию непосредственно самого плеера. Логика работы будет несколько упрощённой: к посту прикрепляется аудио-запись через встроенный в WordPress функционал добавления медиа-файлов, наш хук проверяет если в данных, которые вставляются в пост есть подстрока .mp3, то ссылку помечаем для обработки библиотекой JS (в данном случае, присваиваем свой CSS-класс для простоты поиска таких элементов в дальнейшем).

Подготовка плагина

Создаём папку audiojs, внутри пустой файл index.php, создаём подкаталог includes и распаковываем в него сам JS-библиотеку audiojs. Всё выглядит примерно так:

.
├── audiojs.php
├── includes
│   └── audiojs
│       ├── audiojs.swf
│       ├── audio.min.js
│       └── player-graphics.gif
└── index.php

Backend

Создаём в корне файл audiojs.php со следующим содержимым:

Тут у нас вставляется 2 своих обработчика. Первый - это добавление вызова функции "install_frontend" на хук "wp_enqueue_scripts". В теле самой функции указан файл aplayer.js, который мы рассмотрим чуть ниже. Далее, мы добавляем фильтр на хук "media_send_to_editor": функцию "mark_link". Логика её работы была описана выше: помечаем ссылки на mp3-файлы классом "playlist-item".

Тут идёт вызов двух разных функций: add_action и add_filter. На самом деле разница между фильтром и действием не существенна, более того, add_action - это просто обёртка на add_filter. Логика в общих чертах логика примерно такая: если вам надо поменять сами данные, то вы используете add_filter, если вам надо произвести какие-то действия, которые не влияют напрямую на данные, то вы используете add_action (например, "увеличить счётчик количества просмотров поста" - это скорее действие, а не фильтр).

wp_enqueue_scripts - хук для подключаения необходимых файлов на frontend'е: JS-скриптов, CSS-стилей (несмотря на то, что в названии присутствует только "scripts").

wp_enqueue_script - это безопасный и рекомендуемый способ добавления JS-скриптов в WordPress. Эта функция подключает запрошенные скрипты нужной версии, если они не были уже подключены ранее, и обрабатывает их зависимости. Мы указали что нам нужна библиотека audiojs, в её зависимостях - jQuery. Во втором вызове сказали что надо подключить aplayer, который требует audiojs и jquery. Так же указали в качестве подключаемой версии '0.2', это решит проблему кеширования старых JS-скриптов в браузерах пользователей при релизе новой версии плагина.

media_send_to_editor - как вы уже догадались, этот хук срабатывает при добавлении чего-либо из медиа-файлов WordPress'а в окно редактора поста.

Frontend

Теперь пришло время рассмотреть фронтенд-часть. Она совсем небольшая и состоит только из одного файла, aplayer.js:

jQuery(document).ready(function($) {
var cn = 'playlist-item'; // shortcut for class name

$('.' + cn).replaceWith(function() {
var i = $(this);

return i.html() + '

var a = audiojs.createAll({
trackEnded: function() {
a[(a.indexOf(this) + 1) % a.length].play();
},
});

$('.audiojs .play-pause').live('click', function() {
var current_index = $(this).parents('.audiojs').index('.audiojs');
$.each(a, function(i, v) {
if (i != current_index && a[i].playing) a[i].pause();
});
});
});

В этом скрипте можно выделить 3 основных части:

  1. Заменяем все помеченные нужным CSS-классом ранее ссылки на код плеера с использованием html-тега "audio".
  2. Говорим audiojs чтобы он обработал все теги audio и добавляем на событие "трек закончился" совой обработчик, который включит следующую песню на текущей странице.
  3. При клике на кнопке воспроизведения останавливаем запущенные на воспроизведение ранее файлы (чтобы не слышать какофонии при переключении между разными записями).

На этом всё. Можете скачать архив с плагином.

Пожалуйста, оцените полезность и качество данной статьи. Одна звезда - плохо, 5 - хорошо.
1/5. Мы будем признательны, если вы напишете комментарий с причиной низкой оценки.2/5. Мы будем признательны, если вы напишете комментарий с причиной низкой оценки.3/5. Мы будем признательны, если вы напишете комментарий с причиной низкой оценки.4/5.5/5. (2 голосов, средний: 5,00 из 5)
Загрузка...
  1. Пока что нет комментариев.
  1. Пока что нет уведомлений.