Fașă audio le puteți încorpora în HTML5 la fel de ușor ca și videoclipurile. HTML5 pune la dispoziție un element propriu numit audio pentru acest lucru.
<audio src="song.mp3"> Browserul tău nu suportă elementul audio. </audio>
Elementului audio i se atribuie numele fișierului de redat prin atributul src. Cu toate acestea, fișierul nu este redat încă. Pentru aceasta, sunt necesare elemente de control.
Dacă doriți să afișați elementele de control, atribuiți elementului audio atributul controls.
<audio src="song.mp3" controls> Browserul tău nu suportă elementul audio. </audio>
În browser, ar trebui să arate astfel:
Dacă lipsește controls, elementul încorporat prin audio nu va fi vizibil. Este util să omiteți acest atribut când doriți să inserați elemente de control proprii prin JavaScript.
Folosirea elementului audio nu este însă fără probleme. Motivul este încă o dată reprezentat de browsere, care susțin formate diferite. Tabelul de mai jos vă oferă situația actuală în acest sens.
| Browser | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | nu | da | da | nu | nu |
Safari | da | nu | da | da | da |
Chrome | da | da | nu | nu | nu |
Opera | nu | da | da | da | nu |
Ce se poate face? Elementul audio vă oferă posibilitatea de a defini elemente source suplimentare. Aceste elemente vor primi, în schimb, formatele diferite pentru browserele respective. Un exemplu:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Celor de atributelor src li se atribuie fișierele respective, care apoi sunt disponibile în formatele diferite. În plus față de controls, elementului audio îi sunt disponibile și alte atribute. Unul dintre acestea este autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Dacă atributul este setat, redarea fișierului audio începe automat după ce acesta a fost încărcat. De obicei, acest atribut nu este setat, deoarece vizitatorilor li se ar trebui să li se permită să decidă când să redea un fișier audio.
De asemenea, atributul loop este interesant. Acest atribut face ca fișierul să fie redat într-o buclă.
Așa cum este și în cazul încorporării videoclipurilor, există și pentru fișierele audio cele două atribute type și media. Deci, puteți specifica aici tipurile MIME și codec-urile corespunzătoare. Specificate sunt în specificația HTML5 următoarele valori tipice pentru atributul type:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Ați grijă că cele două atribute trebuie folosite doar la nivelul elementului source, nu și la nivelul elementului audio.
Încorporarea Flash & Co.
Fișierele Flash puteau fi integrate în versiunile anterioare ale HTML printr-o combinație de embed și object. Sintaxa rezultată - de altfel foarte urâtă - arăta așa:
<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>
Acesta este modul clasic prin intermediul elementelor object și embed, care există deja de mult timp în HTML. 
Cu toate acestea, "clasic" nu înseamnă că această variantă a fost aprobată în trecut de către W3C. Pentru că în HTML 4, elementul object a fost favorizat, fiind interpretat corect și de Internet Explorer. În schimb, Netscape Navigator-ul a optat pentru elementul embed. Această interpretare diferită a făcut necesară combinarea elementelor object și embed.
HTML5 pune la dispoziție în mod oficial cele două elemente object și embed pentru încorporarea conținutului activ. embed este un container destinat afișării conținutului care nu este de tip HTML și care nu este acoperit de alte elemente precum img, video, audio etc. Pentru redarea conținutului încorporat, de obicei sunt necesare modulele browser-ului.
Prin embed se pot integra acum, de exemplu, filme Flash în conformitate cu standardele. Iată un exemplu despre cum ar putea arăta acest lucru:
<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"
/>
Elementului embed i se pot asigna diferite atribute. Cel mai important, desigur, este din nou atributul src. Deoarece prin acesta se specifică în final fișierul de integrat. Prin atributul type se indică tipul MIME.
Pentru Flash, acesta este application/x-shockwave-flash. Dacă doriți în schimb să integrați un fișier LaTeX, scrieți application/x-latex. Lățimea și înălțimea fișierului integrat sunt controlate prin width și height.
Mai există și alte atribute, care totuși nu fac oficial parte din HTML5. Ele permit totuși controlul plugin-ului utilizat. Astfel, în exemplul anterior, prin cele două "atribute Flash" allowscriptaccess și allowfullscreen s-a stabilit că accesul la script și modul ecran complet sunt posibile. Există de asemenea și atributul quality, prin care se poate determina calitatea filmului Flash.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Elementul object
Elementul object servește similar cu embed ca un container pentru conținut. Spre deosebire de embed, obiectul cunoaște totuși trei modele de conținut diferite. Dacă browserul recunoaște că este vorba despre o imagine ce poate fi afișată direct, se comportă ca și cum ar fi un element img. Dacă obiectul referit este un conținut web, acesta va fi afișat în cadrul unui iFrame. (Mai multe despre iFrames ulterior în acest material). În cazul altor conținuturi, object se comportă ca și embed.
Următorul exemplu arată integrarea unui film Flash folosind elementul 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>
În browserul dvs. nu există un plug-in Flash.
</p>
</object>Rămâne desigur întrebarea dacă ar trebui folosit object sau embed. La o primă vedere, cele două elemente par aproape identice. Și de fapt, elementul object poate face tot ceea ce poate și elementul embed.
Pentru integrarea de conținuturi – excepție făcând imaginile – de obicei ar trebui să se recurgă la elementul object. Acest element permite specificarea unor conținuturi alternative care vor fi afișate în cazul în care elementul integrat nu poate fi încărcat.
