Summary  
This chapter explains how to use the HTML <audio> element with nested <source> tags and attributes like controls, autoplay, and loop to embed audio files and provide fallback text.  

General domain of usage  
Multimedia websites

HTML дозволяє додавати аудіо безпосередньо на вебсторінку за допомогою тега `<audio>`.

## Вбудовування аудіо
Тег `<audio>` відображає аудіоплеєр у браузері.

### Корисні атрибути аудіо
- `controls`: відображає елементи керування (відтворення, пауза, гучність тощо);
- `autoplay`: автоматичний початок відтворення;
- `loop`: безперервне повторення аудіо
```html
<audio controls autoplay loop>
  
</audio>
```

## Додавання джерела аудіо
Тег `<source>` всередині `<audio>` вказує браузеру, де знаходиться аудіофайл і який у нього формат.
```html
<audio controls autoplay loop>
  <source src="audio-url.mp3" type="audio/mpeg" />
  <source src="audio-url.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>
```



- `<audio>` визначає плеєр та його поведінку;
- `<source>` надає URL-адреси та формати аудіофайлів;
- Текст для заміщення з'являється, якщо браузер не може відтворити аудіо.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkF1ZGlvPC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxhdWRpbyBjb250cm9scyBsb29wPgogICAgICA8c291cmNlCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzM5MmYyNGFjLTAxMjYtNGMzNC1hMjhhLWYyZjI2ZDEyMTk2Yi9zZWN0aW9uLTMvaW4tdGhlLWZvcmVzdC1hdWRpby1leGFtcGxlLm1wMyIKICAgICAgICB0eXBlPSJhdWRpby9tcGVnIgogICAgICAvPgogICAgICBZb3VyIGJyb3dzZXIgZG9lcyBub3Qgc3VwcG9ydCB0aGUgYXVkaW8gZWxlbWVudC4KICAgIDwvYXVkaW8+CiAgPC9ib2R5Pgo8L2h0bWw+

Поширені аудіоформати: MP3, Ogg, WAV. Використання декількох форматів підвищує сумісність із браузерами.

Примітка

Який тег використовується для вбудовування аудіоконтенту в HTML-документ?

Чому рекомендується надавати аудіо у декількох форматах?

Опанування основ HTML для створення структурованого та доступного веб-контенту. Вивчення структурування документів за допомогою тегів, елементів і атрибутів. Робота з текстом, списками, зображеннями, аудіо та відео для збагачення веб-сторінок. Створення таблиць для впорядкованих даних і форм для введення та взаємодії користувачів. Ознайомлення з семантичним HTML для підвищення доступності та побудови повноцінних, функціональних структур веб-сайтів з нуля.

Ознайомлення з вебом та HTML, включаючи значення тегів, елементів і атрибутів. Вивчення базової структури HTML-документа та короткої історії вебу.

Опанування основ HTML-розмітки з акцентом на спеціальне форматування тексту та списки, розуміння їхньої ролі у структуризації контенту в HTML-документі. Занурення в особливості структури HTML-документа з удосконаленням технік розмітки тексту.

Відкрийте можливості візуального та аудіоконтенту у веб-розробці, навчаючись безперешкодно інтегрувати зображення, відео та аудіоелементи в документи HTML. Досліджуйте особливості використання різних форматів медіа.

Ознайомлення з особливостями представлення даних і взаємодії з користувачем завдяки детальному розгляду таблиць і форм у HTML, включаючи структури таблиць, створення форм і елементи введення. Формування навичок реалізації елементів введення у формах і використання атрибутів для розширення функціональності.

Поглиблення знань з HTML шляхом вивчення семантичних елементів HTML для створення структурованого та доступного веб-контенту. Створення першого вебсайту з використанням нових знань для реалізації власних ідей.

Вбудовування Аудіофайлів у HTML

Вбудовування аудіо

Корисні атрибути аудіо

Додавання джерела аудіо

1. Який тег використовується для вбудовування аудіоконтенту в HTML-документ?

2. Чому рекомендується надавати аудіо у декількох форматах?