Zvočne datoteke v HTML5 lahko vključite podobno enostavno kot videoposnetke. HTML5 za to ponuja lasten element z imenom audio.
<audio src="song.mp3"> Vaš brskalnik ne podpira elementa audio. </audio>
Elementu audio se preko atributa src dodeli ime datoteke, ki jo želite predvajati. Vendar datoteka še ni predvajana. Za to so potrebni kontrolni elementi.
Če želite prikazati kontrolne elemente, elementu audio dodelite atribut controls.
<audio src="song.mp3" controls> Vaš brskalnik ne podpira elementa audio. </audio>
V brskalniku naj bi to izgledalo na naslednji način:
Brez controls bo element, vključen preko audio, neviden. Smiselno je izpuščanje tega atributa, če želite sami vstaviti kontrolne elemente preko JavaScripta.
Tudi uporaba elementa audio žal ni vedno brez težav mogoča. Za to so ponovno krivi brskalniki, ki podpirajo različne formate. Naslednja tabela vam prikazuje aktualni status v tej zadevi.
| Brskalnik | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | ne | da | da | ne | ne |
Safari | da | ne | da | da | da |
Chrome | da | da | ne | ne | ne |
Opera | ne | da | da | da | ne |
Kaj storiti? Element audio vam omogoča tudi določanje dodatnih elementov source. Tem elementom nato dodelite različne formate za posamezne brskalnike. Primer:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Atributu src dodelite ustrezne datoteke v različnih formatih za posamezne brskalnike.
Poleg controls obstajajo za element audio tudi drugi atributi. Eden izmed njih je autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Če je atribut nastavljen, se predvajanje zvočne datoteke začne avtomatsko, ko je datoteka naložena. Tega atributa običajno ne nastavljamo, saj bi morali obiskovalcem pustiti odločitev, kdaj naj se zvočna datoteka predvaja.
Poleg tega je zanimiv tudi atribut loop. Ta atribut poskrbi, da se datoteka predvaja v zanki.
Pri vključevanju videoposnetkov obstajata tudi za zvočne datoteke dva atributa type in media. Tukaj lahko določite ustrezne MIME tipe in kodeke. V HTML5 specifikaciji so navedeni naslednji tipični vnosi za atribut type:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Upoštevajte, da se lahko atributa uporabita le pri elementu source, ne pa tudi pri elementu audio.
Vključevanje Flasha in drugih
Flash filme je bilo mogoče v prejšnjih različicah HTML vključiti preko kombinacije elementov embed in object. Rezultirajoča - mimogrede zelo grda - sintaksa je izgledala na primer takole:
<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 klasičen način preko elementov object in embed, ki že dolgo obstaja v HTML.
Vendar pa "klasičen" tukaj ne pomeni, da je bila ta varianta preteklih let odobrena s strani W3C. V HTML 4 je bil kot bolj priljubljen element object, ki je bil tudi pravilno interpretiran s strani brskalnika Internet Explorer. Drugače pa je bilo pri Netscape Navigatorju, ki je uporabljal element embed. Ta različna interpretacija je zahtevala kombinacijo elementov object in embed.
HTML5 zdaj uradno ponuja obe elementi object in embed za vključevanje aktivnih vsebin.embed je kontejner, namenjen prikazu ne-HTML vsebin, ki niso pokrite z drugimi elementi kot so img, video, audio itd. Za prikaz vsebin se običajno uporabljajo vtičniki brskalnikov.
Z uporabo oznake embed je sedaj mogoče vključiti na primer Flash filme po standardu. Tu je primer, kako lahko to izgleda:
<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"
/>
Različne atribute je mogoče dodeliti elementu embed. Najpomembnejši med njimi je seveda spet atribut src. Preko tega se nato končno navede datoteko, ki jo želite vključiti. Preko atributa type je določen MIME tip.
V primeru Flash to je application/x-shockwave-flash. Če pa želite vključiti datoteko LaTeX, navedete application/x-latex. Širino in višino vključene datoteke urejata atributa width in height.
Obstajajo tudi drugi atributi, ki pa uradno ne spadajo v HTML5. Vendar omogočajo nadzor nad uporabljenim vstavkom. Tako je bilo v prejšnjem primeru prek dveh "Flash atributov" allowscriptaccess in allowfullscreen določeno, da sta možna dostop do skriptov in način celozaslonskega načina. Prav tako pa obstaja tudi atribut quality, ki omogoča določanje kakovosti Flash filma.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Element object
Element object je podoben kot embed kontejner za vsebino. Za razliko od embed pa element object pozna tri različna modela vsebine. Če brskalnik prepozna, da gre za neposredno prikazljivo grafiko, se obnaša tako, kot da gre za element img. Če je referenčni objekt spletna vsebina, se ta prikaže v okviru iFram-a. (Več o iFram-ih potem tudi v nadaljevanju tega seznama). Pri drugih vsebinah se object obnaša kot embed.
Slednji primer prikazuje vključitev Flash filma preko elementa 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 vašem brskalniku ni nameščen Flash vstavek.
</p>
</object>Najprej seveda nastane vprašanje, ali naj uporabimo object ali embed. Na prvi pogled se zdi, da sta si dva elementa skoraj enaka. In dejansko lahko element object vse, kar Element embed tudi lahko.
Za vključevanje vsebin - razen slik - bi morali ponavadi uporabiti element object. Ta element namreč omogoča dajanje alternativnih vsebin, ki se prikažejo, če vključen element ni mogoče naložiti.
