Audiofiler kan enkelt läggas till i HTML5 på samma sätt som videor. För detta tillhandahåller HTML5 ett eget element med namnet audio.
<audio src="song.mp3"> Din webbläsare stöder inte ljudelementet. </audio>
För att ljudfilen ska spelas måste attributet src tilldelas namnet på filen som ska spelas. Men filen spelas ännu inte automatiskt. För att göra det krävs kontrollfunktioner.
För att visa kontrollknappar, tilldelar du attributet controls till ljudelementet.
<audio src="song.mp3" controls> Din webbläsare stöder inte ljudelementet. </audio>
I webbläsaren bör det se ut så här:
Om controls saknas syns inte det inbäddade elementet via audio. Det är meningsfullt att undvika detta attribut om du vill lägga till dina egna kontrollfunktioner med Javascript.
Användningen av audio-elementet är tyvärr inte problemfri. Det är återigen webbläsarna som ställer till det genom att stödja olika format. Tabellen nedan ger er den aktuella situationen på detta område.
| Webbläsare | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | nein | ja | ja | nein | nein |
Safari | ja | nein | ja | ja | ja |
Chrome | ja | ja | nein | nein | nein |
Opera | nein | ja | ja | ja | nein |
Vad kan man göra? Även audio-elementet ger er möjligheten att definiera ytterligare source-element. Dessa element får sedan de olika formaten för de olika webbläsarna. Ett exempel:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
De olika filformaten tilldelas de respektive filerna genom src-attributen. Förutom controls har audio-elementet ytterligare attribut. Ett av dem är autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Om attributet sätts, startar uppspelningen automatiskt när ljudfilen har laddats. Detta attribut används normalt inte eftersom besökarna själva ska kunna välja när de vill spela upp en ljudfil.
Också intressant är loop-attributet. Detta attribut gör att filen spelas i en slinga.
Precis som med inbäddning av videoklipp finns det två attribut för ljudfiler, type och media. Ni kan därmed också ange de motsvarande MIME-typerna och codecarna här. I HTML5-specifikationen listas följande typiska angivelser för type-attributet:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
OBS! Dessa två attribut får endast användas med source-elementen och inte med audio-elementet.
Integrera Flash & Co.
Tidigare kunde flash-filmer integreras i äldre HTML-versioner genom en kombination av embed och object. Den resulterande – för övrigt mycket fula – syntaxen såg då ut som följande:
<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>
Detta är det klassiska sättet med object- och embed-elementen som har funnits i HTML under lång tid.
Men endast för att detta sätt är "klassiskt" betyder det inte att det här alternativet tidigare godkänts av W3C. Eftersom i HTML 4 favoriserades object-elementet som Internet Explorer tolkade korrekt. Annorlunda var det för Netscape Navigator som valde embed-elementet. Denna olika tolkning krävde en kombination av object- och embed-elementen.
HTML5 tillhandahåller nu officiellt de två elementen object och embed för att integrera aktiva innehåll.embed är en behållare avsedd för visning av icke-HTML-innehåll som inte täcks av andra element som img, video, audio osv. För att visa de inbäddade innehållen krävs vanligtvis webbläsar-tillägg.
Genom embed kan till exempel Flash-filmer nu integreras på ett standardkonformt sätt. Här är ett exempel på hur det kan se ut:
<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"
/>
För embed-elementet kan olika attribut tilldelas. Det viktigaste attributet är naturligtvis återigen src. Detta används för att ange filen som ska integreras. MIME-typen anges med attributet type. I fallet med Flash är detta application/x-shockwave-flash. Om du däremot vill integrera en LaTeX-fil, skriver du application/x-latex. Bredden och höjden på den integrerade filen regleras med width och height.
Det finns förresten ytterligare attribut som inte officiellt tillhör HTML5. Dessa tillåter dock kontroll av den använda tilläggskomponenten. I det föregående exemplet specificerades med de två "Flash-attributen" allowscriptaccess och allowfullscreen att skriptåtkomst och fullskärmsläge är möjliga. Likaså finns det även attributet quality, som låter dig bestämma kvaliteten på Flash-filmen.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Objektelementet object
Objektelementet fungerar liknande som embed som en behållare för innehåll. Till skillnad från embed har object dock tre olika innehållsmodeller. Om webbläsaren upptäcker att det är en direktvisningsbar grafik beter den sig som om det vore ett img-element. Om det refererade objektet är webbinnehåll visas detta inuti en iFrame. (Mer om iFrames kommer förresten senare i denna serie). För andra innehåll beter sig object som embed.
Följande exempel visar integreringen av en Flash-film med objektelementet.
<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>
Det finns ingen Flash-tillägg i din webbläsare.
</p>
</object>Slutligen uppstår naturligtvis frågan om man ska använda object eller embed. Vid första anblick verkar de båda elementen vara nästan identiska. Och faktiskt kan object-elementet göra allt som embed-elementet kan göra.
För innehållsintegrering – förutom bilder – bör normalt sett object-elementet användas. Detta element möjliggör nämligen att alternativt innehåll anges som visas om det integrerade elementet inte kan laddas.
