Для того чтобы на странице сайта была возможность прослушивать звуковой файл, на неё необходимо добавить плеер.
Существует четыре основных способа добавления аудиоплеера на сайт.
- Плеер на сайт добавляется с помощью стандартных HTML-тегов и добавляемых плагинов для браузера.
Недостатки – мы все знаем некоторую несовместимость работы широко распространенных браузеров. Поэтому не факт, что любой посетитель Вашего сайта, сможет прослушать Ваш звуковой файл.
- HTML-код плеера формируется на сервисном сайте, специализирующемся именно на формировании кода плеера. Вам остаётся только скопировать код к себе на страницу.
Недостатки – если сервис не будет доступен в Интернет, то плеер не отобразиться на Вашей странице, так как ссылка на него не будет работать.
- Есть сервисы, которые позволяют генерировать HTML-код плеера, с данными Вашего сайта.
Это хороший вариант, так как и воспроизводимый звуковой файл, и плеер находятся на Вашем сайте. И если Ваш сайт доступен в сети, то всё будет работать.
- Вы сами находите бесплатный плеер в Интернет, закачиваете его на сайт и сами пишите HTML-код для него.
Этот способ похож на предыдущий. Просто при добавлении плеера на сайт, вы полностью разбираетесь с HTML-кодом.
Для установки плеера на сайт, можно использовать тег <EMBED>.
Механизм добавления на HTML-страницу внешних объектов, таких как звук и видео, основан на использовании установки плагинов для Вашего браузера. Причем, при использовании тега <EMBED>, браузер открывает внешний объект с помощью того плагина, который у него установлен в данный момент.
Так как на браузерах посетителей сайта, могут быть установлены разные плагины, то внешний вид аудио плееров может сильно отличаться друг от друга, это необходимо учитывать.
Как только, браузер встречает в HTML-коде тег <EMBED>, то он, подгружает подходящий установленный плагин. Если подходящего плагина не окажется, тогда браузер выдаст сообщение о том, что плагин необходимо установить и предлагает перейти на страницу установки.
Параметры тега <EMBED>
- align — выравнивание объекта по отношению к окружающему контенту
- border — устанавливает размер рамки вокруг объекта
- classid — указывает на класс объекта, используя адрес его нахождения
- codebase — базовый адрес, по которому будут определяться относительные адреса, указанные в classid, data, archive.
- codetype — тип данных, которые использует объект, согласно параметруclassid
- data — путь к данными, которые объект будет обрабатывать
- declare — объявление объекта
- height — высота объекта
- hspace — боковые отступы объекта от окружающего контента
- pluginpage – адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
- standby — выводит сообщение, пока объект не загрузится
- type — тип данных, которые хранятся по адресу, указанному в data
- vspace — отступы сверху и снизу от окружающего контента
- width — ширина объекта
- title — выводит всплывающую подсказку при наведении курсора мыши на html-элемент.
- SRC — адрес музыкального файла
Пример
<!DOCTYPE HTML-PUBLIC “-//W3C//DTD HTML-4.0 Transitional//EN”>
<html>
<head>
<title>Плеер для сайта</title>
<META HTTP-EQUIV=”content-type” CONTENT=”TEXT/HTML; CHARSET=windows-1251″>
</head>
<body>
<embed src=”track_1.mp3″ width=”350″ height=”50″ autostart=”0″ type=”application/x-mplayer2″ pluginspage=”http://www.macromedia.com/go/getflashplayer” hspace=”10″ vspace=”10″>
</embed>
</body>
</html>
Теперь подробнее, за что отвечает в данном коде каждый параметр.
Итак, тег <EMBED>, указывает, на то, что на страницу будет добавлен внешний объект. Путь к файлу объекта, указан в параметре src, src=”track_1.mp3″
Если воспроизводимый файл будет размещён на сервере, то лучше указать его абсолютный адрес, например, http://www.site.ru/track_1.mp3
Далее, идет размер объекта, в данном случае, плеера. Параметрами width=”350″ height=”50″ указаны ширина и высота плеера.
Параметр autostart=”0″ указывает на то, что после загрузки страницы, плеер будет остановлен.
Это очень важный параметр. Представьте, если по загрузке страницы, проигрыватель сразу начнет воспроизводить звук, и при этом у посетителя сайта уровень громкости будет высоким, такое не каждому понравится, поэтому, по умолчанию, плеер должен быть остановлен.
Тип объекта указан в параметре – type.
В случае, если у браузера не будет установлен плагин для отображения этого объекта, то параметром (pluginspage) браузеру указано, где этот плагин можно взять: pluginspage=”http://www.macromedia.com/go/getflashplayer.
Таким образом, используя тег <EMBED>, на web-странице размещается плеер и у посетителя сайта появляется возможность воспроизвести звуковой файл.
Внешний вид плеера зависит от установленных в данный момент плагинов для браузера. Если подходящего установленного плагина не окажется, то браузер выдаст окно с сообщением, что требуется установить необходимое программное обеспечение.
Вторым способом установки плеера является использование парного тега OBJECT, который, так же, как и тег <EMBED>, передает браузеру, как загружать и отображать объекты, которые браузер не понимает.
Параметры тега <OBJECT>
- align – выравнивание объекта на странице
- classid – адрес программы или плагина, которая будет его запускать
- code – имя Java-апплет для выполнения плагина
- codebase – путь к папке с Java-апплетом, указанный в параметре code или classid
- Codetype – тип объекта, заданный параметром classid
- data – адрес файла для его отображения в окне браузера
- height – высота объекта
- hspace – горизонтальный отступ от объекта до контента
- type – MIME-тип объекта
- vspace – вертикальный отступ от объекта до контента
- width – ширина объекта
- SRC — адрес музыкального файла
При этом, каждый параметр может содержать аргументы.
Кроме стандартных параметров, тег <OBJECT>, поддерживает дополнительные параметры, которые описываются тегом <PARAM>. Тег <PARAM>, является вложенным тегом, для тега<OBJECT>.
К сожалению, тег OBJECT и описанные в нём параметры объектов, по-разному обрабатываются браузерами. Это необходимо учитывать при написании и использовании html-кода объектов, таких, как плеер.
В связи с этим, можно встретить HTML-код, с вложенными друг в друга тегами OBJECT, которые описывают объекты для разных браузеров. Это делается для того, чтобы посетитель сайта с любым браузером, мог гарантированно открыть на странице сайта мультимедийный объект.
Пример html-кода, в котором используются вложенные теги <OBJECT>:
<!–Тег OBJECT для Internet Explorer –>
<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” width=”300″ height=”65″codebase=”http://www.apple.com/qtactivex/qtplugin.cab”>
<param name=”src” value=”track_1.mp3″>
<param name=”autoplay” value=”false”>
<!–Тег OBJECT для Opera, Chrome и Mozilla Firefox –>
<object data=”track_1.mp3″ autostart=”0″ type=”application/x-mplayer2″ width=”300″ height=”65″>
<param name=”autoplay” value=”false”>
</object>
</object>
Как только браузер, встречает тег OBJECT, он пытается отобразить объект, который в нем описан.
Если, описанный в первом теге OBJECT объект, не открывается, браузер переходит к следующему вложенному тегу OBJECT, в котором может быть другое описание объекта или альтернативный текст. И так далее.
В приведенном выше примере, первый тег OBJECT, описывает объект для InternetExplorer. Internet Explorer, отображает объект, описанный первым тегом OBJECT. Далее идут вложенные теги OBJECT, которые Internet Explorer пропускает.
Другие браузеры, не могут отобразить объект, описанный первым тегом OBJECT. Поэтому они переходят к обработке следующего тега OBJECT. В результате, каким бы браузером не просматривалась страница, объект, в нашем случае плеер, будет отображен на страницах сайта.
При переносе кода на хостинг, не забудьте правильно указать путь к аудио файлу, например, http://mysite.ru/audio/music.mp3
Следует помнить, что при добавлении плеера на сайт, существует проблема совместимости обработки HTML-кода различными браузерами.
Проблема совместимости значительно упрощается, если в HTML-коде плеера:
1 – Использовать параметры, поддерживаемые всеми браузерами.
2 – Использовать дополнительные скрипты.
3 – Использовать не плагин, а автономный плеер, который расположен прямо на хостинге.
Без комментариев.