Освоение HTML5 тега audio / Хабр
makzimkoВремя на прочтение 3 мин
Количество просмотров185K
HTML *
Перевод
Автор оригинала: Jean-Baptiste Jung
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука.
<audio src="sound.mp3" autoplay></audio>
Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.<audio src="sound.mp3" autoplay loop></audio>
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут
controls.<audio src="sound.mp3" controls></audio>
Тег
поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого.
Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут
type.<audio controls> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" > </audio>
А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег
? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound. mp3" type="audio/mp3" >
Ваш браузер не пожжерживает тег audio!
</audio>
При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload. Он может принимать 3 значения:- none - если вы не хотите использовать буфер файлов;
- auto - если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).
Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером: <audio src="sound.mp3"></audio>
<div>
<button>Воспроизведение</button>
<button>Пауза</button>
<button>Громкость +</button>
<button>Громкость -</button>
</div>
mp3" type="audio/mp3" >
Ваш браузер не пожжерживает тег audio!
</audio>
Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
Теги:
- html5
- audio
- тег audio
Хабы:
- HTML
Всего голосов 51: ↑30 и ↓21 +9
Комментарии 19
Максим Ткачук @makzimko
Пользователь
Комментарии Комментарии 19
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 содержит как:
- Речевой Input API
- Текст Speech API
❮ Предыдущая Следующая Глава ❯
Аудиотег HTML
❮ Назад Полный справочник HTML Далее ❯
Пример
Воспроизведение звукового файла:
<управление звуком>
Ваш браузер не поддерживает тег audio.
Попробуйте сами »
Определение и использование
Тег используется для встраивания звука
содержимое документа, например музыку или другие аудиопотоки.
Тег содержит один или несколько <источник> тега
с разными источниками звука.
Браузер выберет первый источник
поддерживает.
Текст между и теги будут отображаться только в браузерах, которые не поддерживают элемент .
HTML поддерживает три аудиоформата: MP3, WAV и OGG.
Поддержка аудиоформата и браузера
| Браузер | MP3 | WAV | ОГГ |
|---|---|---|---|
| Край/IE | ДА | ДА* | ДА* |
| Хром | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Сафари | ДА | ДА | НЕТ |
| Опера | ДА | ДА | ДА |
*От Edge 79
Советы и примечания
Совет: Видеофайлы смотрите на Тег <видео> .
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <аудио> | 4,0 | 9,0 | 3,5 | 4,0 | 11,5 |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| автовоспроизведение | автовоспроизведение | Указывает, что звук начнет воспроизводиться, как только он будет готов. |
| органы управления | элементы управления | Указывает, что должны отображаться элементы управления звуком (например, кнопка воспроизведения/паузы и т. д.) |
| петля | петля | Указывает, что звук будет начинаться заново после каждого его завершения. |
| приглушенный | приглушенный | Указывает, что аудиовыход должен быть отключен. |
| предварительная нагрузка | авто метаданные нет | Указывает, как, по мнению автора, аудио должно загружаться при загрузке страницы |
| источник | URL-адрес | Указывает URL аудиофайла |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Связанные страницы
Ссылка HTML DOM: HTML Audio/Video DOM Reference
Настройки CSS по умолчанию
Нет.
❮ Предыдущий Полный справочник HTML Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Как встроить аудио в HTML5
Рекламные объявления
В этом уроке вы узнаете, как вставлять аудио в документ HTML.
Встраивание аудио в HTML-документ
Раньше вставка аудио на веб-страницу была непроста, поскольку в веб-браузерах не было единого стандарта для определения встроенных медиафайлов, таких как аудио.
В этой главе мы продемонстрируем некоторые из многих способов встраивания звука на вашу веб-страницу, от использования простой ссылки до использования новейшего HTML5 <аудио> элемент.
Использование элемента HTML5 audio
Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания звука в веб-страницы. Тем не менее, элемент audio является относительно новым, но он работает в большинстве современных веб-браузеров.
В следующем примере аудио просто вставляется в документ HTML5 с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .
Пример
Попробуйте этот код »Аудио, использующее набор элементов управления браузера по умолчанию, с альтернативными источниками.
Пример
Попробуйте этот код »Трек «ogg» в приведенном выше примере работает в Firefox, Opera и Chrome, в то время как тот же трек в формате «mp3» добавляется, чтобы звук работал в Internet Explorer и Safari.
Связывание аудиофайлов
Вы можете создавать ссылки на свои аудиофайлы и воспроизводить их, отмечая их.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Пример
Попробуйте этот код »Дорожка 1 Дорожка 2
Использование элемента object
Элемент используется для встраивания различных типов мультимедийных файлов в документ HTML. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как аудио, видео, PDF-файлы, Flash-анимация или даже изображения.
Следующий пример кода встраивает простой аудиофайл в веб-страницу.
Пример
Попробуйте этот код » Предупреждение: Элемент широко не поддерживается и во многом зависит от типа внедряемого объекта. Другие методы, такие как элемент HTML5 или сторонние аудиоплееры HTML5, во многих случаях могут быть лучшим выбором.