Как вставить аудио на сайт

Преимущества HTML5 Media

Автор
Андрей Болдырев

Андрей Болдырев

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

Универсальный способ вставки audio в web страницу на основе HTML5 и флеш плеера. Работает во всех браузерах (и мобильных), легко настраивается, имеет минимум кода. Может проигрывать несколько файлов, как play лист. Не тормозит загрузку страницы, соответствует стандартам, открытый код. Идеальный вариант для вставки mp3 и других аудио в статью. Есть реализация для WordPress в виде плагина.

 

Вот как это будет выглядеть:

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

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Замечание автора: Описанный в статье метод вставки видео прекрасно работает, однако он основан на использовании flash плеера, как проигрывателя аудио по умолчанию, что не является следованием актуальным тенденциям в вебе, где сейчас наблюдается сдвиг предпочтений в пользу использования js плееров. Но, на мой взгляд, решение должно быть как можно проще и без больших библиотек и множества кода, а js плееры, пока еще, оставляют желать лучшего в этом отношении.

Как то мне нужно было для себя решить задачу - как добавить в пост свою голосовую заметку. Нужен был очень простой способ с небольшим количеством кода, который я мог бы сохранять вместе с основным текстом статьи. Также я планировал в дальнейшем оформить это в виде плагина к CKEditor, который использую как редактор текста в своих CMS. Просмотрев разные источники и протестировав их я сформировал оптимальное, на мой взгляд, решение, которое и описано здесь.

Подход использует две технологии для проигрывания аудио файла и имеет три уровня "отказоустойчивости":

  1. Первая, будет основной - это флеш плеер. Мною выбран был свободный WordPress Audio Player, который будет воспроизводить звук в тех браузерах, которые поддерживают flash плеер. Причина выбора мною в этом подходе flash, как основного плеера для аудио, в том, что он будет отображаться одинаково в разных браузерах в отличие от HTML5 плеера, вид которого, пока, оставляет желать лучшего. А подключать для воспроизведения аудио JS библиотеку управления HTML5 плеером мне кажется не совсем целесообразным, так как, такие JS плееры все же громоздки и не так идеальны, как хотелось бы. Для Воспроизведения видео файлов, безусловно, нужно использовать, как первичный, JS HTML5 плеер. Вообще, в идеале, хотелось бы обходиться для воспроизведения аудио и видео без использования дополнительных плееров (flash или JS), а использовать только возможности браузера.;
  2. Вторая - HTML5 тег <audio> - будет резервной для случаев, когда flash не поддерживается. В основном, это MAC и iГаджеты, но у них HTML5 плеер уже достаточно хорошо реализован в браузерах.
  3. Третий, резервный вариант, будет ссылка на скачку, когда первые две не сработают. Это вариант на крайний случай, так как сейчас уже все браузеры поддерживают HTML5 тег audio.

Нам понадобится скачать zip с файлами flash плеера и js к нему (ссылка на официальный сайт ).

Нам нужны только два файла из всего скачанного архива:

  • player.swf           —это сам flash player, который будет проигрывать mp3 файлы.
  • audio-player.js   — это js, который добавит функциональности по управлению плеером и устраняет неправильности его работы в разных браузерах.

Файлы из этого архива нужно разместить на сайте. Кстати js можете сжать.
В этой статье договоримся, что примеры будут использовать директорию "/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 подставьте путь к своему плееру и подкорректируйте передачу параметров ему в соответствии с документацией. А в остальном шаблон кода останется неизменным.