Як використовувати елемент audio в html5

У цій статті ми розглянемо як вставляти аудіо елементи на сторінку.

HTML5 заповнює заповнює інтернет все більше і більше. HTML5 зроблений для того, щоб зробити легше життя для нас, розробників, завдяки своїм аудіо елементів. Цей елемент дозволяє вбудовувати аудіо файлів на веб-сторінки, а також управляти відтворенням звуку за допомогою javascript. Більш того, це не вимагає ніяких плагінів для роботи, і підтримується багатьма сучасними веб-браузерами.

Подивитися приклад

тег

Для того щоб вставити аудізапісь на сторінку необхідно в html написати наступне:

123

src="Music.mp3"gt;lt;/audiogt;

де src = "music.mp3" - це шлях до файлу з музикою.

кросбраузерності сумісність

тег

1234

src="Music.ogg"gt;src="Music.mp3"gt;lt;/audiogt;

автоматичне відтворення

Якщо ви хочете щоб звук відтворювався автоматично після завантаження сторінки, то необхідно використовувати атрибут autoplay:

1234

src="Music.mp3"gt;src="Music.ogg"gt;lt;/audiogt;

управління плеєром

Користувача може дратувати те, що звук відтворюється автоматично і його не можна зупинити. І, можливо, користувач піде з цієї сторінки. Щоб цього уникнути необхідно використовувати кнопки управління плеєром. Щоб вони з`явилися досить прописати атрибут controls:

1234

src="Music.mp3"gt;src="Music.ogg"gt;lt;/audiogt;

Відео: HTML5 Tutorial For Beginners - Part 7 - Video and Audio Elements

Тип файлу

Хорошим тоном є вказувати тип відтвореного аудіофайлу, якщо ви використовуєте їх кілька.

Відео: Learning about the HTML 5 Audio Element

1234

src="Music.mp3" type="Audio / mp3"gt;src="Music.ogg" type="Audio / ogg"gt;lt;/audiogt;

Заглушка для старих браузерів

Якщо браузер достатньо старий, то бажано виводити повідомлення що даний браузер не підтримує цю функцію:

12345

src="Music.mp3" type="Audio / mp3"gt;src="Music.ogg" type="Audio / ogg"gt; Вибачте, але ваш браузер не підтримує аудіо елементи.lt;/audiogt;

буфер файлу

Якщо файл досить великий, то правильно буде використовувати буфер, щоб він завантажився для подальшого відтворення. Для цього необхідно використовувати атрибут зі значенням preload = "auto":

1234

src="Music.mp3" type="Audio / mp3" preload="Auto"gt;src="Music.ogg" type="Audio / ogg" preload="Auto"gt;lt;/audiogt;

У HTML5 існує багато елементів, які полегшать життя веб-розробнику і їх необхідно використовувати для того щоб не відставати в розвитку інтернет-технологій, та й скоротити час на розробку.

Успіхів!