Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить елемент <audio>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`<audio>`** - це HTML-елемент, який відтворює звук (музику, подкасти, ефекти) прямо в браузері без плагінів, а джерело задається через `src` або кілька тегів `<source>` для різних форматів. **Ключове:** поведінка плеєра керується атрибутами `controls`, `autoplay`, `loop`, `muted` і `preload`, причому автозапуск зазвичай вимагає `muted`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<audio>` використовується для **відтворення звуку** на веб-сторінці: музики, подкастів, ефектів, дикторських записів тощо. Він працює аналогічно до `<video>`, але без відеопотоку: браузер створює **аудіоплеєр** із кнопками «відтворення / пауза», гучністю і таймером. --- ### 1. Найпростіший приклад ```html <audio src="music.mp3" controls></audio> ``` Що тут: - `src="music.mp3"`: шлях до аудіофайлу; - `controls`: відображає стандартну панель керування (плей, пауза, гучність). Результат: браузер вбудує **аудіоплеєр**, і користувач зможе слухати звук прямо на сторінці. --- ### 2. Рекомендований спосіб: через `<source>` Щоб підтримувати різні формати (MP3, OGG, WAV), можна вказати кілька `<source>`: браузер вибере підхожий: ```html <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <p>Ваш браузер не підтримує елемент audio.</p> </audio> ``` Якщо браузер не підтримує жодного формату, він покаже текст з `<p>`. --- ### 3. Основні атрибути `<audio>` | Атрибут | Призначення | Приклад | |---|---|---| | `src` | Шлях до аудіофайлу (якщо не використовуються `<source>`) | `src="sound.mp3"` | | `controls` | Показує панель керування | `controls` | | `autoplay` | Запускає аудіо автоматично під час завантаження сторінки *(зазвичай потребує* `muted`*)* | `autoplay` | | `loop` | Повторює відтворення по колу | `loop` | | `muted` | Вимикає звук типово | `muted` | | `preload` | Керує попереднім завантаженням (`none`, `metadata`, `auto`) | `preload="metadata"` | --- ### 4. Як працює `preload` | Значення | Поведінка | |---|---| | `none` | Аудіо не завантажується, поки користувач не натисне play | | `metadata` | Завантажується лише інформація (тривалість, назва, теги) | | `auto` | Аудіо може повністю завантажитися заздалегідь | Приклад: ```html <audio src="podcast.mp3" preload="metadata" controls></audio> ``` --- ### 5. Приклад з кількома атрибутами ```html <audio controls autoplay loop muted preload="auto"> <source src="track.mp3" type="audio/mpeg"> <source src="track.ogg" type="audio/ogg"> Ваш браузер не підтримує відтворення аудіо. </audio> ``` Поведінка: - почне грати автоматично, - без звуку (інакше браузери блокують автоплей), - повторюється по колу, - завантажується заздалегідь. --- ### 6. Підтримувані формати | Формат | MIME-тип | Підтримка | |---|---|---| | `.mp3` | `audio/mpeg` | Усі браузери | | `.ogg` | `audio/ogg` | Firefox, Chrome, Opera | | `.wav` | `audio/wav` | Усі сучасні браузери (великий розмір) | --- ### Підсумок: | Елемент | `<audio>` | |---|---| | Призначення | Відтворення звуку прямо в браузері | | Джерело | Через `src` або кілька `<source>` | | Основні атрибути | `controls`, `autoplay`, `loop`, `muted`, `preload` | | Переваги | Без плагінів, працює нативно в усіх браузерах | | Підтримувані формати | MP3, OGG, WAV | --- **Простими словами:** `<audio>` - це **вбудований плеєр для звуку**. Ти вказуєш файл через `src` або `<source>`, а браузер сам надає кнопки відтворення: без плагінів, без зовнішніх сервісів.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.