Плеер для сайта – в этом уроке, мы продолжим рассмотрение способов создания и добавления на сайт аудио плееров.

Из прошлых уроков мы выяснили, что плеер для сайта, достаточно легко организуется на странице, добавлением нескольких строк html кода, при использовании тегов  OBJECT и EMBED.

Кроме того, мы отметили проблемы, которые возникают при таком способе добавления плеера на сайт.

Поэтому давайте рассмотрим другие варианты добавления на сайт аудио плееров, которые являются наиболее распространенными, надежными и продвинутыми.

Очень часто, web-мастер, решивший добавить на страницы своего сайта плеер, делает запрос в поисковой системе, и, воспользовавшись результатами поиска,  попадает на ресурсы, накоторых в качестве сервиса,  предлагается собрать плеер для сайта.

Здесь имеется ввиду следующее.  Сервисный сайт предоставляет пользователю on-line скрипт, вводя в который исходные данные, Вы генерируете html код плеера.

На мой взгляд, в данном подходе, самым важным является то, что для воспроизведения звукового файла, Вы используете специальную программу -плеер, а не плагин для браузера.

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

Смотрите, что у нас получается.  Плеер и воспроизводимый аудио файл, находятся на одном хостинге. Браузер, не ищет плагины, он просто открывает страницу с плеером. Путь к плееру, свойства плеера, и путь к воспроизводимому mp3 аудио файлу, передаются браузеру через параметры.

В результате, посетителю сайта остается только нажать на кнопку воспроизведения и прослушать звуковой  mp3 файл.

Действия при этом подходе, у нас следующие. Вначале мы  скачиваем плеер с сайта – сервиса.  Затем, мы закачиваем плеер и звуковой файл, на свой хостинг, при этом, вы копируете путь к закачанным файлам.

Далее, Вы заходите на сайт сервис сборки плеера. Тут Вы заполняете необходимые поля, и запускаете скрипт сервиса на выполнение. Результатом работы сервиса является сгенерированный html код, который вы вставляете  на любую станицу своего сайта.

Нет ничего лучше наглядного примера, поэтому, давайте посмотрим, как сгенерировать html код плеера для сайта,  на примере сервиса: flv-mp3.com/ru/

Итак, заходим на страницу сервиса https://flv-mp3.com/ru/.

Как видите, на главной странице сервиса есть возможность собрать как видео, так и аудио mp3 плеер. В данном случае, нас интересует аудио mp3 плеер, поэтому читаем информацию относительно сборки аудио плеера.

Принцип сборки аудио плеера, я описал выше. Теперь, давайте подробнее остановимся на последовательности сборки аудио плеера.

Итак, первое, что необходимо сделать, это подготовить mp3 файл, который нам требуется воспроизвести на сайте.  Предположим, что мы решили воспроизводить на сайте mp3 файл с именем - track_1.mp3.

Далее кликаем кнопку “Скачать” и скачиваем с сервиса  flv-mp3.com/ru/ плеер. Плеер – это Flash файл. С сервиса он скачивается архивом  - ump3player.rar.  После распаковки архива,  мы получаем файл Flash плеера - ump3player_500x70.swf.

Следующим шагом закачиваем два файла: track_1.mp3 и ump3player_500x70.swf  на свой хостинг. Я закачал файлы на сайт my-1-site.ru в каталог flv-mp3. 

Запишем пути к файлам, у меня получились следующее:

https://my-1-site.ru/flv-mp3/track_1.mp3

https://my-1-site.ru/flv-mp3/ump3player_500x70.swf

Ну что же, теперь мы готовы воспользоваться сервисом flv-mp3.com/ru/ и собрать на нём плеер для файлов, которые лежат на хостинге сайта  my-1-site.ru.

Для сборки плеера, кликаем кнопку “Собрать”.  Нам открываются страница https://flv-mp3.com/ru/mp3/.  Здесь заполняем информацией необходимые поля, в частности, ссылку на mp3 файл и ссылку на swf файл Flash плеера.

Далее, добавляем надпись, которая будет показываться плеером, при воспроизведении mp3  файла.

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

Осталось выставить уровень начальной громкости воспроизведения на плеере и нажать кнопку “Собрать и получить html код”.

Скрипт сервиса обрабатывает ведёную  Вами информацию и выдаёт в окно готовый html код mp3 плеера для Вашего сайта.

HTML код будет выглядеть примерно так:

На сайте данная сборка плеера выглядит вот так:

Я думаю, Вы понимаете, что используя параметры сбоки Вы можете подобрать размеры и цвет плеера под дизайн любого сайта.

А вот та же самая сборка плеера на моем сайте my-1-site.ru:   https://my-1-site.ru/flv-mp3/index.html 

В этом html коде, как Вы видите, для добавления mp3 плеера для сайта, используется  тег  object, мы его изучали в третьем уроке.

Разница только в том, что в данной сборке, мы используем не плагин, а Flash программу плеера - ump3player_500x70.swf.  Файл программы закачен на хостинг. Поэтому браузер без проблем откроет на странице  плеер и воспроизведёт mp3 файл.

Необходимо отметить, что в данном случае, используются flash технологии, которые поддерживаться браузером.

В следующий раз, мы посмотрим, как добавить плейлист для сайта.

Автор: Виктор Милованов