Статьи

Аудио в HTML 5: состояние дел

Февраль 28, 2019

Браузеры с поддержкой HTML 5 поддерживают мультимедийные файлы как первоклассные граждане — HTML больше не является языком для описания документов, а скорее средой для создания приложений, которые могут использовать каждый бит встроенной функциональности для быстрой работы и не тяжелый вес для плечи разработчиков для сопровождения.

В этой статье мы рассмотрим все способы воспроизведения звука в современном браузере через HTML 5.

Элемент <audio>

<audio> — это новый тег, способный не только загружать звуковой файл и воспроизводить его, но также иметь ряд кнопок управления для воспроизведения, приостановки и приостановки воспроизведения. Конечно, есть много случаев, когда вам не понадобятся элементы управления, например, фоновая музыка в игре.

<audio> не сложнее, чем <img> : вы указываете обязательный атрибут src и другие параметры для настройки проигрывателя звука, где это необходимо.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio</title>
</head>
<body>
    <audio src="doorbell.ogg" controls preload="auto" autobuffer></audio>
    <audio src="doorbell.ogg" controls></audio>
</body>
</html>

Атрибуты, показанные в этом примере (и несколько других):

  • Средства управления : когда присутствует, отображает специфичный для браузера плеер для управления воспроизведением. Спецификация HTML 5 гласит, что с этими элементами управления пользователь должен иметь возможность «начать воспроизведение, приостановить воспроизведение, найти произвольную позицию в контенте (если контент поддерживает произвольный поиск), изменить громкость» и множество других функций, которые Я еще не видел, поддерживается.
  • Автовоспроизведение : при наличии сообщает браузеру, как только он сможет начать воспроизведение звукового файла.
  • loop : когда присутствует, указывает, что звуковой файл должен начаться снова, как только он закончится.
  • muted : при наличии устанавливает громкость на 0 по умолчанию.
  • preload : указывает политику для загрузки звукового файла. «none» соответствует отсутствию предварительной выборки, что минимизирует трафик; «metadata» предварительно выбирает только начало файла, чтобы прочитать метаданные, например, длительность песни. «Авто» разрешает браузеру предварительно выбирать весь файл.

Аудио объект

Очевидно, что сочетание HTML 5 и CSS 3 является
полным языком Тьюринга : однако, более практично кодировать поведение веб-приложения в JavaScript. Вот почему все, что вы можете сделать с элементом <audio>, также может быть выполнено программно с помощью объектов JavaScript Audio:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio</title>
    <script type="text/javascript">
        var doorBell = new Audio("doorbell.ogg");
        doorBell.play();
    </script>
</head>
<body>
</body>
</html>

Таким образом, с помощью JavaScript вы можете управлять звуковым элементом, вызывая серию методов, таких как play () и pause (), и настраивать свойства, такие как * volume *. Аудиообъекты реализуют интерфейс с именем HtmlMediaElement , где вы можете найти список всех методов, а также доступные для изменения и доступные для чтения свойства.

Например, doorBell.seekable.length — это диапазон, а doorBell.currentTime — присваиваемое свойство, позволяющее воспроизвести воспроизведение с определенной точки файла.

Форматы и поддержка

Настоящая проблема с HTML 5 Audio сейчас заключается в его поддержке в разных браузерах; не поддержка <audio> и аудио — что довольно согласованно — но для кодеков, чтобы воспроизводить все различные форматы, в которые может входить аудиофайл.

В этом вопросе в основном две стороны :

  • Firefox, Chrome и Opera, как обычно, дружат с открытым исходным кодом и открытыми форматами и первыми поддерживают Ogg Vorbis . Ogg — это открытый контейнер для аудио и видео файлов, а Vorbis — бесплатный кодек с потерями, такой как MP3, но без какого-либо патента на него.
  • Internet Explorer и Safari поддерживают MP3 .

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

Кстати, для экспериментов с <audio> придерживайтесь Chrome, Firefox и Opera. К счастью, ряд элементов <source> может быть встроен в элемент <audio> (или, соответственно, <video>) для обеспечения альтернативных форматов, перечисленных по типу MIME:

<source src="audio.ogg" type='audio/ogg; codecs=vorbis'>

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

35
Share: