Вставка аудіозаписів на html-сторінку

У п'ятій версії HTML була офіційно додана можливість розміщувати аудіозаписи за допомогою елемента 'audio', який формується парним тегом <audio> і відображається браузером, як рядковий елемент. Абсолютний або відносний шлях до файлу вказується в атрибуті src. Елемент 'audio' не просто додає аудіозапис на веб-сторінку, але також дозволяє відтворювати і управляти нею. Для цього використовуються атрибути (дійсні і для відеозаписів):

  • preload - служить для завантаження аудіофайлу під час завантаження сторінки, приймає три значення:
    • "None" - аудіофайл не завантажується (використовується за умовчанням),
    • "Auto" - браузер сам може приймати рішення про попередню завантаження файлу, при цьому аудіофайл може бути завантажений повністю під час завантаження сторінки,
    • "Metadata" - завантажувати тільки службову інформацію, наприклад, тривалість запису;
  • autoplay - запис починає програватися відразу ж після завантаження сторінки, при цьому атрибут скасовує дію атрибута preload; атрибут за замовчуванням виключений і значень не приймає, тобто є логічним;
  • loop - зациклює аудіозапис, змушуючи програватися її знову після завершення; атрибут за замовчуванням виключений і значень так само;
  • muted - аудіозапис після завантаження запускається з відключеним звуком, тобто користувач повинен буде сам встановити бажаний рівень гучності; атрибут за замовчуванням виключений і значень так само;
  • controls - додає стандартну панель управління, вид якої залежить від браузера; зазвичай це стандартні кнопки відтворення, паузи, перемотування і т.д .; атрибут за замовчуванням виключений і значень не приймає.

Елемент 'audio' є контейнером для порожніх елементів 'source', які формуються одиночними тегами <source> і служать для вказівки шляху до аудіофайлів за допомогою свого атрибуту src. Справа в тому, що різні браузери підтримують різні формати аудіо, тому аудіофайл, зазначений в атрибуті src елемента 'audio', необов'язково буде відтворюватися даними браузером. Щоб вийти з такої ситуації, потрібно вказувати шлях до файлів через елементи 'source'. Зазвичай вказується кілька таких елементів всередині контейнера 'audio', які вказують відразу на кілька аудіофайлів різних форматів, але містять одну і ту ж аудіозапис. Якщо браузер не підтримує формат аудіофайлу, шлях до якого вказано в атрибуті src першого елемента 'source', він переходить до другого елементу 'source' і намагається відтворити його аудіофайл і т.д. Зрозуміло, що не завжди є відразу кілька однакових аудіозаписів, але зберігаються в різних форматах. Однак ця проблема легко вирішується за допомогою спеціальних програм для конвертації файлів з одного формату в інший, серед яких, до речі, є цілком прийнятні безкоштовні аналоги.

Крім атрибута src елемент source 'має ще два атрибути: media, аналогічно елементам' link 'і' style '( дивитися ), І type, який приймає значення в форматі: type = "MIME-тип; codecs = 'кодек'".

Розглянемо приклад 5.1 додавання аудіофайлу на веб-сторінку (для перегляду прикладу в браузері використовуйте значок 'Планета').

<! DOCTYPE html> <html> <head> <! - Незабутній задавати службові елементи -> <meta charset = "utf-8"> <base href = "http://belarusweb.net/"> <title> аудіозаписи </ title> </ head> <body> <! - Чи не видно на сторінці і не програється -> <p> <audio src = "belarusweb_files / video / Саймон.mp4"> </ audio> & ndash; перший запис, хоч я знаю і не програється, тому що <br> атрибут autoplay відсутня. </ P> <! - Контрольна панель присутня, відтворить тільки звук -> <p> <audio src = "belarusweb_files / video / Саймон.mp4" controls autoplay> </ audio> & ndash; другий запис буде програватися відразу ж після завантаження, <br> тому присутній атрибут autoplay. При цьому, тому що ми використовуємо <br> елемент audio ', то програється тільки звукова доріжка відеофайлу. <br> Щоб відтворити весь відеоролик, необхідно використовувати <br> елемент video', який ми розглянемо в наступному пункті параграфа. </ P> <! - відтворить звук другого 'source' -> <p> <audio controls loop> <source src = "belarusweb_files / video / Саймон.ogg"> <source src = "belarusweb_files / video / Саймон. mp4 "> </ audio> & ndash; третя запис має контрольну панель, але відразу програватися <br> не буде. Зате після запуску вона буде програватися по колу. </ P> </ body> </ html>

Приклад 5.1. Використання елемента 'audio'

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

Що стосується зовнішнього вигляду контрольної панелі програвача, то він може відрізнятися від браузера до браузеру, однак основний набір кнопок (наприклад, відтворення / пауза і рівень гучності) буде прісутстовать у всіх браузерах.

Дополнительная информация

rss
Карта