Audio-bestanden kunnen op dezelfde manier als video's eenvoudig worden ingevoegd in HTML5. HTML5 biedt hiervoor een eigen element met audio.
<audio src="song.mp3"> Uw browser ondersteunt het audio-element niet. </audio>
Aan het audio-element wordt met het src-attribuut de naam van het bestand dat moet worden afgespeeld toegekend. Hiermee wordt het bestand echter nog niet afgespeeld. Hiervoor zijn bedieningselementen nodig.
Als u bedieningselementen wilt weergeven, kent u het controls-attribuut toe aan het audio-element.
<audio src="song.mp3" controls> Uw browser ondersteunt het audio-element niet. </audio>
In de browser zou dit er als volgt uit moeten zien:
Zonder controls is het element ingebed via audio niet zichtbaar. Het weglaten van het attribuut is zinvol als u aangepaste bedieningselementen met JavaScript wilt toevoegen.
De inzet van het audio-element is helaas ook niet probleemloos mogelijk. De browsers ondersteunen namelijk verschillende formaten. De volgende tabel geeft u de actuele stand van zaken hierover.
| Browser | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | nee | ja | ja | nee | nee |
Safari | ja | nee | ja | ja | ja |
Chrome | ja | ja | nee | nee | nee |
Opera | nee | ja | ja | ja | nee |
Dus wat te doen? Het audio-element biedt ook de mogelijkheid om extra source-elementen te definiëren. Aan deze elementen kent u vervolgens de verschillende formaten toe voor de verschillende browsers. Een voorbeeld:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Aan de src-attributen worden de respectievelijke bestanden toegewezen die vervolgens in de verschillende formaten beschikbaar zijn.
Naast controls zijn er voor het audio-element nog andere attributen beschikbaar. Een daarvan is autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Als het attribuut is ingesteld, begint de audioweergave automatisch zodra deze is geladen. Dit attribuut wordt meestal niet ingesteld, omdat bezoekers de beslissing wanneer een audiobestand wordt afgespeeld zelf moeten laten.
Ook interessant is het loop-attribuut. Dit attribuut zorgt ervoor dat het bestand in een lus wordt afgespeeld.
Net zoals bij het invoegen van video's zijn er ook voor audio-bestanden de twee attributen type en media. U kunt hier dus ook de overeenkomstige MIME-types en codecs aangeven. In de HTML5-specificatie worden de volgende typische vermeldingen voor het type-attribuut vermeld:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Merk op dat de twee attributen uitsluitend mogen worden gebruikt bij het source-element, niet bij het audio-element.
Flash & Co. invoegen
Flash-films konden in eerdere HTML-versies worden ingevoegd via een combinatie van embed en object. De resulterende - overigens zeer onaantrekkelijke - syntaxis zag er dan bijvoorbeeld als volgt uit:
<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>
Dit is de klassieke methode via de object- en embed-elementen, die al heel lang in HTML bestaat.
Maar "klassiek" betekent hier niet dat deze variant in het verleden werd goedgekeurd door het W3C. In HTML 4 werd het object-element aangemoedigd, omdat dit correct werd geïnterpreteerd door Internet Explorer. Dit gold niet voor Netscape Navigator, die het embed-element gebruikte. Deze verschillende interpretatie maakte de combinatie van object- en embed-element noodzakelijk.
HTML5 biedt nu de officiële elementen object en embed voor het invoegen van actieve inhoud.embed is een container bedoeld voor het weergeven van niet-HTML-inhoud die niet wordt gedekt door andere elementen zoals img, video, audio, enz. Om de ingesloten inhoud weer te geven, zijn normaal gesproken browser-plug-ins nodig.
Met embed kunnen bijvoorbeeld Flash-films op een standaardconforme manier worden ingesloten. Hier is een voorbeeld van hoe zoiets eruit kan zien:
<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"
/>
Verschillende attributen kunnen worden toegewezen aan het embed-element. Het belangrijkste attribuut is natuurlijk weer het src-attribuut. Dit dient namelijk om het bestand dat moet worden ingesloten uiteindelijk aan te geven. Met het type-attribuut wordt het MIME-type opgegeven.
In het geval van Flash is dit application/x-shockwave-flash. Als je daarentegen een LaTeX-bestand wilt insluiten, noteer je application/x-latex. De breedte en hoogte van het ingesloten bestand worden geregeld via width en height.
Er zijn overigens nog andere attributen, die echter niet officieel tot HTML5 behoren. Ze stellen echter wel de controle van de gebruikte plug-in mogelijk. Zo werd in het vorige voorbeeld met de twee "Flash-attributen" allowscriptaccess en allowfullscreen bepaald dat scripttoegang en schermvullende modus mogelijk zijn. Er is echter ook het quality-attribuut, waarmee de kwaliteit van de Flash-film kan worden bepaald.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Het object-element
Het object-element fungeert net als embed als container voor inhoud. In tegenstelling tot embed kent object echter drie verschillende inhoudsmodellen. Herkent de browser dat het om een rechtstreekse afbeelding gaat, dan gedraagt hij zich alsof het om een img-element gaat. Als het object waarnaar wordt verwezen webinhoud bevat, wordt dit binnen een iFrame getoond. (Meer over iFrames komt trouwens verderop in deze serie). Bij andere inhoud gedraagt object zich zoals embed.
Het volgende voorbeeld toont het insluiten van een Flash-film via het object-element.
<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>
In uw browser is geen Flash-plug-in aanwezig.
</p>
</object>Uiteraard is de vraag of men nu object of embed moet gebruiken. Op het eerste gezicht lijken de twee elementen bijna identiek te zijn. En inderdaad kan het object-element alles wat het embed-element ook kan.
Voor het insluiten van inhoud - behalve afbeeldingen - moet doorgaans teruggegrepen worden naar het object-element. Dit element maakt het namelijk mogelijk alternatieve inhouden aan te geven die worden weergegeven wanneer het ingesloten element niet kan worden geladen.
