Xavier Bertels on tech, design & product

Naar aanleiding van een discussie op het Telenet Webdesign forum, vond ik het wel zinnig om een klein stukje te schrijven over het gebruik van muziek en geluid in het algemeen op een website.

Je kent het wel: je bent naar je favoriete mixset of readiostream aan het luisteren terwijl je wat aan het rondsurfen bent. Je klikt op een van de vele links waaruit het web is opgebouwd en plots knalt er door je speakers het oorverdovend geluid van de flash-intro van één of andere website. In een erger geval wordt er eerst nog een loodzware Quicktime- of Windows Mediaplugin geladen. Helemaal van de kaart begin je te zoeken naar het veel te kleine mute- of pauzeknopje en als dat geen uitkomst biedt sluit je de website, in de hoop hem nooit meer tegen te komen. Liefst van al blokkeer je nog het hele ding met je Firefox Adblock plugin.

Bovenstaande anekdote is misschien licht overdreven. Maar het is wel op een realiteit geschoeid. Sommige puristen zeggen: “geen geluid of muziek op een website”. Ik ben het daar niet helemaal mee eens. Het web is geëvolueerd van een platform voor het uitwisselen en verbinden van documenten, naar een platform voor het uitwisselen en verbinden van culturen en mensen. Ik wil daarom ook zonder schroom stellen dat het web een multimediaal web is en dat je gerust hier en daar geluid mag implementeren. Als het ten minste op een correcte, aanvaardbare en weldoordachte manier gebeurt.

Het tegenovergestelde is echter meestal waar en daarom wil ik hier een aantal eenvoudige basisregels definiëren voor het implementeren van geluid op je website. Ik maak daarin ook een verschil tussen geluiden en (achtergrond)muziek. De lijstjes zijn niet limitatief. Indien je nog opmerkingen of aanvullingen hebt, mag je die altijd als reactie achterlaten.

Voor (achtergrond)muziek wil ik volgende richtlijnen meegeven:

• Laat (achtergrond)muziek nooit automatisch beginnen spelen.
  
• Laat (achtergrond)muziek nooit automatisch inladen bij het laden van de pagina.
• Geef duidelijk aan dat een klik op een bepaalde knop of link zal leiden tot het inladen en afspelen van een geluidfragment.
• Geef duidelijk aan dat er voor het afspelen van de muziek een bepaalde plugin nodig is (Flash, Quicktime, Media Player). Dit geldt uiteraard niet voor Flash als de gebruiker zich al op een Flashpagina bevindt.
• Voorzie liefst twee alternatieven: een downloadlink voor mensen met een trage verbinding en een streaminglink voor mensen met een breedbandverbinding. Voor de downloadlink zijn er bij voorkeur ook verschillende bestandgroottes beschikbaar. Voor zij die schrik hebben van het stelen van muziek heb ik het volgende ontnuchterend antwoord: alles wat via de computer gaat, kan opgenomen worden. Zelfs Real Media bestanden zijn niet veilig.

Voor interactiegeluiden houd ik mij altijd aan volgende richtlijnen:

• Zet de geluiden liever stiller dan luider. Er is niet zo storend als een interactiegeluid dat torenhoog boven de achtergrondmuziek van de surfer uitkomt.
  
• Laad deze geluiden wel in bij het laden van de webpagina. Interactiegeluiden die meer dan één keer voorkomen kunnen zo in de cache van de browser opgeslaan worden en dit vermindert de serverload en de gebruikte bandbreedte van de surfer aanzienlijk.
• Codeer interactiegeluiden liefst met een zo laag mogelijke bitrate (boven de 128 kbps is al veel). Op deze manier wordt de serverload en bandbreedte ook zo veel mogelijk beperkt.
• En als laatste, maar zeker niet minste punt: laat interactiegeluiden nooit langer dan 2 seconden duren. Voor een hoverstate is het zelfs aanbevolen om het interactiegeluid onder de 1 seconde te houden.

Dat interactiegeluiden vooral in Flashapplicaties gebruikt worden lijkt mij vanzelfsprekend. Er is eventueel ook een combinatie van JavaScript en Flash mogelijk, maar dat gaat het doel van dit artikel te boven.

Algemeen wil ik ook nog een heel belangrijk element toevoegen: voorzie een stop- of muteknop om het geluid af te zetten! En maak er voor een keer geen pixelbutton van, die verscholen zit achter drie menu’s, maar zet hem duidelijk en prominent op je webpagina. Houd er dus rekening mee bij het ontwerpen van je website.

Ik wil ten slotte ook nog een Opensource programma aanraden dat absoluut noodzakelijk is om het geluid op je webpagina just right te krijgen. Audacity gebruik ik om de lengte van mijn geluiden in te korten. Daarna breng ik het geluid eerst op een normaal niveau (normalize) en als finishing touch zet ik het wat stiller (voor de technisch onderlegden: -3dB).

Laat gerust jullie aanvullingen, bedenkingen of aanmoedigingen achter!