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

Velross в 17:30, 7 июня 2013

2013-06-07T17:30:49Z

Velross в 17:21, 7 июня 2013

2013-06-07T17:21:44Z

Velross в 11:54, 5 мая 2013

2013-05-05T11:54:33Z

Velross в 20:16, 26 августа 2012

2012-08-26T20:16:05Z

Velross в 19:58, 26 августа 2012

2012-08-26T19:58:50Z

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

Реа…»

2012-08-26T19:53:19Z

Новая страница: «<p><b>Задача:</b> встраивать на сайте аудиотреки, которые можно прослушивать онлайн.</p> <p><b>Реа…»

Новая страница
<p><b>Задача:</b> встраивать на сайте аудиотреки, которые можно прослушивать онлайн.</p>
<p><b>Реализация:<br />
</b>Существуют достаточно большое количество flash-аудиоплееров. В данной статье мы рассмотрим работу с плеером от Martin Laine.<br />
Скачать плеер можно на его официальной странице:<br />
http://wpaudioplayer.com/</p>
<p>Нас интересует Standalone версия плеера.</p>
<ol>
<li>Скачайте архив с плеером</li>
<li>В корне сайта создайте папку, например <i>/audioplayer/</i> и поместите в неё два файла из скаченного архива: <i>audio-player.js</i> и <i>player.swf</i></li>
<li>В этой же папке создайте папку <i>/mp3/</i>, в которую будем помещать наши аудиотреки. Стоит заметить, что все треки должны иметь название на латинице.</li>
<li>Откройте шаблон, который отвечает за вывод страниц, на которых будут внедряться аудиотреки и в секции <i><head></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>
<p align="left"> В данных скриптах необходимо прописать путь до файлов <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>

Версия системы: 2.8.5.3

@@ Строка 1: / Строка 1: @@
 <p><b>Задача:</b> встраивать на сайте  аудиотреки, которые можно прослушивать онлайн.</p>
 [[Файл:Audioflashplayer.png]]
@@ Строка 85: / Строка 87: @@
 </source>
-Версия системы: 2.8.5.3
-[[Категория:Сторонние сервисы и программы]]
+[[Категория:Сторонние сервисы и программы]][[Категория:Написание кастомных макросов]]

← Предыдущая		Версия 11:54, 5 мая 2013
Строка 86:		Строка 86:

	Версия системы: 2.8.5.3		Версия системы: 2.8.5.3
		+	[[Категория:Сторонние сервисы и программы]]

@@ Строка 7: / Строка 7: @@
 <p>Нас интересует Standalone  версия плеера.</p>
 <ol>
-   <li>Скачайте архив с  плеером</li>
+   <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>

@@ Строка 20: / Строка 20: @@
 </script>
 </source>
-<p align="left">  В данных скриптах необходимо прописать путь до файлов <i>audio-player.j</i>s и <i>player.swf</i>.<br />
+В данных скриптах необходимо прописать путь до файлов <i>audio-player.j</i>s и <i>player.swf</i>.<br />
    При инициализации плеера можно указать различные  параметры (автостарт, повторение, прозрачность, настроить цвета плеера и т.п.),  обязательным из которых является ширина плеера. Об остальных параметрах Вы  можете узнать на официальной странице плеера.</p>
 <ol start="5">
@@ Строка 66: / Строка 66: @@
 </ol>
 <source lang="text">%custom  audioplayer(music1,Brian Setzer Orchestra - Americano.mp3)%</source>
-  Будет вставлен код:
+Будет вставлен код:
 <source lang="html4strict">
 <div id="music1">Alternative content</div>