Skip links en inhoudsopgave

Navigatie site

Geluid afspelen met behulp van het <audio>-element - uitleg

Laatst aangepast: .

Deels geopend uitklapmenu in smal en breed venster

Korte omschrijving

Geluid afspelen zonder plug-in of JavaScript met behulp van het <audio>-element.

BELANGRIJK

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreekt bijvoorbeeld de navigatie voor de site. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n <h1> uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

Als je deze handleiding graag uitprint (zonde van het bos), gebruik dan de pdf in de download. Deze pagina is niet geoptimaliseerd voor printen, de pdf kan wel makkelijk worden geprint.

Alles op deze site kan vrij worden gebruikt, met drie beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
Naar site van War Child Nederland

Achterliggend idee

Tot niet zo heel lang geleden kon een browser alleen geluid afspelen, als daarvoor een plug-in werd gebruikt, bijvoorbeeld Flash. Met behulp van het <audio>-element uit html5 kan de browser dit nu zelf.

De speler is alleen te zien, als in de html aan het <audio>-element het attribuut 'controls' wordt toegevoegd. Laat je dit weg, dan is <audio> volledig onzichtbaar en kan de speler alleen worden bediend met behulp van JavaScript.

Naast 'controls' bestaat nog een aantal andere attributen, waarmee de speler kan worden aangestuurd. Niet al deze attributen lijken even zinvol, tenzij je de speler aanstuurt met JavaScript. Als je bijvoorbeeld het attribuut 'muted' (gedempt) toevoegt aan <audio>, kun je het geluid afspelen, zonder dat je iets hoort. Wat mij betreft zou dat in winkelcentra en bij een aantal politici een zegen zijn, maar op je site wil je waarschijnlijk liever geen onhoorbaar geluid.

Het attribuut 'autoplay' laat het geluid direct bij het laden van de pagina afspelen, zonder dat de bezoeker het afspelen hoeft te starten. Steeds meer browsers blokkeren dit. En terecht. Het zonder toestemming afspelen van geluid (en video met geluid) is gewoon ronduit onbeschoft en kan uiterst storend zijn.

Alle attributen worden verder beschreven bij Het <audio>-element.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

De tekst in dit hoofdstukje is een algemene tekst, die voor elke pagina geldt. Eventueel specifiek voor dit voorbeeld geldende problemen en eventuele aanpassingen om die problemen te voorkomen staan bij Bekende problemen (en oplossingen).

Toegankelijkheid (in het Engels 'accessibility') is belangrijk voor bijvoorbeeld blinden die een schermlezer gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 23 april 2019.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Alle eventuele problemen, ook die met betrekking tot zoomen, lettergroottes, toegankelijkheid, uitstaan van JavaScript en/of css, enzovoort staan iets hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

Windows 7 (1280 x 1024 px, resolution 96 dpi):
Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.

OS X 10.11.6 ('El Capitan') (1680 x 1050 px, resolution: 96: dpi, device-pixel-ratio: 1):
Firefox, Safari, Opera en Google Chrome, in grotere en kleinere browservensters.

Linux (Kubuntu 18.04 LTS, 'Bionic Beaver') (2560 x 1080 px, resolution: 96 dpi):
Firefox, Opera en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 96 dpi):
Bureaublad-versie: Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.
Startscherm-versie: Internet Explorer 11.

Windows 10 (1600 x 900 px, resolution: 96 dpi):
Firefox, UC Browser, Google Chrome, Opera, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 9.3.5 (1024 x768 px, device-pixel-ratio: 1):
Safari, Chrome for iOS, UC Browser, Firefox (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

iPad met iOS 12.2 (2048 x 1536 px, device-pixel-ratio: 2 ('retina'):
Safari, Chrome for iOS, Firefox, Microsoft Edge (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

Android 4.4.2 ('Kitkat') (1280 x 800 px, resolution: 96 dpi):
UC Browser, Firefox en Chrome (alle portret en landschap).

Android 4.4.2 ('Kitkat') (2560 x 1600 px, resolution: 192 dpi):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).

Android 6.0 ('Marshmallow') (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 8.1.0 ('Oreo') (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Smartphones

Windows 10 Mobile (1280 x 720 px, resolution: 192 dpi):
Edge en UC browser (portret en landschap).

Android 4.1.2 ('Jelly Bean') (800 x 480 px, resolution: 144 dpi):
Chrome, UC Browser, Firefox en Opera for Android (alle portret en landschap).

Android 8.1.0 ('Oreo') (1280 x 720 px, resolution: 192 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter zijn ook getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan 200%.

Er is getest met behulp van muis en toetsenbord, behalve op iOS, Android en Windows 10 Mobile, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met touchscreen, touchpad, toetsenbord, muis, en – waar dat zinvol was – op een combinatie daarvan.

Als JavaScript is gebruikt, is op de desktop ook getest zonder JavaScript. Op iOS, Android en Windows 10 Mobile is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge. Ook in Edge is niet getest zonder JavaScript, omdat Microsoft het onmogelijk heeft gemaakt dit uit te zetten. Ten slotte is getest zonder css en – als afbeeldingen worden gebruikt – zonder afbeeldingen.

Schermlezers en dergelijke.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack, VoiceOver, ChromeVox en Verteller.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE. is een browser die gericht is op mensen met een handicap. Er is getest op Windows7. (LET OP: kies voor 'Install WebbIE 4 Web Browser Now'. Dat is – op het moment van schrijven – de een na bovenste knop. Als je voor de bovenste download kiest, krijg je 'n hele berg hulpprogramma's erbij, waar je voor het testen niets aan hebt.)

NVDA is een schermlezer, zoals die door blinden wordt gebruikt. Er is getest op Windows 7 en Windows 10 in combinatie met Firefox.

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome op Android 4.4,2, 6.0, 7.0 en 8.1.0.

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS (9.3.5 en 12.1.3) en OS X 10.11.6.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux 14.04.

Verteller (Narrator) is een in Windows 10 ingebouwde schermlezer. Er is getest in combinatie met Edge.

(Voor de bovenstaande programma's zijn links naar sites met uitleg en dergelijke te vinden op de pagina met links onder Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke.)

Als het voorbeeld in deze programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde.

Eventuele problemen in schermlezers (en eventuele aanpassingen om die te voorkomen) staan iets hieronder bij Bekende problemen (en oplossingen).

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. Er is een kans dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je soms (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Samsung Internet op Android werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar geen beginnen aan.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen (en oplossingen) vermeld.

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn. Anders is er 'n redelijke kans dat je tegen 'n bug zit te vechten, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag! Dat kan op het forum.)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Bij toegankelijkheid is er vaak geen goed onderscheid te maken tussen oplossing en probleem. Zonder (heel simpele) aanpassingen heb je vaak 'n probleem, en omgekeerd. Daarom staan wat betreft toegankelijkheid aanpassingen en problemen hier bij elkaar in dit hoofdstukje.

Voor zover van toepassing wordt eerst het ontbreken van JavaScript, css en/of afbeeldingen besproken. Vervolgens problemen en aanpassingen met betrekking tot toegankelijkheid voor specifieke groepen bezoekers, zoals zoomen en andere lettergrootte, Tab-toets, tekstbrowsers en schermlezers. Als laatste volgen algemene problemen in alle of in specifieke browsers.

Als in een onderdeel één of meer problemen worden besproken, staat in een breed rood kadertje een korte samenvatting daarvan. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. In dat geval staat in een smal groen kadertje 'Geen problemen'.

Zonder JavaScript

Probleem: zonder JavaScript werkt de speler niet in Safari.

Niet in iOS en niet op de desktop. In de andere geteste browsers op iOS kan JavaScript niet worden uitgezet, dus dit speelt alleen in Safari.

Mensen die JavaScript hebben uitstaan, zullen dit vaker tegenkomen en al weten, dus een echt probleem is het niet.

Zonder css

Geen problemen.

De speler werkt gewoon. Alleen staat alles niet meer netjes gecentreerd en zo.

Gebruikers Tab-toets

Geen problemen.

Er is geen enkele invloed op de volgorde van de Tab-toetsen of zoiets.

Tekstbrowsers

Probleem: geluid wordt niet afgespeeld.

Eh, tja, dat is nou juist de bedoeling van een tekstbrowser: dat je alleen tekst ziet, en geen afbeeldingen, video's, of wat dan ook.

Lynx geeft netjes de tekst weer, die bedoeld is voor als de browser het niet kan afspelen, WebbIE niet. Beide browsers geven de mogelijkheid de geluidsbestanden te downloaden.

Schermlezers

Geen problemen.

In alle geteste schermlezers kan de speler met het toetsenbord worden bediend.

Zoomen en lettergroottes

Geen problemen.

Android browser en Dolphin op Android, UC browser op sommige versies van Android, Opera Mini op iOS 12.2

Probleem: de speler werkt niet.

In deze browsers kan het geluid niet worden afgespeeld, omdat de speler dat stomweg vertikt.

Dolphin kan de bestanden in geen enkele van de geteste versies van Android afspelen. Wel geeft de speler de mogelijkheid de bestanden te downloaden, waarna je ze alsnog kunt afspelen.

In Android browser kan het af te spelen bestand ook niet worden gedownload. Omdat deze browser na Android 4.3 niet meer wordt geleverd, is dit probleem snel aan het uitsterven.

UC browser werkt in alle geteste versies van Android, behalve in de tablet met Android 4.4.2 met gewone resolutie (1280 x 800 px).

Opera Mini op iOS 12.2 doet gewoon helemaal niets. Op iOS 9.3.5 werkt het gewoon, net als op Android, dus het gaat hier waarschijnlijk om een of andere bug, die hopelijk snel wordt gerepareerd.

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

Nieuw opgenomen.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

*Je gebruikt het materiaal uit deze download volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte ode en dergelijke zitten. Voor eventuele schade die door gebruik van materiaal uit deze download ontstaat, in welke vorm dan ok, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

*Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit oorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te ermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie s te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

En link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

afbeelding-126-dl.html: de pagina met het voorbeeld.

afbeelding-126.pdf: deze uitleg (aangepast aan de inhoud van de download).

afbeelding-126-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

126-css-dl:

afbeelding-126-dl.css: stylesheet voor afbeelding-126-dl.html.

126-files-dl:

'Amazing Grace' van Jason Shaw in ogg- en mp3-formaat.

De muziek is afkomstig van afkomstig van audionautix.com en wordt verspreid onder de Creative Commons-licentie Attribution 3.0 Unported (CC BY 3.0), die is te vinden op creativecommons.org/licenses/by/3.0/deed.en_US.

HTML

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

In de html hieronder wordt alleen de html besproken, waarover iets meer is te vertellen. Een <h1> bijvoorbeeld wordt in de regel niet genoemd, omdat daarover weinig interessants valt te melden. (Als bijvoorbeeld het uiterlijk van de <h1> wordt aangepast met behulp van css, staat dat verderop bij de bespreking van de css.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

<!DOCTYPE html>

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan zonder enig probleem worden gebruikt: het werkt zelfs in Internet Explorer 6.

<html lang="nl">

De toevoeging lang="nl" bij <html> geeft aan dat de pagina in het Nederlands is. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code, dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de <head>, omdat hij anders door sommige browsers niet wordt gelezen.

In html5 hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in grootte. En dat is een probleem. Sites waren, in ieder geval tot enkele jaren geleden, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enzovoort, maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. In dit voorbeeld bijvoorbeeld wordt de speler nooit breder dan het venster.

Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook deze pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

Het <audio>-element

<audio controls preload="metadata"> <source src="126-files-dl/AmazingGrace.ogg" type="audio/ogg"> <source src="126-files-dl/AmazingGrace.mp3" type="audio/mpeg"> Je browser ondersteunt het afspelen van geluid niet. Je kunt hieronder nog wel de muziek downloaden. </audio>

Het <audio>-element is onderdeel van html5. In dit voorbeeld worden slechts twee attributen gebruikt.

Deze site beperkt zich grotendeels tot html en css, maar <audio> kan ook met JavaScript worden aangestuurd. Als je op internet zoekt naar iets als 'custom audio element', vind je tal van handleidingen.

Hieronder staat een korte omschrijving van de onderdelen, verderop staat de uitgebreide beschrijving van alle onderdelen.

<audio> en </audio>: begin- en eindtag. In de begintag staan enkele attributen die aangeven, hoe het element zich moet gedragen. Er zijn meer attributen, die worden verderop besproken.

<source>: binnen elke <source> staat een geluidsbestand. Zodra de browser een bestand vindt dat kan worden afgespeeld, wordt niet verder gekeken naar volgende <source>'s. Bij dit vinden helpt het opgegeven MIME-formaat (type) van het geluidsbestand.

Tekst onderaan: als een browser <audio> niet ondersteunt, wordt deze tekst getoond.

<audio controls preload="metadata">

<audio>: gewoon de openingstag. Helemaal achteraan, na een aantal elementen dat binnen <audio> zit, wordt het element afgesloten met </audio>.

controls: geeft aan dat knoppen moeten worden weergegeven, waarmee de speler is te bedienen. De maker van de browser heeft voor deze knoppen gezorgd, dus ze verschillen behoorlijk per browser.

Als je controls weglaat, worden de bedieningsknoppen niet getoond. Anders dan bij <video> zie je nu helemaal niets meer en kan de speler niet worden bediend, ook niet als je het scherm aanraakt of rechtsklikt om een contextueel menu te openen.

Het weglaten van controls heeft alleen maar zin, als je de video via JavaScript wilt laten afspelen, of via JavaScript eigen knoppen wilt laten weergeven.

preload="metadata": dit regelt of het geluidsbestand al wordt gedownload, voordat het wordt afgespeeld, of dat pas wordt gedownload, als wordt afgespeeld. Dit is niet meer dan een hint voor de browser, de browser kan afwijken van wat hier wordt opgegeven.

Als preload niet wordt gebruikt, downloaden sommige browsers het volledige geluidsbestand direct, als de pagina wordt geopend.

Mogelijke waarden:

none: in eerste instantie niets downloaden, maar wachten tot wordt afgespeeld.

metadata: alleen metagegevens zoals tijdsduur, artiest, en dergelijke ophalen. Dit wordt in het voorbeeld gebruikt. Pas als het geluid daadwerkelijk wordt afgespeeld, wordt het volledige bestand gedownload.

auto: bestand gelijk downloaden, al voordat wordt gekozen voor afspelen. Als je niets invult bij preload, is dit de standaardwaarde.

autoplay: wordt niet gebruikt in dit voorbeeld. Zorgt ervoor dat het geluid automatisch begint af te spelen. Heel fijn als je toevallig in een gehorig huis woont naast een beroepsbokser met 'n kort lontje. Vooral als je vaak 's nachts surft en het om een opname gaat van het voltallige Nederlandse elftal, dat luidkeels het Wilhelmus zingt. Na de revolutie komt hier drie maanden zonnepanelen aanbrengen op een verlaten olieplatform op te staan.

Serieus: dit is een prima manier om bezoekers weg te jagen. Laat mensen zelf kiezen of ze wel of niet je geluid willen afspelen. Het wordt nog extra sadistisch als je controls weglaat, want dan ontbreekt in de meeste browsers de mogelijkheid om het geluid uit te zetten.

crossorigin: wordt niet gebruikt in dit voorbeeld.

Een pagina kan normaal genomen zonder problemen van een andere plek op internet opvragen. Het opgevraagde bestand wordt alleen weergegeven, verder kan er weinig mee worden gedaan.

Als je echter met JavaScript een bestand van elders opvraagt, ligt dat anders. Daarom kan een script normaal genomen uit veiligheidsoverwegingen geen bestanden van buiten de eigen site opvragen. Zou dat niet zo zijn, dan zou je hele leuke dingen met de bankrekening van Bill Gates kunnen doen. (Die Gates zelf mogelijk iets minder leuk vindt.)

Met dit attribuut kun je aangeven dat een script een bestand toch van elders moet ophalen, en op wat voor manier dat moet gebeuren. De server waar het vandaan komt, moet dat uiteraard nog wel goed vinden. Voor het eigenlijke ophalen heb je JavaScript nodig.

Als je op internet zoekt naar 'crosorigin cors' vind je tal van tutorials.

loop: wordt niet gebruikt in dit voorbeeld. Als het geluidsbestand is uitgespeeld, wordt weer van voren af aan begonnen.

muted: wordt niet gebruikt in dit voorbeeld. Zet het geluid uit. Je kunt nu dus het geluidsbestand afspelen, zonder dat je dat hoort.

Eerlijk gezegd is schrijver dezes niet helemaal duidelijk, wat hiervan het nut zou zijn. Ik bedoel: als je 'n geluidsbestand afspeelt, wil je het toch horen? Bij <video> heeft het 'n duidelijke functie: 'n filmpje afspelen zonder geluid.

Maar mogelijk mis ik iets en is het bijvoorbeeld wel nuttig, als <audio> met behulp van JavaScript wordt aangestuurd of zoiets.

src: hierin komt de url van het af te spelen geluidsbestand. Dit wordt alleen gebruikt, als er maar één bestand is opgegeven. Zodra er – zoals hier in dit voorbeeld – meerdere geluidsbestanden zijn, waaruit de browser moet kiezen, komt elk bestand in een aparte <source> te staan binnen <audio>.

Als het wel wordt gebruikt ziet dit er zo uit:

<video src="buurman-doucht.ogg">

<source src="126-files-dl/AmazingGrace.ogg" type="audio/ogg">

Binnen <audio> kunnen meerdere <source>'s staan. Elke <source> verwijst naar een bepaald geluidsbestand. De browser bekijkt van boven naar beneden alle <source>'s, tot een bestand wordt gevonden dat kan worden afgespeeld. Zodra dat het geval is, worden lagere <source>'s niet meer bekeken.

<source: gewoon de opening van de tag. De tag wordt aan het eind van de regel afgesloten met een >.

src="(...)": de url van het af te spelen geluidsbestand. Hier is dat 126-files-dl/AmazingGrace.ogg.

type="(...)": om het MIME-type van de video op te geven. Hier is dat audio/ogg: een geluidsbestand in een container van de soort ogg.

Als geen MIME-type wordt opgegeven, moet de browser van elk geluidsbestand een klein stukje downloaden om te kijken, of het bestand kan worden afgespeeld, net zolang tot een bestand is gevonden dat kan worden afgespeeld.

codecs="(...)": wordt niet gebruikt in dit voorbeeld. Hier kun je voor de meer exotische formaten ook nog de exacte codec opgeven die is gebruikt. Normaal genomen is dit niet nodig.

<source src="126-files-dl/AmazingGrace.mp3" type="audio/mpeg">

Deze <source> werkt hetzelfde als <source src="126-files-dl/AmazingGrace.ogg" type="audio/ogg"> hierboven. De enige verschillen zijn de naam van het geluidsbestand en het MIME-type. Bij de eerste <source> is het MIME-type audio/ogg, hier is het audio/mpeg (en niet audio/mp3, zoals vaak wordt gedacht). Browsers die ogg kunnen afspelen, hebben het eerdere geluidsbestand gekozen en komen niet eens aan bij deze regel.

In dit voorbeeld is ogg boven mp3 gezet, omdat het bestand veel kleiner is: 2,5 MB tegen 6,1 MB, bij gelijke kwaliteit. Omdat de meeste browsers met ogg uit de voeten kunnen, zullen ze dit kleinere bestand gebruiken.

Omdat op mp3 inmiddels geen patent meer rust, kunnen vrijwel alle browsers dit inmiddels ook afspelen. Maar gezien het verschil in bestandsgrootte blijft ogg belangrijk.

Je browser ondersteunt het afspelen van geluid niet. Je kunt hieronder nog wel de muziek downloaden.

Browsers van voor het Stenen tijdperk ondersteunen <audio> niet. In dat geval wordt de hier weergegeven tekst op het scherm gezet. Deze browsers zullen nog nauwelijks worden gebruikt, maar het is een kleine moeite zo'n tekst toe te voegen.

Bij Bekende problemen (en oplossingen) worden een paar browsers genoemd, die geen geluid kunnen afspelen (sommige geven wel de mogelijkheid het bestand te downloaden). Bij geen van deze browsers wordt deze tekst getoond.

CSS

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Technisch gezien is er geen enkel bezwaar om de css in de stylesheet allemaal achter elkaar op één regel te zetten:

div#header-buiten {position: absolute; right: 16px; width: 100%; height: 120px; background: yellow;} div p {margin-left 16px; height: 120px; text-align: center;}

Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Beter is het om de css netjes in te laten springen:

              div#header-buiten {
            position: absolute;
            right: 16px;
            width: 100%;
            height: 120px;
            background: yellow;
        }

        div p {
            margin-left: 16px;
            height: 120px;
            text-align: center;
        }

Hiernaast is het heel belangrijk voldoende commentaar (uitleg) in de stylesheet te schrijven. Op dit moment weet je waarschijnlijk (hopelijk...), waarom je iets doet. Maar over vijf jaar kan dat volstrekt onduidelijk zijn. Op deze site vind je nauwelijks commentaar in de stylesheets, maar dat heeft een simpele reden: deze uitleg is in feite één groot commentaar.

Op internet zelf is het goed, als de stylesheet juist zo klein mogelijk is. Dus voor het uploaden kun je normaal genomen het beste het commentaar weer verwijderen. Veel mensen halen zelfs alles wat overbodig is weg, voordat ze de stylesheet uploaden. Inspringingen bijvoorbeeld zijn voor mensen handig, een computer heeft ze niet nodig.

Je hebt dan eigenlijk twee stylesheets. De uitgebreide versie waarin je dingen uitprobeert, verandert, enzovoort, met commentaar, inspringingen, en dergelijke. Dat is de mensvriendelijke versie. Daarnaast is er dan een stylesheet die je op de echte site gebruikt: een gecomprimeerde versie.

Dat comprimeren kun je met de hand doen, maar er bestaan ook hulpmiddelen voor. Op de pagina met links kun je onder het kopje Gereedschap → Snelheid, testen, gzip, comprimeren (inclusief theorie) links naar sites vinden, waar je bestanden kunt comprimeren.

(Stylesheets op deze site zijn niet gecomprimeerd. Omdat het vaak juist om de css gaat, kunnen mensen dan zonder al te veel moeite de css bekijken.)

/* afbeelding-126-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

background: #ff9;

Achtergrondkleurtje.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

font-family: Arial, Helvetica, sans-serif;

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Als eenheid wordt de relatieve eenheid % gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

margin: 0; padding: 0;

Slim om te doen vanwege verschillen tussen browsers.

(Mogelijk is padding niet meer nodig, maar in het verleden verschilde de standaard-padding tussen browsers. Het is simpeler om dit gewoon te blijven gebruiken dan om een uitgebreide test uit te gaan voeren om te kijken, of dit nog wel nodig is.)

main

Alle <main>'s. Dat is er maar één: de belangrijkste inhoud van de pagina staat erin. (Hier is dat alleen de speler met de eronder staande links.)

display: block;

Oudere browsers kennen <main> niet. Een onbekend element is standaard een inline-element, waardoor eigenschappen als breedte niet kunnen worden gebruikt. Nu weten alle browsers dat dit een blok-element is.

width: 640px;

Breedte.

max-width: 94%;

Hier gelijk boven is een breedte van 640 px opgegeven. Dat levert in browservensters smaller dan 640 px een horizontale scrollbalk op. Daarom wordt hier een maximumbreedte opgegeven.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier <body>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. Dat is <html>, het buitenste element. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Uiteindelijk wordt <main> hierdoor nooit breder dan 94% van de breedte van het venster, ongeacht hoe breed dit is.

margin: 20px auto 0;

Omdat voor links geen waarde is opgegeven, krijgt dit automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 20px auto 0 auto in de volgorde boven – rechts – onder – links.

Aan de bovenkant wat afstand tot de bovenkant van het browservenster. Aan de onderkant geen marge. Links en rechts auto, wat hier hetzelfde betekent als evenveel. <main> staat hierdoor altijd horizontaal gecentreerd binnen z'n ouder <body>.

Omdat <body> een blok-element is, wordt dit normaal genomen automatisch even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het browservenster. Hierdoor staat <main> altijd horizontaal gecentreerd binnen het venster, ongeacht hoe breed het venster is.

audio

Het element dat zorgt voor het weergeven van het geluid en het tonen van de knoppen van de speler. Dit element is alleen zichtbaar, als het in de html het attribuut controls heeft gekregen. Als het onzichtbaar is, kan het geluidsbestand alleen worden aangestuurd met behulp van JavaScript.

Waarom hier zo weinig css voor het <audio>-element staat, is te vinden bij Opmerkingen.

display: block;

<audio> is een inline-element, net zoals tekst. Weliswaar een wat eigenaardig inline-element met aparte eigenschappen, maar het blijft een inline-element.

Aan de onderkant van tekst is een kleine extra ruimte om letters als de g en de j weer te kunnen geven. Omdat <audio> een inline-element is, is deze ruimte ook aanwezig onder de knoppen. Dit levert een lelijke kier tussen de knoppen en de eronder zittende tekst op.

De simpelste manier om dit op te lossen is het veranderen van <audio> in een blok-element.

width: 100%;

Een breedte in procenten is normaal genomen opzichte van de ouder van het element, dat is hier <main>.

Hier iets boven heeft <main> een breedte en een maximumbreedte gekregen. <audio>, en daarmee de knoppen, vullen altijd de volle breedte van <main>, ongeacht de breedte van <main>. En omdat <main> hierboven ook horizontaal is gecentreerd binnen het venster van de browser, staat ook <audio> horizontaal gecentreerd binnen het venster.

#tekst

Het element met id="tekst". Hier zit de tekst onder de knoppen in.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

text-align: center;

Alle tekst horizontaal centreren.

border: black solid 1px;

Zwart randje.

padding: 3px;

Kleine afstand tussen buitenkant van en tekst in de <div>.

p

Alle <p>'s.

margin: 0;

Een <p> heeft van zichzelf een marge aan boven- en onderkant. Die wordt hier weggehaald.

p + p

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

p {margin: 0;}

p: alle <p>'s.

+: het element achter de + moet in de html direct volgen op het element voor de +. In dit geval gaat het om een <p> die gelijk op een andere <p> volgt. Beide elementen moeten ook nog dezelfde ouder hebben.

p: alle <p>'s'.

De hele selector in normale mensentaal: doe iets met elke <p> die in de html direct op een andere <p> volgt. In dit voorbeeld zijn slechts twee <p>'s aanwezig: de tekst onder de speler staat erin.

margin-top: 6px;

Kleine afstand tot de <p> erboven.