Audio súbory môžete v HTML5 jednoducho vložiť podobne ako videá. Pre to HTML5 poskytuje vlastný element audio pomocou značky audio.
<audio src="song.mp3"> Váš prehliadač nepodporuje audio element. </audio>
Audio elementu sa priradí názov prehrávanej súboru pomocou atribútu src. Súbor však nie je prehrávaný len z tohto dôvodu. Na to sú potrebné ovládacie prvky.
Ak chcete zobraziť ovládacie prvky, priradíte audio elementu atribút controls.
<audio src="song.mp3" controls> Váš prehliadač nepodporuje audio element. </audio>
V prehliadači to bude vyzerať nasledovne:
Ak chýba `controls`, prvok vložený cez `audio` nie je viditeľný. Je vhodné vynechať tento atribút, ak chcete do webu vložiť vlastné ovládacie prvky cez JavaScript.
Bohužiaľ, použitie `audio` elementu nie je bezproblémové. Za to sú opäť zodpovedné prehliadače, ktoré podporujú rôzne formáty. Nasledujúca tabuľka poskytuje aktuálne informácie týkajúce sa toho.
| Prehliadač | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | nie | áno | áno | nie | nie |
Safari | áno | nie | áno | áno | áno |
Chrome | áno | áno | nie | nie | nie |
Opera | nie | áno | áno | áno | nie |
Čo teda robiť? Aj `audio` element vám umožňuje definovať ďalšie prvky `source`. Týmto prvkam potom priradíte rôzne formáty pre jednotlivé prehliadače. Ukážka:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Do `src` atribútov priradíte jednotlivé súbory, ktoré potom budú vo rôznych formátoch pre jednotlivé prehliadače.
Okrem `controls` existujú pre `audio` element ďalšie atribúty. Jeden z nich je `autoplay`.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Ak je atribút nastavený, prehrávanie zvukového súboru sa spustí automaticky po jeho načítaní. Tento atribút sa zvyčajne nenastavuje, pretože by ste mali návštevníkom nechať rozhodnutie, kedy chcú zvukový súbor prehrať.
Zaujímavý je tiež atribút `loop`. Tento atribút zabezpečí, že súbor bude prehrávaný v slučke.
Ako pri vkladaní videí aj pri audio súboroch existujú dva atribúty `type` a `media`. Môžete teda určiť príslušné MIME typy a kodeky. V špecifikácii HTML5 sú uvedené nasledujúce typické údaje pre atribút `type`:
• `type='audio/ogg; codecs=vorbis'`
• `type='audio/ogg; codecs=speex'`
• `type='audio/ogg; codecs=flac'`
Upozorňujeme, že tieto dva atribúty sa môžu použiť výhradne v elemente `source`, nie v `audio` elemente.
Flash & ďalšie vložiť
Flash filmy ste v minulých verziách HTML vkladali kombináciou `embed` a `object`. Následne vznikajúca – mimochodom veľmi nepekná – syntax vyzerala napríklad takto:
<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>
To je klasický spôsob použitia `object` a `embed`, ktorý v podobnej forme existuje v HTML už veľmi dlho.
V tom, že je to "klasické" však neznamená, že táto varianta bola minulosťou schválená W3C. V HTML 4 bol preferovaný `object` element, ktorý bol správne interpretovaný Internet Explorerom. Inak to bolo u Netscape Navigatora. Ten sa držal `embed` elementu. Toto odlišné interpretovanie vyžadovalo kombináciu `object` a `embed` elementov.
HTML5 teraz oficiálne poskytuje pre vloženie aktívnych obsahov oba elementy `object` a `embed`.
`embed` je kontajner určený pre zobrazenie ne-HTML obsahu, ktorý nie je pokrytý inými elementmi ako `img, video, audio` atď. Na zobrazenie vložených obsahov sa obvykle vyžadujú pluginy pre prehliadače.
Pomocou embed si teraz môžete napríklad štandardne vložiť Flash filmy. Tu je príklad toho, ako to môže vyzerať:
<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"
/>
Rôznym atribútom embed-elementu možno priradiť. Najdôležitejší je, samozrejme, opäť atribút src. Pretože cez neho sa nakoniec určuje súbor, ktorý sa má vložiť. Atribútom type sa udáva mime typ.
V prípade Flash platí application/x-shockwave-flash. Ak však chcete vložiť súbor LaTeX, zapíšte application/x-latex. Šírka a výška vloženého súboru sa riadená cez width a height.
Mimochodom, existujú aj ďalšie atribúty, ktoré však oficiálne nepatria k HTML5. Umožňujú však riadenie použitého doplnku. Takto bolo v predchádzajúcom príklade cez dva "Flash atribúty" allowscriptaccess a allowfullscreen stanovené, že je možný prístup k skriptom a režim celoobrazovkového prehrávania. Okrem toho je tu však aj atribút quality, cez ktorý sa určuje kvalita Flash filmu.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Prvok object
Prvok object slúži podobne ako embed ako kontajner pre obsah. Na rozdiel od embed však prvok object pozná tri rôzne modely obsahu. Ak prehliadač rozpozná, že ide o priamo zobraziteľný obrázok, správa sa tak, akoby išlo o prvok img. Ak je referencovaný objekt webový obsah, zobrazí sa v rámci iFrame. (Viac o iFrame potom v ďalšom priebehu tejto série). Pri iných obsahoch sa object správa ako embed.
Nasledujúci príklad ukazuje vloženie Flash filmu cez prvok 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>
Váš prehliadač nemá Flash plug-in.
</p>
</object>Nakoniec sa samozrejme stavia otázka, či by sa mal preferovať prvok object alebo prvok embed. Na prvý pohľad sa zdá, že tieto dva elementy sú takmer identické. Skutočne, prvek object vie všetko, čo vie aj prvek embed.
Pre vloženie obsahu - okrem obrázkov - by sa bežne malo uprednostňovať použitie prvku object. Tento prvok totiž umožňuje určiť alternatívne obsahy, ktoré sa zobrazia, ak vložený element nemožno načítať.
