Материалы для WEB разработки на LAMP
HTML шаблон для вставки audio на страницу

Статья является частью темы Как вставить аудио на сайт  и описывает вариант, когда мы формируем весь 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 в теге object и в параметре playerid плеера, что бы ID был у каждой вставки кода свой;
  • путь к файлу с audio. (путь к самому плееру будет везде одинаков)

 

Пояснения к коду:


1) атрибуты тега <object>

  • id="audioplayer_1" —желательно задавать, особенно если аудио-файлов будет несколько на странице, это id будет использовано как одни из параметров передаваемых flesh плееру (см.ниже);
  • width="290" height="24" —ширина и высота в пикселях, задавать нужно обязательно!, можете оставить эти значения;
  • type="application/x-shockwave-flash" —значение постоянно;
  • data="/your_path/player.swf" —это путь к файлу flash плеера, может быть как абсолютный (как в примере) так и полный с http://...;

2) теги <param> содержат имена параметров и их значения для object. Опишу только некоторые:

  • name="wmode" value="transparent"  —задают прозрачность окна плеера, можно оставить как есть;
  • name="flashvars"  важный параметр, в value которого задаются параметры которые будут переданы flash плееру. Здесь рассмотрим только обязательные параметры, все возможные смотри на сайте источнике . Параметры пишутся в одну строку без разрыва и объединяются через знак &

Обязательные параметры flashvars:

  • soundfile—как путь к mp3 файлу, может быть абсолютным как в примере так и с http://. Файл может находится и на другом сайте, главное что бы он отдавался при обращении к нему. (см. статью о том как правильно подготовить звуковой файл для хостинга скоро);
  • width=290—задать тоже значение что и в атрибутах <object> тега. Параметр обязателен.
  • playerid—указать значение атрибута id из тега <object>, если вы задавали его.

3) Внутри тега <object> вложен контейнер <div> с тегом HTML5 <audio> содержимое которого будет показываться в тех браузерах, которые не поддерживают flash, но поддерживают HTML5.

4)атрибуты тега <audio>—стандартны и описаны везде—детально можете почитать здесь ссылка

5)Атрибуты <source> тега задают путь к mp3 файлу и тип файла. Т.к. браузеры читают каждый свой набор форматов, то что бы быть уверенным что мы угодим большинству браузеров обычно вставляют два и более тегов <source> с путями к файлам разных форматов одного и того же audio. В основном для звука нужно указывать два формата mp3 - всегда (он у нас и flash плеером будет воспроизводиться), и дополнительный .ogg. В принципе достаточно и одного mp3, т.к. он воспроизводиться браузерами которые не поддерживают flash. Если будете использовать только одни файл то можете путь к нему поместить прямо в тег <object>  и не писать тег <source> вообще.

6) В теге <audio> вложена фраза и ссылка на скачку файла для тех случаев если окажется что браузер не поддерживает и тег HTML5 <audio>

7) Разработчики плеера также рекомендуют добавить в секцию <head> web страницы audio-player.js файл, корректирующий работу плеера в разных браузерах и предоставляющий расширенный функционал по управлению им через js. Здесь решайте сами. Я не добавляю этот файл т.к. плеер и так нормально работает в основных браузерах, а управлять им при помощи js при таком варианте его добавления на страницу мне не нужно. Все параметры, которые передаются с помощью js плееру можно передать и здесь через значения в flashvars. К тому же этот js файл все же весит 29KB и плюс дополнительный запрос к серверу. Если же вы хотите управлять плеером из js и генерировать код посредством него, то смотрите мое описание второго варианта вставки плеера основанное на js.

Код для подключения js файла в секцию <head>

<script type="text/javascript" src="path/to/audio-player.js"></script>

Итого у нас получается трехступенчатая система по донесению нашего звука пользователю - сначала мы пытаемся воспроизвести его через flash плеер, если неудача, то пытаемся чрез HTML5 <audio>, и если и здесь неудача, то предлагаем скачать файл.

Приведенный здесь шаблон универсален и вам не обязательно использовать только указанный WordPress Audio Flash Player. Вы можете выбрать любой другой, какой вам больше понравиться, для этого просто в шаблоне HTML кода, в теге object подставе путь к своему плееру и подкорректируйте передачу параметров ему в соответствии с документацией. А в остальном шаблон кода останется неизменным.

Еще по теме:

Реализация video и audio в HTML5, шаблоны, schema.org микроразметка