Статья является частью темы Как вставить аудио на сайт и описывает вариант, когда мы формируем весь HTML код САМИ и добавляем его напрямую в пост. Здесь представлен шаблон блока HTML кода для audio в котором вам останется только подставить свои пути к вашим звуковым файлам. Код проверен мною и работает во всех основных браузерах.
Я предпочитаю именно это вариант потому что:
- он прост и понятен;
- работает когда у клиента отключен js (помним, что наша цель донести контент до пользователя). Также не забывайте, что не все роботы исполняют js код, а поэтому они могут не увидеть ваш аудио контент если вы генерируете его код при помощи js;
- позволяет вставлять код прямо в текст статьи;
- позволяет самому модифицировать код (можно приукрасить вставку аудио);
- позволяет выполнить микроразметку вашего audio;
Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.
HTML5 шаблон:
<!-- HTML5 шаблон кода для вставки audio в статью -->
<div>
<h3>Заголовок audio</h3>
<object id="audioplayer_1" width="290" height="24" type="application/x-shockwave-flash" data="/audio/player.swf">
<param name="movie" value="/audio/player.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<param name="flashvars" value="playerid=audioplayer_1&soundfile=/audio/your_file.mp3&width=290">
<div>
<audio controls="controls" preload="none" style="height: 28px; width: 66%;">
<source src="/audio/your_file.ogg" type="audio/ogg">
<source src="/audio/your_file.mp3" type="audio/mpeg">
<p>HTML5 audio не поддерживается вашим браузером.</p>
<p><a href="/audio/your_file.mp3">Скачать audio</a></p>
</audio>
</div>
</object>
</div>
<!-- Конец HTML шаблона для вставки audio в статью -->
Если нужно вставить несколько плееров на страницу, то повтори этот блок кода ИЗМЕНИВ только:
- значение ID в теге и в параметре плеера, что бы ID был у каждой вставки кода свой;
- путь к файлу с audio. (путь к самому плееру будет везде одинаков)
Пояснения к коду:
1) атрибуты тега
- id="audioplayer_1" —желательно задавать, особенно если аудио-файлов будет несколько на странице, это id будет использовано как одни из параметров передаваемых flesh плееру (см.ниже);
- width="290" height="24" —ширина и высота в пикселях, задавать нужно обязательно!, можете оставить эти значения;
- type="application/x-shockwave-flash" —значение постоянно;
- data="/your_path/player.swf" —это путь к файлу flash плеера, может быть как абсолютный (как в примере) так и полный с http://...;
2) теги содержат имена параметров и их значения для object. Опишу только некоторые:
- value="transparent" —задают прозрачность окна плеера, можно оставить как есть;
- —важный параметр, в value которого задаются параметры которые будут переданы flash плееру. Здесь рассмотрим только обязательные параметры, все возможные смотри на сайте источнике . Параметры пишутся в одну строку без разрыва и объединяются через знак &
Обязательные параметры :
- soundfile—как путь к mp3 файлу, может быть абсолютным как в примере так и с http://. Файл может находится и на другом сайте, главное что бы он отдавался при обращении к нему. (см. статью о том как правильно подготовить звуковой файл для хостинга скоро);
- width=290—задать тоже значение что и в атрибутах тега. Параметр обязателен.
- playerid—указать значение атрибута id из тега , если вы задавали его.
3) Внутри тега вложен контейнер <div> с тегом HTML5 содержимое которого будет показываться в тех браузерах, которые не поддерживают flash, но поддерживают HTML5.
4)атрибуты тега —стандартны и описаны везде—детально можете почитать здесь ссылка
5)Атрибуты тега задают путь к mp3 файлу и тип файла. Т.к. браузеры читают каждый свой набор форматов, то что бы быть уверенным что мы угодим большинству браузеров обычно вставляют два и более тегов с путями к файлам разных форматов одного и того же audio. В основном для звука нужно указывать два формата mp3 - всегда (он у нас и flash плеером будет воспроизводиться), и дополнительный .ogg. В принципе достаточно и одного mp3, т.к. он воспроизводиться браузерами которые не поддерживают flash. Если будете использовать только одни файл то можете путь к нему поместить прямо в тег и не писать тег вообще.
6) В тегевложена фраза и ссылка на скачку файла для тех случаев если окажется что браузер не поддерживает и тег HTML5
7) Разработчики плеера также рекомендуют добавить в секцию web страницы audio-player.js файл, корректирующий работу плеера в разных браузерах и предоставляющий расширенный функционал по управлению им через js. Здесь решайте сами. Я не добавляю этот файл т.к. плеер и так нормально работает в основных браузерах, а управлять им при помощи js при таком варианте его добавления на страницу мне не нужно. Все параметры, которые передаются с помощью js плееру можно передать и здесь через значения в flashvars. К тому же этот js файл все же весит 29KB и плюс дополнительный запрос к серверу. Если же вы хотите управлять плеером из js и генерировать код посредством него, то смотрите мое описание второго варианта вставки плеера основанное на js.
Код для подключения js файла в секцию
<script type="text/javascript" src="path/to/audio-player.js"></script>
Итого у нас получается трехступенчатая система по донесению нашего звука пользователю - сначала мы пытаемся воспроизвести его через flash плеер, если неудача, то пытаемся чрез HTML5 , и если и здесь неудача, то предлагаем скачать файл.
Приведенный здесь шаблон универсален и вам не обязательно использовать только указанный . Вы можете выбрать любой другой, какой вам больше понравиться, для этого просто в шаблоне HTML кода, в теге подставе путь к своему плееру и подкорректируйте передачу параметров ему в соответствии с документацией. А в остальном шаблон кода останется неизменным.
Еще по теме:
Реализация video и audio в HTML5, шаблоны, schema.org микроразметка