Тег аудио: Атрибут autoplay | htmlbook.ru

Освоение HTML5 тега audio / Хабр

21 июл 2012 в 12:06

Время на прочтение 3 мин

185K

HTML *

Перевод

Автор оригинала: Jean-Baptiste Jung

С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука.

<audio src="sound.mp3" autoplay></audio>

<audio src="sound.mp3" autoplay loop></audio>

<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" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .
<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.  mp3" type="audio/mp3" >
  Ваш браузер не пожжерживает тег audio!
</audio>

<audio src="sound.mp3"></audio>
<div>
	<button>Воспроизведение</button>
	<button>Пауза</button>
	<button>Громкость +</button>
	<button>Громкость -</button>
</div> 

Теги:

• html5
• audio
• тег audio

Хабы:

• HTML

Всего голосов 51: ↑30 и ↓21 +9

Комментарии 19

Максим Ткачук @makzimko

Пользователь

Тег audio

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Ссылки Дальше ❯

Example

Play a sound:

<audio controls>
  <source src=»horse.ogg» type=»audio/ogg»>
  <source src=»horse.mp3″ type=»audio/mpeg»>
  Ваш браузер не поддерживает звуковой тег.
</audio>

Определение и использование

Тег <audio> определяет звук, например музыку или другие звуковые потоки.

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

Типы MIME для аудио форматов

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

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

Различия между HTML 4,01 и HTML5

Тег <audio> является новым в HTML5.

Советы и примечания

Совет: Любой текст внутри между <audio> и </audio> будет отображаться в обозревателях, не поддерживающих тег <audio>.

Атрибуты

Глобальные атрибуты

Тег <audio> также поддерживает Глобальные атрибуты в HTML.

Атрибуты события

Тег <audio> также поддерживает Атрибуты событий в HTML.

Похожие страницы

HTML DOM reference: HTML Audio/Video DOM Ссылки

Параметры CSS по умолчанию

Нет.

❮Назад Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Тег HTML b

❮ Назад Полный справочник HTML Далее ❯

Пример

Выделите текст жирным шрифтом (не помечая его как важный):

Это обычный текст — а это жирный текст.

Попробуйте Сделай сам »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег выделяет жирный текст без какой-либо дополнительной важности.

Советы и примечания

Примечание: Согласно спецификации HTML5, тег следует использовать в качестве ПОСЛЕДНЕГО средства, когда никакой другой тег не является более подходящим. Спецификация гласит, что заголовки должны обозначаться символом От

до

выделенный текст должен обозначаться с помощью Тег

, важный текст должен быть обозначен с тегом , а отмеченный/выделенный текст должен обозначаться с помощью тег <знак> .

Совет: Вы также можете использовать следующий CSS для выделения полужирного текста: «font-weight: полужирный;».

---

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

Элемент
	Да	Да	Да	Да	Да

---

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

---

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

---

---

Другие примеры

Пример

Используйте CSS, чтобы сделать текст полужирным:

Это обычный текст — и это полужирный text.

Попробуйте сами »

---

Связанные страницы

Учебник HTML: Форматирование текста HTML

Ссылка HTML DOM: Bold Object

---

Настройки CSS по умолчанию

9000 2 Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

Пример

b {

  font-weight: жирный шрифт;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 14 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Атрибут HTML audio preload

❮ Тег HTML

Пример

Автор считает, что звук НЕ ДОЛЖЕН загружаться при загрузке страницы:

Попробуйте сами »

---

Определение и использование

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

Атрибут preload позволяет автору дать подсказку браузеру о том, что, по его мнению, приведет к лучшему пользовательскому опыту. Этот атрибут в некоторых случаях можно игнорировать.

Примечание: Атрибут предварительной загрузки игнорируется, если автовоспроизведение присутствует.

---

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
предварительная нагрузка	4,0	9,0	4,0	4,0	11,5

---

Синтаксис

Значения атрибутов

Значение	Описание
авто	Автор считает, что браузер должен загрузить весь аудиофайл при загрузке страницы
метаданные	Автор считает, что браузер должен загружать только метаданные при загрузке страницы
нет	Автор считает, что браузер НЕ должен загружать аудиофайл при загрузке страницы

---

❮ Тег HTML

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера

Справочник по 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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.