Создание аудио флеш-плеера

Аватар пользователя artur.baranok
Опубликовано пн, 07/06/2015 - 12:59 пользователем artur.baranok

Для создания собственного аудио флеш-плеера вам понадобиться

1. Флеш-плеер (файл *.swf в виде http://...../player.swf)

2. Аудиофайл (в виде http://...../music.mp3)

HTML-код:

<object data="http://../player.swf" type="application/x-shockwave-flash" width="240" height="64">
<param name="movie" value="http://../player.swf">
<param name="menu" value="false">
<param name="scale" value="noscale">
<param name="flashvars" value="src=http://../music.mp3&amp;autostart=no">
</object>

Для примера, рассмотрим сервис http://flv-mp3.com

Возможности

  • online-генератор настроек
  • работа во всех популярных браузерах
  • возможность использовать заставку
  • все файлы на вашем сервере
  • малый вес — около 20Кб
  • темы оформления (скины)
  • приятный дизайн
  • выбор цвета
  • бесплатный сервис

Инструкция для аудио

Желательно перед публикацией максимально уменьшить размер файла, сохранив приемлемое качество звука. Меньший размер даст возможность многим людям слушать запись без прерываний и сэкономит трафик (можно, например, пожертвовать стерео и уменьшить битрейт на свое усмотрение).

Далее размещаем подготовленный mp3-файл в интернете на своем хостинге. Скачиваем файл плеера (ump3player.swf) и также размещаем его на своем сайте. Таким образом вся сборка будет находиться на вашем хостинге под контролем.

В итоге, осталось настроить плеер и получить html-код для того, чтобы вставить плеер на страницу. Собственно, для этого и существует данный сервис, так как без специальных знаний трудно решить эту нетривиальную задачу. По ссылке «Собрать» открывается форма для настройки плеера и генерации html-кода.

Код плеера:

<object width="470" height="70" type="application/x-shockwave-flash" data="http://audio.la.by/sites/default/files/audio/ump3player_500x70.swf">
<param name="wmode" value="transparent" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://audio.la.by/sites/default/files/audio/ump3player_500x70.swf" />
<param name="FlashVars" value="way=http://vitvirtuoz.la.by/images/stories/audio/Track01.mp3&amp;swf=http://...Пример флеш-плеера" /></object>

Как формируется HTML-код?

HTML-код, генерируемый нашим сервисом, содержит все параметры плеера, настраиваемые через интерфейс. Параметры можно исправлять вручную прямо в HTML. Также следует разобраться в параметрах при интеграции плеера в CMS. Расшифруем построчно (обратите внимание на дублирование параметров, чтобы плеер корректно работал во всех браузерах):

<OBJECT width="400" height="60">
Размеры плеера. Соотношение сторон должно быть 20 (ширина):3 (высота).

<PARAM NAME="movie" VALUE=http://yoursite.com/ump3player_500?70.swf />
Абсолютная или относительная ссылка на файл плеера.

<param name="wmode" VALUE="transparent" />
Включается прозрачный фон для флеш-ролика.

<param name=FlashVars value="way=http://yoursite.com/sample.mp3&swf=http://yoursite.com/ump3player_500x70...
time_seconds=164&autoplay=0&skin=white&volume=70&comment=Название" />
Настройки плеера (следуют через & в формате параметр=значение):

* way — путь к файлу flv;
* swf — путь к файлу плеера;
* w — ширина плеера (дублируется из тега object);
* h — высота плеера (дублируется из тега object);
* time_seconds — время mp3-файла в секундах;
* autoplay — плеер начинает играть сразу (1) или ждет, пока нажмут на Play (0) — рекомендуется;
* skin — цветовая схема плеера или скин (адрес скина);
* volume — стартовый уровень звука (потом пользователь настраивает сам на свое усмотрение) — 0-100;
* comment - пояснительная надпись (название ролика) во время заставки;
Обязательные параметры — way и time_seconds.

<embed src=http://yoursite.com/ump3player_500?70.swf wmode="transparent" type="application/x-shockwave-flash" flashvars="way=http://yoursite.com/sample.mp3&swf=http://yoursite.com/ump3player_500x70...
time_seconds=164&autoplay=0&skin=white&volume=70&comment=Название" width="400" height="60" /></embed>
Здесь дублируются параметры
путь к файлу плеера swf — scr
настройки плеера — flashvars
ширина плеера — width
высота плеера — height

</OBJECT>