Просмотр исходного текста страницы Вставка flash-аудиоплеера на страницах сайта

'''Актуально для версии 2.9'''
<br/>
<p><b>Задача:</b> встраивать на сайте  аудиотреки, которые можно прослушивать онлайн.</p>
[[Файл:Audioflashplayer.png]]
<p><b>Реализация:<br />
</b>Существуют достаточно большое  количество flash-аудиоплееров. В данной  статье мы рассмотрим работу с плеером от Martin Laine.<br />
Скачать плеер можно на его  официальной странице:<br />
http://wpaudioplayer.com/</p>
<p>Нас интересует Standalone  версия плеера.</p>
<ol>
  <li>Скачайте архив с  плеером либо на сайте либо здесь: [[Файл:Audio-player-standalone.zip]]</li>
  <li>В корне сайта  создайте папку, например <i>/audioplayer/</i> и  поместите в неё два файла из скаченного архива: <i>audio-player.js</i> и <i>player.swf</i></li>
  <li>В этой же папке  создайте папку <i>/mp3/</i>, в которую будем помещать  наши аудиотреки. Стоит заметить, что все треки должны иметь название на  латинице.</li>
  <li>Откройте шаблон,  который отвечает за вывод страниц, на которых будут внедряться аудиотреки и в  секции <i>&lt;head&gt;</i> вставьте код, инициализирующий  плеер:</li>
</ol>
<p align="left">
<source lang="javascript">
<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>  
</source>
В данных скриптах необходимо прописать путь до файлов <i>audio-player.j</i>s и <i>player.swf</i>.<br />
  При инициализации плеера можно указать различные  параметры (автостарт, повторение, прозрачность, настроить цвета плеера и т.п.),  обязательным из которых является ширина плеера. Об остальных параметрах Вы  можете узнать на официальной странице плеера.</p>
<ol start="5">
  <li>Теперь Вы уже  можете вставлять в виде javascript-кода  сами треки:</li>
</ol>
<source lang="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>
</source>  
<p>Каждый экземпляр плеера привязывается к уникальному id. Данный id указывается как в html-элементе,  например в параграфе, так и в самом javascript-коде. Если файл не удастся воспроизвести,  то будет показан элемент с пояснительным текстом.</p>
<p>На официальной странице Вы можете увидеть больше  примеров кода с использованем дополнительных параметров, в т.ч. код вставки  целого списка треков для воспроизведения в одном экземпляре плеера.</p>
<p>Чтобы  облегчить себе внедрение кода плеера на страницах сайта, напишем небольшой  макрос в файле <i>custom.php</i>:</p>
<source lang="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;
}
</source> 
<ol start="6">
  <li>Теперь можем  использовать наш макрос на страницах сайта:</li>
</ol>
<source lang="text">%custom  audioplayer(music1,Brian Setzer Orchestra - Americano.mp3)%</source> 
Будет вставлен код:
<source lang="html4strict">
<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>
</source> 
<p>Или можем вставить список  файлов, разделив названия точкой с запятой:<br />
<source lang="text">%custom  audioplayer(music2,Kalimba.mp3;Sleep Away.mp3;Maid with the Flaxen Hair.mp3)%</source>
Будет вставлен код:
<source lang="html4strict">
<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>
</source>


[[Категория:Сторонние сервисы и программы]][[Категория:Написание кастомных макросов]]