Вставка flash-аудиоплеера на страницах сайта — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 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

Задача: встраивать на сайте аудиотреки, которые можно прослушивать онлайн.

Audioflashplayer.png

Реализация:
Существуют достаточно большое количество flash-аудиоплееров. В данной статье мы рассмотрим работу с плеером от Martin Laine.
Скачать плеер можно на его официальной странице:
http://wpaudioplayer.com/

Нас интересует Standalone версия плеера.

  1. Скачайте архив с плеером
  2. В корне сайта создайте папку, например /audioplayer/ и поместите в неё два файла из скаченного архива: audio-player.js и player.swf
  3. В этой же папке создайте папку /mp3/, в которую будем помещать наши аудиотреки. Стоит заметить, что все треки должны иметь название на латинице.
  4. Откройте шаблон, который отвечает за вывод страниц, на которых будут внедряться аудиотреки и в секции <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.

При инициализации плеера можно указать различные параметры (автостарт, повторение, прозрачность, настроить цвета плеера и т.п.), обязательным из которых является ширина плеера. Об остальных параметрах Вы можете узнать на официальной странице плеера.

  1. Теперь Вы уже можете вставлять в виде 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;
}
  1. Теперь можем использовать наш макрос на страницах сайта:
%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