З появою досить швидкого з'єднання з Інтернетом, Flash був єдиним інструментом для відтворення звуків на веб-сайтах. Але HTML5 докорінно змінить спосіб відтворення звуків до Інтернету. У цій статті я хочу докладно розповісти Вам про те, як використовувати тег на ваших веб-сайтах.

Використовуємо

Відтворення звуку у циклі

Відображення елементів керування

Різні формати файлів

Вказуємо MIME-тип файлів

Для старих браузерів

Буферизація файлів

• none- якщо ви не бажаєте використовувати буфер файлів;
• auto- якщо ви хочете, щоб браузер беферизував файл повністю;
• metadata- для завантаження лише службової інформації (тривалість звучання та інших.).

Керування відтворенням через JavaScript

Ось і все сьогодні.
Сподіваюся, що ця стаття допомогла Вам зрозуміти базові можливості HTML5 тега .

З появою досить швидкого з'єднання з Інтернетом, Flash був єдиним інструментом для відтворення звуків на веб-сайтах. Але HTML5 докорінно змінить спосіб відтворення звуків до Інтернету. У цій статті я хочу докладно розповісти Вам про те, як використовувати тег на ваших веб-сайтах.

Використовуємо

Відтворення звуку у циклі

Відображення елементів керування

Різні формати файлів

Вказуємо MIME-тип файлів

Для старих браузерів

Буферизація файлів

• none- якщо ви не бажаєте використовувати буфер файлів;
• auto- якщо ви хочете, щоб браузер беферизував файл повністю;
• metadata- для завантаження лише службової інформації (тривалість звучання та інших.).

Керування відтворенням через JavaScript

Ось і все сьогодні.
Сподіваюся, що ця стаття допомогла Вам зрозуміти базові можливості HTML5 тега .

Опис

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

Список кодеків, що підтримуються браузерами, обмежений і наведено в табл. 1.

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

Синтаксис

Атрибути

Закриваючий тег

Обов'язковий.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Олександр Клименков - Чотирнадцять

Результат прикладу браузері Operaпоказано на рис. 1.

Мал. 1. Відтворення аудіофайлу

Браузери

Управління відтворенням аудіо відрізняється між браузерами за своїм виглядом, але основні елементи збігаються. Це кнопка відтворення/паузи, довжина треку, минулий та сумарний час звучання, а також рівень гучності.

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

Формат аудіо файлу визначає структуру та особливості представлення звукових даних при зберіганні на носії (пристрій, що запам'ятовує). Для усунення надмірності аудіоданих, як правило, використовуються спеціальні аудіокодеки, завдяки яким виробляють стиснення аудіоданих. Сучасні браузери підтримують наступні 3 формати аудіо:

• Формат MP3- це кодек та контейнер одночасно. Він широко використовується повсюдно для розміщення музики, що скачується.
• Формат WAV– також кодек та контейнер одночасно.
• Контейнер Ogg + аудіо кодек Vorbis. Його зазвичай називають "Ogg Vorbis". Був розроблений спільнотою Xiph для того, щоб замінити запатентовані MP3, AAC і WMA.

MIME-типи для аудіо:

Підтримка браузерами

Атрибути

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

Елемент

У цьому прикладі ми:

Додали на сторінку аудіо-контент (тег

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

З приходом ринку технології FlashЦе завдання значно спростилося, так як Flash-плагін дозволяє вам вбудовувати будь-яку анімацію або звук у сторінку, і технологія підтримується більшістю браузерів. Але затребуваність Flash поступово зникає після виходу на ринок інноваційних девайсів від компанії Apple: iPhone і iPad. Як відомо, компанія Apple принципово не оснащує свої пристрої підтримкою Flash, А кількість користувачів продукції стрімко зростає.

Коротко тут невелика плутанина.

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

У нашій сьогоднішній статті ми розповімо вам про те, як можна вбудувати звуки за допомогою елемента audio. Ми також навчимося керувати процесом відтворення за допомогою javascript, а також спробуємо розповісти вам про підтримку технології серед браузерів.

HTML5-елемент Audio

Цей елемент дуже просто використовувати. У нашому сьогоднішньому прикладі ми будемо вбудовувати пісеньку Бінга Кросбі (Bing Crosby) White Christmas:

Тут не треба багато пояснювати. Приблизно як ви вставляєте зображення за допомогою тега img, так само ви можете вставити звук за допомогою тега audio.

Крос-браузерна підтримка

Наведений вище приклад навряд чи буде працювати у всіх браузерах. Тут справа стосується формату файлу.

Деякі браузери можуть відтворювати файли формату.mp3, але не можуть файли формату.ogg, а інші навпаки. Більшість браузерів вміють відтворювати файли формату.wav, але через його великий розмір, використання його як звук для веб-сайту недоречно.

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

Які формати підтримує ваш браузер? Визначте це у вигляді .

Як видно в таблиці, найбільш оптимальним варіантомДля реалізації буде підключення обох форматів файлів.
Для того, щоб зробити це, ви можете додати декілька елементів source елементу audio, і в них вказати шляхи до різних форматів. Браузер відтворюватиме перший файл, який він підтримує. Ось приклад:

Звичайно ж, це означає, що вам потрібно створити як MP3, так і OGG версію вашого звукового файлу(тут вам на допомогу приходить), але тільки так можна організувати крос-браузерну підтримку.

Ранні версії Internet Explorer(версії 7 та 8) взагалі не підтримують елемент audio. Тим не менш, далі в статті ми розглянемо, як обійти цю недугу.

Автоматичне відтворення звуку

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

Додаємо кнопки управління

Хоча автоматичне відтворення може бути корисним, у багатьох випадках воно набридає або зовсім недоречно. Тому ми можемо встановити додаткові кнопки керування елементів audioщоб користувач сам міг вирішувати:

Це додає горизонтальну панель з кнопкою паузи/відтворення, часовою шкалою з повзунком та регулятором гучності. Все приблизно так само, як ви можете бачити на плеєрі Youtube.

Важливо пам'ятати, що панель керування відрізнятиметься залежно від браузерів. Наприклад, у браузері на iPhone буде відсутній повзунок гучності, так як пристрій має окремі кнопки для управління рівнем звуку.

Зациклене відтворення

Додавання до елемента audio атрибута loop зробить так, що звук відтворюватиметься нескінченно.

Це може бути корисним для того, щоб включати фонову музику, або звукові ефектив іграх.

Ви також можете використовувати атрибут preload, який дасть браузеру дані про те, коли і де має бути завантажений певний звуковий файл.
Попереднє завантаження звукового файлу означає, що звук може бути відтворений відразу при натисканні користувачем кнопки play.

Для цього атрибуту є кілька значень:

« none» – браузер не повинен нав'язувати завантажений файл. Тобто. Якщо ви впевнені, що більшість користувачів не відтворюватимуть цей файл, використовуйте цей параметр. Або використовуйте його у випадку, коли вам потрібно зберегти якнайбільше пропускну здатністьсервера.

« metadata» – параметр схожий на none, за винятком того, що ви сповіщаєте браузер про можливість підвантаження метаданих, типу тривалості аудіо-доріжки, але не самого аудіо-файлу.

« auto» – Ви дозволяєте браузеру завантажувати сам аудіофайл.

Наприклад:

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

Керування відтворенням за допомогою javascript

Що зручно в елементах javascript- Це те, що ними простіше простого керувати за допомогою javascript. Аудіо-елемент пропонує безліч зручних параметрів та способів керування:

Play()– розпочати відтворення з поточної позиції;

Pause()- Зупинити відтворення на поточній позиції;

canPlayType(type)– визначити, чи підтримує браузер відтворення даного типумедіа;

duration- Тривалість доріжки в секундах;

currentTime– поточне положення за секунди. Ви також можете встановити даний параметрна переміщення положення відтворення.

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

Play Music
Pause Music
Stop Music
Переглянути демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Підтримка ранніх версій Internet Explorer

У більшості випадків браузер користувача підтримуватиме елемент HTML5. Але, на жаль, браузери IE версій 7 і навіть 8 не підтримують цей елемент (хоча 9-го вже є підтримка). Важливо продумати версію відкату для користувачів, які залишились у 2008 році.

Дуже сирий, але ефективний методполягає в тому, щоб застосувати спеціальні коментарі для виділення даних браузерів і задати їм об'єктний покажчик до звукового файлу. Таким чином, браузер найчастіше буде відображати вбудований контролер, що дозволяє користувачам відтворювати, зупиняти або перемотувати музику майже схожою на HTML5 audio манері. Ось приклад: