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

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

Создадим html страницу, на которой осуществим задуманное.  И, для начала, давайте сделаем всё это на своём компьютере, а затем уже, разместим страницу с плеером на сайте.

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

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

Как видите, между тегами (body) и (/body) ничего нет, поэтому, если открыть этот html документ браузером, то страница окажется пустой.

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

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

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

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

Давайте откроем справочник html на странице, с описанием тега EMBED.  Мы видим, что данный тег используется для загрузки и отображения на страницах браузеров таких объектов, как видео файлы, flash ролики, звуковые файлы и других типов файла, которые браузер изначально не понимает.

В спецификации html четвертой версии, рекомендуется внедрять внешние объекты, используя тег OBJECT. Об этом теге, мы поговорим в следующе6м уроке, а сейчас, давайте рассмотрим работу тега 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 — ширина объекта

class — класс  тегов, используемых в CSS

dir — направление текста внутри элемента

id — имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей

lang — язык, на котором написан текст внутри htmlэлемента

style — используется для применения встроенных стилей CSS

tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).

title — выводит всплывающую подсказку при наведении курсора мыши на html-элемент.

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

Ну что же, теперь, давайте добавим на  нашу экспериментальную html страницу код, с  использованием тега EMBED, чтобы на странице появилась возможность  проигрывать наш звуковой файл:

Давайте подробно разберём, за что отвечает в данном коде каждый параметр.

Итак, тег EMBED, указывает, на то, что на страницу будет добавлен внешний объект. Путь к файлу объекта, указан в параметре src,  src="track_1.mp3"

Сразу отмечу, что когда  воспроизводимый файл будет размещён на сервере, то  лучше будет, если Вы  укажите к нему полный, абсолютный путь, например, https://www.site.ru/track_1.mp3

Сейчас мы экспериментируем на локальном компьютере, поэтомув выше приведённом примере, указано просто имя файла.

Далее, идет размер объекта, в данном случае, плеера.  Параметрами width="350" height="50" указаны ширина и высота плеера.

Параметр autostart="0" указывает на то, что по загрузке страницы, плеер будет остановлен.

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

Тип объекта указан в параметре – type.

В случае, если у браузера не будет установлен плагин для отображения этого объекта, то параметром (pluginspage) браузеру указано, где этот плагин можно взять:  pluginspage="https://www.macromedia.com/go/getflashplayer.

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

Давайте откроем наш экспериментальный файл index.html, браузером InternetExplorer, мы получим в окне браузера, примерно следующую картинку:

Красными стрелками я указал элементы управления плеером.

Теперь, посетитель сайта, кликая по элементам управления плеера, может прослушать аудио запись и управлять её воспроизведением.

Как видите, используя тег (EMBED), можно довольно легко добавить плеер на любую страницу сайта, причём, это код достаточно прост.

Ещё раз отмечу, что внешний вид плеера зависит от установленных в данный момент плагинов длябраузера. Если подходящего установленного плагина не окажется, то браузер выдаст окно с сообщением, что требуется установить необходимое  программное обеспечение.

Как видите, при использовании тега EMBED  звук на страницу сайта добавляется довольно просто. Плеер для страниц сайта,  добавляется несколькими всего строчками html  кода.

Теперь попробуйте открыть файл index.html другими браузерами. Обратите внимание, откроет ли браузер изображение плеера или предложит установить плагин.

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

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

Для этого, загружаем наш звуковой и html файл на хостинг. Не забудьте правильно указать полный путь к звуковому файлу. В моём случае, ссылка на звуковой файл выглядит следующим образом: https://Vash-site.ru/audio/track_1.mp3

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

Воспользовавшись плеером, ниже:

Вы можете запустить на прослушивание звуковой файл  track_1.mp3.

А вот как выглядит плеер, созданный тегом EMBED  на моем сайте https://my-1-site.ru  

Чтобы скачать mp3 файл, кликните правой кнопкой мышки на ссылку: track_1.mp3, и выберете "Сохранить ссылку как". 

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

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