Свого часу єдиним спосіб відтворення аудіо на сайті, було використання Flash. З приходом в наше життя HTML5. все значно спростилося, адже з'явився новий тег
за допомогою якого ви можете відтворювати і управляти аудіозаписом на своєму сайті.У даній статті, я хочу вас познайомити з даними тегом.
Як додати тег на сторінку
Приклад додавання аудіо, наведено нижче. Зверніть увагу на два атрибути, які я вказав. Перший, це атрибут src в якому вказується шлях до вашого аудіофайлу і другий, це autoplay за допомогою якого ми говоримо браузеру, що даний аудіозапис повинна відтворюватися автоматично, відразу ж після завантаження сторінки. Якщо ми взагалі не вказуємо атрибут autoplay. то запис може не відображатися до тих пір, поки ми не кликнемо по кнопці Play.
Відтворення аудіо в циклі
Якщо ви хочете, щоб ваша аудіозапис циклічно повторювалася, тобто після закінчення запису, вона знову відтворювалася, то в цьому випадку вкажіть атрибут loop.
Якщо ви не вкажіть атрибут loop. то запис один раз програється і зупинитися.
Відображення панелі управління аудіозаписом
Вище ми розглянули приклад з використанням атрибута autoplay. в цьому випадку наша запис автоматично починає відтворюватися без можливості керувати нею (тобто користувач не зможе поставити її на паузу і т.д.).
Якщо ж ви хочете, щоб на вашому сайті відображався якийсь аудіоплеєр, за допомогою якого користувач міг би клікнути на кнопку відтворити, або натиснути на кнопку пауза, а також змінити гучність записи, то в цьому випадку вкажіть атрибут controls.
У підсумку, на сторінці сайту буде виведена панель управління аудіозаписом, приклад якої ви можете бачити на зображенні нижче:
Які формати аудіозаписів використовувати?
тег підтримують більшість сучасних браузерів, але єдиний мінус полягає в тому, що різні браузери підтримують різний формат аудіозаписів. Наприклад, Chrome відтворює аудіо у форматі MP3. а Firefox даний формат не чути, замість нього він використовує аудіо в форматі OGG.
Виходом з даної проблеми є використання аудіозаписів в обох форматах (дивіться приклад нижче).
Тепер даний запис зможуть відтворити всі сучасні браузери.
кросбраузерність тега
Як я вже писав вище, тег підтримують всі сучасні браузери, а саме: Chrome. Firefox. Opera. Safari. Яндекс.браузер. InternetExplorer 9+.
Але зрозуміло є ряд застарілих браузерів, якими не підтримується тег і якими ще користується якийсь відсоток користувачів мережі Інтернет. Для цих браузерів ви можете написати наступне:
На цьому у нас все. Сподіваюся, ви розібралися з даними тегом.
