Как добавить проигрыватель mp3 в пост WordPress

Написано: 26.03.2011

Мне нравится дополнять записи в блоге  картинками, видео и mp3-файлами. MP3-файлы могут быть с фрагментом интервью как в посте с Волочковой или с песней о никчёмной жизни, как в случае с постом про сериал «Косяки». Собственно пост про сериал и стал поводом для написания этого.

Чтобы проигрывать файлы mp3 внутри постов в блоге, который работает на WordPress я и раньше использовал пожалуй самый распространённый в России плеер Uppod. Флэш-плеер от Uppod можно вставить внутрь любого html-кода и читатели же увидят симпатичный проигрыватель, внешний вид которого, кстати можно настроить на офсайте плеера.

В случае с постом про Волочкову код флэш-плеера внутри поста выглядит так


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="470" height="70" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="data" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="FlashVars" value="way=http://shipachev.com/wp-content/uploads/2011/02/volochkova.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=470&amp;h=70&amp;time_seconds=0&amp;autoplay=0&amp;q=&amp;skin=grey&amp;volume=70&amp;comment=" /><param name="src" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" /><embed type="application/x-shockwave-flash" width="470" height="70" src="http://flv-mp3.com/i/pic/ump3player_500x70.swf" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" flashvars="way=http://shipachev.com/wp-content/uploads/2011/02/volochkova.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=470&amp;h=70&amp;time_seconds=0&amp;autoplay=0&amp;q=&amp;skin=grey&amp;volume=70&amp;comment="></embed></object>

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

Но каждый раз править этот код занятие довольно неблагодарное, я уж не говорю про генерацию его на сайте плеера.

Для упрощения вставки музыки в блог WordPress я решил добавить в код движка отдельную функцию.

Для этого нужно:

В интерфейсе администратора выбрать пункт «Внешний вид» — «Редактор» и открыть файл «Функции темы». Лучше сделайте себе резервную копию этого файла, потому что удалив здесь одну скобку или запятую вы легко можете сделать блог неработоспособным.

В движке WordPress предусмотрены так называемые шорткоды, то есть написав в тексте поста специальный короткий код мы можем добавить вместо него при выводе поста читателю заранее подготовленный текст или html-код.

Воспользуемся этой возможностью.

В конец файла добавляем функцию, которая будет обрабатывать на шорткод.

function addmusic_shortcode($attr) {
if ($attr['url']<>'')
{
if (!$attr['text'])
{
$attr['text']=='';
}
 return '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="470" height="70" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="data" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="FlashVars" value="way=' . $attr['url'] . '&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=470&h=70&time_seconds=0&autoplay=0&q=&skin=grey&volume=70&comment=' . $attr['text'] . '" /><param name="src" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" /><embed type="application/x-shockwave-flash" width="470" height="70" src="http://flv-mp3.com/i/pic/ump3player_500x70.swf" flashvars="way=' . $attr['url'] . '&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=470&h=70&time_seconds=0&autoplay=0&q=&skin=grey&volume=70&comment=' . $attr['text'] . '" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf"></embed></object>';
}
else
{
return '';
}
}

Как видите это уже знакомый нам код плеера, но вместо пути к файлу в коде переменная $attr[‘url’]. Таким образом мы будем использовать этот код для вывода любых mp3-файлов. Также я решил добавить переменную $attr[‘url’], которая будет отвечать за вывод названия композиции.

Сразу в начале функции идёт проверка на то, чтобы переменная, в которой хранится путь к проигрываемому файлу не была пустая if ($attr[‘url’]<>»). В случае если это так, пользователь не увидит пустой код проигрывателя.

После функции необходимо еще добавить следующий код

add_shortcode('addmusic', 'addmusic_shortcode');

Эта команда присваивает шорткоду (addmusic) имя и указывает на функцию, которая будет обрабатывать шорткод (addmusic_shortcode)

Почти всё готово. Загружаете любой mp3-файл с помощью встроенного в WordPress загрузчика и в том месте куда нужно вставить проигрыватель в посте добавляйте код вызова шоркода. Например вот так.

[аddmusic url="http://shipachev.com/wp-content/uploads/2011/03/spring-delphin.mp3" text="Дельфин — Весна"]

В посте ваши читатели увидят такой плеер

comments powered by HyperComments
Расскажи друзьям
Aradel
2011-03-26 21:18:44
Послушал Дельфинчика, спасибо
Если вы заметили ошибку, выделите текст с ошибкой и нажмите Ctrl+Enter. Я её обязательно исправлю.