Вставка flash-аудиоплеера на страницах сайта — различия между версиями
Velross (обсуждение | вклад) |
Velross (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
<p><b>Задача:</b> встраивать на сайте аудиотреки, которые можно прослушивать онлайн.</p> | <p><b>Задача:</b> встраивать на сайте аудиотреки, которые можно прослушивать онлайн.</p> | ||
| + | [[Файл:Audioflashplayer.png]] | ||
<p><b>Реализация:<br /> | <p><b>Реализация:<br /> | ||
</b>Существуют достаточно большое количество flash-аудиоплееров. В данной статье мы рассмотрим работу с плеером от Martin Laine.<br /> | </b>Существуют достаточно большое количество flash-аудиоплееров. В данной статье мы рассмотрим работу с плеером от Martin Laine.<br /> | ||
Версия 20:16, 26 августа 2012
Задача: встраивать на сайте аудиотреки, которые можно прослушивать онлайн.
Реализация:
Существуют достаточно большое количество flash-аудиоплееров. В данной статье мы рассмотрим работу с плеером от Martin Laine.
Скачать плеер можно на его официальной странице:
http://wpaudioplayer.com/
Нас интересует Standalone версия плеера.
- Скачайте архив с плеером
- В корне сайта создайте папку, например /audioplayer/ и поместите в неё два файла из скаченного архива: audio-player.js и player.swf
- В этой же папке создайте папку /mp3/, в которую будем помещать наши аудиотреки. Стоит заметить, что все треки должны иметь название на латинице.
- Откройте шаблон, который отвечает за вывод страниц, на которых будут внедряться аудиотреки и в секции <head> вставьте код, инициализирующий плеер:
<script type="text/javascript" src="path/to/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {
width: 290
});
</script>
В данных скриптах необходимо прописать путь до файлов audio-player.js и player.swf.
При инициализации плеера можно указать различные параметры (автостарт, повторение, прозрачность, настроить цвета плеера и т.п.), обязательным из которых является ширина плеера. Об остальных параметрах Вы можете узнать на официальной странице плеера.
- Теперь Вы уже можете вставлять в виде javascript-кода сами треки:
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});
</script>
Каждый экземпляр плеера привязывается к уникальному id. Данный id указывается как в html-элементе, например в параграфе, так и в самом javascript-коде. Если файл не удастся воспроизвести, то будет показан элемент с пояснительным текстом.
На официальной странице Вы можете увидеть больше примеров кода с использованем дополнительных параметров, в т.ч. код вставки целого списка треков для воспроизведения в одном экземпляре плеера.
Чтобы облегчить себе внедрение кода плеера на страницах сайта, напишем небольшой макрос в файле custom.php:
//TODO: Write your own macroses here
// Функция получает 2 параметра: id – элемента и список файлов
function audioplayer ($idmusic, $mp3files) {
// Путь к mp3 файлам:
$pathmp3 = 'http://localhost/audio-player/mp3/';
// Получаем массив файлов
$partmp3 = explode(";", $mp3files);
// Подсчитываем количество элементов в массиве
$count_files = count($partmp3);
// Обрабатываем массив в цикле
foreach ($partmp3 as $v) {
$i++;
// Вырезаем лишнюю запятую
if ($count_files != $i) $files .= $pathmp3.$v.','; // составляем строку из пути и названия файла
else $files .= $pathmp3.$v;
}
// Формируем код для вставки
$music = <<<MUSIC
<div id="$idmusic">Alternative content</div>
<script type="text/javascript">
AudioPlayer.embed("$idmusic", {soundFile: "$files"});
</script>
MUSIC;
// Возвращаем код
return $music;
}
- Теперь можем использовать наш макрос на страницах сайта:
%custom audioplayer(music1,Brian Setzer Orchestra - Americano.mp3)%
Будет вставлен код:
<div id="music1">Alternative content</div>
<script type="text/javascript">
AudioPlayer.embed("music1", {soundFile: "http://localhost/audio-player/mp3/Brian Setzer Orchestra - Americano.mp3"});
</script>
Или можем вставить список файлов, разделив названия точкой с запятой:
%custom audioplayer(music2,Kalimba.mp3;Sleep Away.mp3;Maid with the Flaxen Hair.mp3)%
Будет вставлен код:
<div id="music2">Alternative content</div>
<script type="text/javascript">
AudioPlayer.embed("music2", {soundFile: "http://localhost/audio-player/mp3/Kalimba.mp3,
http://localhost/audio-player/mp3/Sleep Away.mp3,http://localhost/audio-player/mp3/Maid with the Flaxen Hair.mp3"});
</script>
Версия системы: 2.8.5.3
