Geluid afspelen op een website

02-01-2012 | Marcel van Langen | HTML, XHTML en CSS | geluid, sound, play, start, muziek

Raar eigenlijk, dat het zo moeilijk is om een geluid af te laten spelen op een webpagina. Maar het is een feit dat dit bijzonder lastig is. Gelukkig brengt HTML5 ons nu enige verlichting, maar ook daar zitten haken en ogen aan. In die spaarzame gevallen dat een geluid echt bijdraagt aan de gebruikers ervaring, is deze post handig voor je!

Voor de volledigheid: geluid op een website of webpagina is bijna nooit een goed idee. Je maakt er gebruikers niet blij mee. Laatst echter was het toch gewenst. Het ging om een bedrijfstoepassing in ColdFusion, waarbij beheerders elkaar regelmatig berichten stuurden. Deze toepassing stond bovendien de hele dag open. Om hen te wijzen op een nieuw bericht, was niet alleen een mail en een melding, maar ook een geluidje gewenst.

Je kunt natuurlijk het geluidsfragment embedden in je pagina. Op zich geen slecht idee en met een simpel stukje code is dit te bereiken. Dit bereik je eenvoudig met de volgende code:

<embed src="voorbeeld.wav" loop="false" />

Met behulp van een stukje Javascript kun je deze bovendien onzichtbaar maken en afspelen wanneer het jou uitkomt. Aan deze methode kleven twee belangrijke nadelen. Ten eerste moet de gebruiker een plugin hebben geinstalleerd binnen zijn browser die het fragment kan spelen. Ten tweede zullen de meeste browsers de gebruiker (in ieder geval de eerste keer) om toestemming vragen om het fragment te mogen spelen. Niet echt gebruikersvriendelijk en algemeen toepasbaar dus.

Ook DHTML en Java bieden mogelijkheden om geluid af te laten spelen in de browser. Ook deze worden niet door alle browsers ondersteund. En ook in deze gevallen wordt in de meeste browsers om toestemming van de gebruiker gevraagd. Het is allemaal niet fraai... Het wordt al iets beter als je Flash gaat gebruiken, onder andere omdat er niet langer om toestemming wordt gevraagd. De meeste browsers ondersteunen Flash, maar mobiele apparaten van Apple weer niet.

Je enige serieuze optie is om HTML5 te gebruiken. HTML5 kent de <audio> tag, waarmee geluid kan worden afgespeeld binnen een webpagina. En dat werkt wonderwel! Middels de volgende eenvoudige code heb je al een afspeelmogelijkheid, en een eenvoudig stukje Javascript erbij zorgt voor afspelen op het juiste moment:

<audio id="audioblok" src="voorbeeld.wav" controls preload="auto" autobuffer />

Nadelen? Helaas zijn ze ook hier aanwezig. Het is HTML5, en de browser moet dit natuurlijk wel ondersteunen. Internet Explorer doet dit bijvoorbeeld pas vanaf versie 9. Enig idee hoeveel mensen nog op een oudere versie zitten? Veel te veel. HTML5 is wel een blijvertje, dus de gebruikersgroep zal wel toenemen.

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS