Як вставити аудіо в вордпресс статтю?

Нещодавно я почав тісніше знайомитись з стандартами HTML5 . Раніше можливості не було, був трішки зайнятий 9 місяців. Так от, виявляється, хтмл 5 дозволяє вставляти аудіо треки, не використвуючи технологій flash (урааааа), більше того, дає ще купу налаштувань (прелоад, гучність, перемотка і т.п.). Не буду тягнути кота за яйця, адже нас цікавить, як саме вставити аудіотрек в вордпресс:

Шорткод

Отож, ми будемо вставляти аудіо файл, використовуючи Шорткод (shortcode), це набагато зручніше в вордпрессі.

Відкриємо файл вашого шаблону function.php і додайте до нього код:

function html5_audio($atts, $content = null) {
extract(shortcode_atts(array(
"src" => '',
"play" => '',
"preload"=> 'auto',
"loop" => '',
"controls"=> 'controls'
), $atts));
return '<div><audio src="'.$src.'" '.$play.' preload="'.$preload.'" loop="'.$loop.'" controls="'.$controls.'" autobuffer /></div>';
}
add_shortcode('audio5', 'html5_audio');

function html5_audio($atts, $content = null) {

extract(shortcode_atts(array(

"src" => '',

"play" => '',

"preload"=> 'auto',

"loop" => '',

"controls"=> 'controls'

), $atts));

return '<div><audio src="'.$src.'" '.$play.' preload="'.$preload.'" loop="'.$loop.'" controls="'.$controls.'" autobuffer /></div>';

}

add_shortcode('audio5', 'html5_audio');

За допомогою цих рядків ми створили шорткод [audio5]з параметрами. Для прикладу, шорткод з параметрами виглядатиме так:

[audio5 src="http://ваш-url/audio/audio.mp3" loop="loop" preload="auto" loop="loop" controls="yes"]

1	[audio5 src="http://ваш-url/audio/audio.mp3" loop="loop" preload="auto" loop="loop" controls="yes"]

[audio5 src="http://ваш-url/audio/audio.mp3"]

1	[audio5 src="http://ваш-url/audio/audio.mp3"]

Маленька легенда:

src – пряме посилання на файл (параметр обовязковий!)
loop – параметр зациклення аудіо (необовязковий, значення – loop, або нічого)
preload – чи потрібно підгружати файл на компютер перед відтворенням ( необовязковий параметр, значення – auto, metadata, none)
controls – параметр кнопок управління плеєра ( необовязковий параметр, значення – controls або нічого)

Кроссбраузерність

Звичайно, ХТМЛ5 ще новий стандарт і не всі браузери будуть підтримувати відтворення аудіо. Тому і технологія флеш ще в силі. Стандарти хтмл5 дозволяють використвувати аудіо декількох відомих форматів MP3, OGG, AAC, WAV, подивимось які браузери які формати підтримують:

Браузер	Ogg	MP3	AAC	Wav
Internet explorer 9	–	+	+	–
Mozilla Firefox 5	+	–	–	+
Google Chrome 12	+	+	+	+
Safari 5	–	+	+	+
Opera 11.5	+	–	–	+