Html5 audio: HTML5 | Аудио и видео

07.01.2023 alexxlab

Содержание

HTML5 | Аудио и видео

116

Веб-программирование — HTML5 — Аудио и видео

Было время, когда Интернет использовался в основном для обмена данными научных исследований. Потом было время перемен, и в мгновение ока Интернет стал одним из двигателей новостной индустрии и торговли. Еще несколько мгновений, и вот мы уже здесь, с Интернетом, использующим новейшие сетевые технологии для доставки на дом по всему миру невероятнейших объемов видеоинформации самого разного содержимого от трансляций с марсохода в режиме реального времени до дешевой комедии.

Важность этого сдвига трудно переоценить. Проект, который в начале 2005 г. был на стадии «разве не было бы это замечательно», теперь реализовался в виде YouTube. Видеосюжеты продолжительностью в 3—4 минуты наводнили Интернет. И, как докладывает гигант сетевого оборудования и услуг Cisco, эта тенденция не замедляется, и, согласно оценкам этой компании, к 2014 г. ошеломляющие 90% всего интернет-трафика будет составлять видео.

Поразительно, это грандиозное изменение произошло несмотря на то, что HTML и браузеры не обладают встроенной поддержкой видео и даже аудио. Вместо этого они полагаются на подключаемые модули, такие как Flash, которые удовлетворяют надобности большинства пользователей в большинстве случаев. Но в этом HTML-видеопокрытии есть очевидные мертвые зоны, наподобие той, которую создал iPad компании Apple, не поддерживающий Flash.

Стандарт HTML5 пытается решить эти пробелы введением элементов <audio> и <video>, которых так не хватало в HTML все эти годы. Наконец, содержимое мультимедиа получило единообразную, стандартную поддержку, не требующую подключаемых модулей. Но не все в этой истории так гладко. Основные разработчики браузеров сцепились в битве аудио- и видеоформатов, которая намного грязнее, чем война форматов Blu-Ray и HD-DVD.

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

Основные сведения о воспроизведении видео в современных программах

Не прибегая к HTML5, видео в веб-страницу можно добавить двумя способами. Самый простой состоит в использовании элемента <embed>. Потом браузер создаст видеоокно под проигрыватель Windows Media Player, Apple QuickTime или какой-либо другой проигрыватель и разместит его на странице.

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

Второй подход заключается в использовании подключаемого модуля браузера, наподобие сравнительно недавнего новичка в этой области Silverlight корпорации Microsoft или старожила Flash от компании Adobe.

До недавнего времени использование модуля Flash полностью решало задачу поддержки видеосодержимого браузерами. Ведь видеоформат Flash работает всюду, где установлен модуль Flash, что в настоящее время составляет свыше 96% подключенных к Интернету компьютеров. Технология Flash также предоставляет почти неограниченный контроль над воспроизведением видео. Разработчик может, например, использовать готовый видеоплеер Flash сторонней фирмы или создать собственный и индивидуально оформить каждую кнопку управления.

Но подход с использованием Flash также не идеальный. Чтобы вставить видео Flash в веб-страницу, в нее нужно вставить определенный объем безобразной разметки, содержащей элементы <object> и <embed>. Кроме этого, видеофайлы для показа нужно закодировать в требуемый формат, а также может потребоваться приобрести дорогостоящий инструментарий Flash-разработки и научиться пользоваться им, что может потребовать серьезных усилий. Но хуже всего, это новая волна мобильных устройств компании Apple — iPhone и iPad. Эти устройства органически не воспринимают Flash и выводят пустую рамку в том месте страницы, где вставлено это видео.

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

Тем не менее, если вы сегодня просматриваете видео в Интернете (но не с помощью iPhone или iPad), то, скорее всего, это видео обернуто в мини-приложение Flash. Если вы не уверены, щелкните на видеоплеере правой кнопкой мыши. Если откроется меню с командой наподобие «О программе Adobe Flash Player», тогда вы наверняка имеете дело с вездесущим модулем Flash.

В 2010 г. сервис YouTube ввел в действие HTML-видеопроигрыватель на испытательной основе. Попробовать этот проигрыватель можно, посетив www.youtube.com/html5. Но во всех других случаях YouTube полагается исключительно на Flash.

Видео и аудио в HTML5

Поддержка видео и аудио HTML5 основана на простой идее. Точно так же, как с помощью элемента <img> в веб-страницу можно вставлять изображения, в нее должно быть возможным вставить звук посредством элемента <audio> и видео с помощью элемента <video>. Вполне логично, HTML5 позволяет вставлять оба эти типа мультимедиа.

К сожалению, некоторые аспекты воспроизведения мультимедиа находятся вне досягаемости новых аудио- и видеовозможностей HTML5. Для следующего содержимого и/или способов его воспроизведения нужно опять обращаться к Flash (по крайней мере, на данный момент):

Лицензированное содержимое. Видеофайлы HTML5 не используют никакой системы для защиты от копирования. По сути, народ может загружать HTML5-видео с такой же легкостью, как и изображения — просто щелкнув правой кнопкой мыши по видео и выбрав опцию Сохранить.
Потоковое аудио или видео. В HTML5 нет способа для передачи аудио или видео от одного компьютера к другому в потоковом режиме. Поэтому, разработчикам чат-программ, в которых посетители веб-страницы используют микрофон и/или веб-камеру, придется продолжать работать с Flash. Разработчики HTML5 экспериментируют с элементом
<device>, который может предоставить эту возможность, но в настоящее время решения с использованием только HTML5 нет ни для одного браузера.
Адаптивное потоковое видео. Для продвинутых веб-сайтов с большими объемами видеосодержимого, наподобие YouTube, требуется многоуровневое управление буферизацией и пересылкой видеопотока. Им нужно предоставлять видео в разных разрешениях, видеособытий реального времени, а также настраивать качество видео под пропускную возможность интернет-подключения пользователя. До тех пор пока HTML5 не сможет предоставлять эти возможности, видеообменные сайты могут добавить поддержку HTML5 только как опцию, но полностью переходить на него с Flash не будут.
Высококачественное аудио с низкой задержкой. Некоторые приложения требуют начинать воспроизведение аудио без задержки или проигрывать несколько аудиоклипов с идеальной синхронизацией. В качестве примеров таких приложений можно назвать виртуальный синтезатор, музыкальный визуализатор или игру реального времени с множеством накладывающихся звуковых эффектов. И в то время как разработчики браузеров усиленно работают над улучшением HTML5-аудиопроизводительности, оно еще не отвечает этим требованиям.
Динамическое создание или редактирование аудио. А если вам нужно не только воспроизводить записанное аудио, но также анализировать аудиоинформацию, модифицировать или создавать аудио — и все это в режиме реального времени? Новые стандарты, такие как Audio Data API, разрабатываемые под спонсорством Firefox, состязаются в добавлении возможностей этого типа к HTML5-аудио, но в настоящее время они еще не доступны.

Воспроизведение аудио с помощью элемента <audio>

В следующем коде приведен простейший пример использования элемента <audio>:

<p>Зацените новую песню <cite>Avicii - Wake Me Up</cite></p>
<audio src="mysong.  mp3" controls></audio>

Атрибут src содержит имя аудиофайла для воспроизведения, а атрибут controls указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением. Своим внешним видом эти элементы управления слегка отличаются от браузера к браузеру, но все они имеют одинаковое назначение: разрешают пользователю начинать и останавливать воспроизведение, переходить в другое место записи и регулировать громкость:

Элементы <audio> и <video> должны иметь как открывающий, так и закрывающий тег. Использование синтаксиса пустых элементов (например, <audio/>) не допускается.

Кроме атрибута controls элемент <audio> поддерживает еще три атрибута: preload, auotoplay и loop. Атрибут preload указывает браузеру способ загрузки аудиофайла. Значение auto этого атрибута указывает браузеру загружать аудиофайл полностью, чтобы он был доступен, когда пользователь нажмет кнопку воспроизведения. Конечно же, загрузка осуществляется в фоновом режиме, чтобы посетитель веб-страницы мог перемещаться по странице и просматривать ее, не дожидаясь завершения загрузки аудиофайла.

Атрибут preload может принимать еще два значения. Значение metadata указывает браузеру загрузить первую небольшую часть файла, достаточную, чтобы определить некоторые его основные характеристики (например, общий размер файла). Значение none указывает браузеру не загружать аудиофайл автоматически. Эти опции можно использовать для того, чтобы сэкономить пропускную способность подключения, например, если страница содержит большое число элементов <audio>, но ожидается, что пользователь будет проигрывать лишь некоторые из них:

<audio src="mysong.mp3" controls preload="metadata"></audio>

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

Если значение атрибута preload не установлено, то браузеры действуют по своему индивидуальному усмотрению. Большинство браузеров предполагает auto в качестве значения по умолчанию, но в Firefox это metadata. Кроме этого, важно помнить, что атрибут preload не является обязательным для выполнения правилом, а рекомендацией браузеру желаемого действия, которую он может игнорировать зависимости от других обстоятельств. А некоторые устаревшие браузеры вообще не обращают внимания на атрибут preload.

Если вставить в разметку несколько элементов <audio>, то браузер создаст отдельную полосу элементов управления воспроизведением для каждого из них. Посетитель веб-страницы может прослушивать аудио на одном из них или на всех сразу.

Атрибут autoplay указывает браузеру начать воспроизведение сразу же после завершения загрузки страницы:

<audio src="mysong.mp3" autoplay controls></audio>

Если этот атрибут не используется, пользователь должен нажать кнопку запуска, чтобы начать воспроизведение.

Элемент <audio> можно использовать для того, чтобы проигрывать фоновую музыку или обеспечить звуковые эффекты в игре с браузерным интерфейсом. Для этого из него нужно убрать атрибут controls и вставить атрибут autoplay (или же осуществлять воспроизведения посредством кода JavaScript). Но будьте осторожны в применении этого подхода и не забывайте, что для такой страницы все равно требуется какой-либо способ для прекращения воспроизведения.

Наконец, атрибут loop указывает браузеру повторять воспроизведение:

<audio src="mysong.mp3" controls loop></audio>

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

Воспроизведения видео с помощью элемента <video>

С элементом <audio> хорошо идет в паре элемент <video>. Он применяет такие же атрибуты src, controls, autoplay и loop. Пример использования этого элемента показан в следующем коде:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video.mp4" controls></video>

Как и в случае с элементом <audio>, атрибут controls указывает браузеру создать набор элементов управления воспроизведением. В большинстве браузеров эти элементы скрываются при щелчке где-нибудь в области страницы и отображаются опять при наведении курсора мыши на область видеоплеера:

Кроме общих с элементом <audio> атрибутов, элемент <video> имеет три своих собственных атрибута: height, width и poster.

Атрибуты height и width устанавливают высоту и ширину окна воспроизведения в пикселах, соответственно. Следующий код показывает пример создания область воспроизведения размером 600×400 пикселов:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video. mp4" controls></video>

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

Наконец, атрибут poster позволяет указать изображение, которое можно использоваться вместо видео:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video.mp4" controls poster="poster.jpg"></video>

Браузеры показывают это изображение в трех ситуациях: когда первый кадр видео еще не загрузился, атрибуту preload присвоено значение none или указанный видеофайл отсутствует.

Хотя на данном этапе мы рассмотрели всё, относящееся к аудио- и видеоразметке, эти возможности можно значительно расширить с помощью кода JavaScript. Но прежде чем мы углубимся в изучение элементов <audio> и <video>, нам нужно разобраться с проблемами поддержки аудио- и видеокодеков.

HTML5 Audio

❮ Предыдущая Следующая Глава ❯

HTML5 предоставляет стандарт для воспроизведения звуковых файлов.

HTML5 Audio является предметом спецификации HTML5, включая аудио вход, воспроизведение и синтез, а также речи в текст, в браузере.

Аудио в Интернете

Перед тем как HTML5, не было никакого стандарта для проигрывания аудио файлов на веб-странице.

Перед HTML5, аудио файлы могут быть воспроизведены только с плагином (like flash) .

HTML5 <audio> элемент определяет стандартный способ вставлять аудио на веб — странице.

Поддержка браузеров

Числа в таблице указать первую версию браузера , которая полностью поддерживает <audio> элемент.

Элемент
<audio>	4,0	9,0	3,5	4,0	10,5

HTML <audio> Элемент

Для воспроизведения звукового файла в формате HTML, используйте <audio> элемент:

пример

<audio controls>
<source src=»horse. ogg» type=»audio/ogg»>
<source src=»horse.mp3″ type=»audio/mpeg»>
Your browser does not support the audio element.
</audio>

Попробуй сам «

Элемент <аудио> представляет собой звук, или звуковой поток. Она обычно используется для воспроизведения одного звукового файла в веб-страницы, показывая GUI виджет с элементами управления воспроизведения / паузы / громкости.

Элемент <аудио> имеет следующие атрибуты:

глобальные атрибуты (Accesskey; класс; contenteditable; Контекстное; реж; перетаскиваемым; Dropzone, скрытый; ID; языки; проверка орфографии; стиль; TabIndex; название; перевод)

автозапуск = «автозапуск» или «» (пустая строка) или пустой Инструктирует User-Agent автоматически начать воспроизведение аудиопотока, как только он может сделать это без остановки.

преднагрузки = «нет» или «метаданные» или «Авто» или «» (пустая строка) или пустое Представляет подсказку к User-Agent о том, считаются ли стоит оптимистичной загрузка самого или его метаданные аудиопотока.

«Никто»: Подсказки к User-Agent, что пользователь не ожидаются, нужен аудиопоток, или что сведение к минимуму ненужного трафика желательно.

«Метаданные»: Подсказки к User-Agent, что пользователь не ожидается, нужно аудиопоток, но что извлечение его метаданные (продолжительность и так далее) желательно.

«Авто»: Подсказки к User-Agent, который оптимистически скачивании весь звуковой поток считается желательным.

управление = «управление» или «» (пустая строка) или пустая Инструктирует User-Agent, чтобы выставить пользовательский интерфейс для управления воспроизведением аудио потока.

цикл = «петля» или «» (пустая строка) или пустая Инструктирует User-Agent искать обратно в начало звукового потока при достижении конца. Медиагруппа = строка Инструктирует User-Agent связать несколько видео и / или аудио потоки вместе.

приглушен = «приглушенный» или «» (пустая строка) или пустой Представляет собой состояние по умолчанию аудиопотока, потенциально перекрывая предпочтения пользователя. SRC = непустой [URL] потенциально окружен пробелами URL-адрес для аудиопотока.

HTML Audio — Как это работает

В controls атрибутом добавляет элементы управления аудио, как воспроизведение, пауза, и объем.

Текст между <audio> и </audio> теги будут отображаться в браузерах , которые не поддерживают <audio> элемент.

Множественные <source> элементы можно связать с различными звуковыми файлами. Браузер будет использовать первый признанный формат.

HTML Audio — Поддержка браузеров

В настоящее время существует 3 Поддерживаемые форматы файлов для <audio> элемент: MP3, Wav, Ogg и:

браузер	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML Audio — Типы носителей

Формат файла	Тип носителя
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML Audio — методы, свойства и события

HTML5 определяет методы DOM, свойства и события для <audio> элемента.

Это позволяет загружать, играть, и приостановка воспроизведения аудиофайлов, а также длительность набора и объема.

Есть также DOM событие, которые могут уведомить вас, когда аудио начинает играть, пауза и т.д.

Для полной ссылки DOM, перейдите на наш HTML5 Audio / Video DOM Reference .

HTML5 Аудио Ключевые слова

Тег	Описание
<audio>	Определяет содержание звука
<source>	Определяет несколько ресурсов медиа для медиа — элементов, таких как <video> и <audio>

HTML Audio — Web Speech API

Веб-Speech API призван обеспечить альтернативный способ ввода для веб-приложений (без использования клавиатуры). С помощью этого API, разработчики могут дать веб-приложения возможности расшифровать голос в текст, от микрофона компьютера. Записанный звук передается к речевым серверов для транскрипции, после чего текст набирается за пользователем. Сам API-агностик базового осуществления распознавания речи и может поддерживать как сервер на основе, а также встроенные распознаватели. Группа HTML Speech Инкубатор предложила реализацию аудио-речевых технологий в браузерах в виде API, равномерный, кросс-платформенного. API содержит как: