Аудио файловете могат да бъдат вградени в HTML5 по същия начин като видеата. За целта HTML5 предлага собствен елемент audio.
<audio src="song.mp3"> Браузърът ви не поддържа аудио елемента. </audio>
Върху елемента audio се задава името на файла, който трябва да се възпроизведе, посредством атрибута src. Въпреки това, файлът не се възпроизвежда само по този начин. За целта са необходими контролни елементи.
За да покажете контролни елементи, на елемента audio се присвоява атрибута controls.
<audio src="song.mp3" controls> Браузърът ви не поддържа аудио елемента. </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>
Когато се установи атрибута, възпроизвеждането на аудио файла стартира автоматично, след като бъде зареден. Този атрибут обикновено не се задава, тъй като трябва да се остави на посетителите решението кога да се възпроизвежда аудио файла.
Интересен е още и атрибута loop. Този атрибут гарантира, че файла се възпроизвежда в петна.
Както при вграждането на видеа, за аудио файловете съществуват и двете атрибута type и media. Тук можете да посочите съответните MIME типове и кодеци. В HTML5 спецификацията се изброяват следните типични стойности за атрибута type:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Забележете, че двете атрибута могат да се използват само на source елементите, а не на елемента audio.
Вграждане на Flash & Co.
Флаш филмите можеха да бъдат вграждани в по-ранните версии на 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. Този елемент дава възможност да се посочат алтернативни съдържания, които да се показват, когато вграденият елемент не може да се зареди.
