Статья является частью темы Как вставить аудио на сайт и описывает вариант, когда мы формируем весь 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) В теге
вложена фраза и ссылка на скачку файла для тех случаев если окажется что браузер не поддерживает и тег HTML57) Разработчики плеера также рекомендуют добавить в секцию audio-player.js файл, корректирующий работу плеера в разных браузерах и предоставляющий расширенный функционал по управлению им через js. Здесь решайте сами. Я не добавляю этот файл т.к. плеер и так нормально работает в основных браузерах, а управлять им при помощи js при таком варианте его добавления на страницу мне не нужно. Все параметры, которые передаются с помощью js плееру можно передать и здесь через значения в flashvars. К тому же этот js файл все же весит 29KB и плюс дополнительный запрос к серверу. Если же вы хотите управлять плеером из js и генерировать код посредством него, то смотрите мое описание второго варианта вставки плеера основанное на js.
web страницыКод для подключения js файла в секцию
<script type="text/javascript" src="path/to/audio-player.js"></script>
Итого у нас получается трехступенчатая система по донесению нашего звука пользователю - сначала мы пытаемся воспроизвести его через flash плеер, если неудача, то пытаемся чрез HTML5
, и если и здесь неудача, то предлагаем скачать файл.Приведенный здесь шаблон универсален и вам не обязательно использовать только указанный
. Вы можете выбрать любой другой, какой вам больше понравиться, для этого просто в шаблоне HTML кода, в теге подставе путь к своему плееру и подкорректируйте передачу параметров ему в соответствии с документацией. А в остальном шаблон кода останется неизменным.Еще по теме:
Реализация video и audio в HTML5, шаблоны, schema.org микроразметка