Аудіо файли можна вбудовувати в HTML5 приблизно так само легко, як відео. HTML5 надає окремий елемент з audio для цього.
<audio src="song.mp3"> Ваш браузер не підтримує елемент audio. </audio>
До елементу audio через атрибут src призначається ім'я файлу, який потрібно відтворити. Але сам файл таким чином ще не відтворюється. Для цього потрібні елементи керування.
Щоб показати елементи керування, ви призначаєте елементу audio атрибут controls.
<audio src="song.mp3" controls> Ваш браузер не підтримує елемент audio. </audio>
У браузері це має виглядати наступним чином:
Якщо відсутній controls, то елемент, який вбудовується через audio, не буде видно. Це може бути корисно, якщо ви хочете додати власні елементи керування за допомогою JavaScript.
Також використання елементу audio не завжди можливо безперешкодно. Винні у цьому, знову ж таки, браузери, які підтримують різні формати. Наведена таблиця надасть вам актуальну інформацію з цього приводу.
| Браузер | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | ні | так | так | ні | ні |
Safari | так | ні | так | так | так |
Chrome | так | так | ні | ні | ні |
Opera | ні | так | так | так | ні |
Що ж робити? Елемент audio також надає можливість визначати додаткові елементи source. Цим елементам ви призначаєте різні формати для різних браузерів. Приклад:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
До атрибутів src призначаються відповідні файли в різних форматах. Крім controls для елементу audio існують інші атрибути. Один з них - autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Якщо цей атрибут встановлений, відтворення аудіофайлу розпочнеться автоматично після завантаження. Зазвичай цей атрибут не використовується, оскільки відвідувачам слід бути покладено на рішення, коли аудіофайл буде відтворено.
Tакож цікавим є атрибут loop. Цей атрибут забезпечує зациклене відтворення файлу.
Як і при вбудовуванні відео, є два атрибути type і media для аудіофайлів. Так само тут ви можете вказати відповідні MIME-типи і кодеки. В HTML5-специфікації перераховані наступні типові атрибути для type:
Вбудування Flash та ін.
Flash-фільми раніше вбудовувались в HTML за допомогою комбінації елементів embed та object. В результаті отримувалася - до речі, досить некрасива - синтаксис виглядала, наприклад, так:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
Це класичний спосіб через елементи object та embed, який в HTML існує вже дуже довго.
Проте тут "класичний" не означає, що цей варіант колись був схвалений W3C. Оскільки в HTML 4 віддавав перевагу елементу object, який доправильно інтерпретувався Internet Explorer. Але Netscape Navigator використовував елемент embed. Ця різниця в тлумаченні змусила використовувати комбінацію елементів object та embed.
HTML5 офіційно надає два елементи object та embed для вбудовування активного вмісту.embed - це контейнер, призначений для відображення не-HTML вмісту, який не покриваються іншими елементами, такими як img, video, audio та інші. Для відтворення вкладених вмісту, зазвичай потрібні додаткові плагіни браузера.
За допомогою embed тепер можна вбудовувати Flash-фільми в стандартному вигляді. Ось приклад того, як це може виглядати:
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>
Різним атрибутам можна надати до embed-елемента. Найважливішим, звісно ж, є знову ж таки атрибут src. Саме через це вказується файл, який слід вбудувати. Через атрибут type вказується MIME-тип.
У разі Flash це буде application/x-shockwave-flash. Якщо ви замість цього хочете вбудувати файл LaTeX, ви вказуєте application/x-latex. Ширину і висоту вбудованого файлу встановлюють за допомогою атрибутів width і height.
Насправді існують інші атрибути, які, однак, не є офіційною частиною HTML5. Вони дозволяють керувати використовуваним плагіном. Так, у попередньому прикладі через два "Flash-атрибути" allowscriptaccess та allowfullscreen було вказано, що доступ до скриптів та повноекранний режим можливі. Також є атрибут quality, через який можна визначити якість Flash-фільму.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Елемент object
Елемент object діє подібно до embed як контейнер для вмісту. Належно до embed, object знає проте три різні моделі вмісту. Якщо браузер визнає, що це є графікою, яку можна показати безпосередньо, він поводитиметься так, наче це img-елемент. Якщо об'єкт посилається на вміст веб-сторінки, цей вміст відображатиметься в межах iFrame. (До iFrames більше інформації, до речі, далі в цьому циклі статей). Щодо іншого вмісту, елемент object поводиться як embed.
Наступний приклад показує вбудування Flash-фільму через елемент object.
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
У вашому браузері відсутній Flash-плагін.
</p>
</object>Зрозуміло, що виникає питання, чи потрібно використовувати object чи embed. На перший погляд здається, що ці два елементи майже ідентичні. І насправді елемент object може все, що може і елемент embed.
Для вбудування вмісту - за винятком зображень - зазвичай слід використовувати елемент object. Цей елемент дозволяє вказувати альтернативний вміст, який відображатиметься, якщо вбудований елемент не може бути завантажений.
