Geluid op je website: <audio>-tag

clip: Oh Happy Day, duur 41 seconden,
0.24-7.02 MB, afhankelijk van het formaat.

Hier boven zie je een audiospeler. Die wordt op je scherm gezet met behulp van de HTML5-tag <audio>. Op deze bladzijde wordt uitgelegd hoe je dat gebruikt.

De tag <audio> is gemaakt als vervanger voor de constructie met de tags <object> en <embed>. In HTML 4 was dat een bruikbare manier om geluid in je website op te nemen.

Opmerking: De "oude" tag <bgsound>, die alleen met Internet Explorer werkt, heeft nooit in de HTML 4 specificatie gestaan en komt ook in HTML5 niet voor. <bgsound> moet je dus niet gebruiken.

• Aan de orde komen:
  1. De HTML-code.
  2. De attributen van de tags <audio> en <source>.
  3. Inbouwen in je site.
   
• De HTML-code
• De HTML-code bestaat uit drie tags:
  • Een <div> om de audiospeler in het document te positioneren. Dat kun je desgewenst in de <audio>-tag zelf opnemen via het style-attribuut.
  • De <audio>-tag, waarmee de speler op het scherm wordt gezet.
    Tekst die binnen de <audio>-tag wordt geplaatst wordt op het scherm getoond als de browser de <audio>-tag niet herkent.
  • De <source>-tags. Dat is een lijst van audio-bestanden. De browser gebruikt het eerste formaat uit de lijst waar mee het kan werken.
    <source> wordt genest binnen de <audio>-tag. Je hebt deze tag niet nodig als je het attribuut src hebt gebruikt in de <audio>-tag zelf.
   
• De attributen van de <audio>-tag
• Er zijn zes attributen:
   
  

  Attribuut		Betekenis
  autoplay		Als je autoplay opneemt in de <audio>-tag start het geluid automatisch op zodra het geluidsbestand is geladen. In het voorbeeld op deze bladzijde is autoplay toegepast.
  controls		Als je controls opneemt in de <audio>-tag wordt de speler voorzien van een start- / stop-knop, een volumeregelaar, enz. Het default uiterlijk van de controls verschilt per browser en is mede afhankelijk van de beschikbare ruimte. In het voorbeeld op deze bladzijde is controls toegepast.
  loop		Als je loop opneemt in de <audio>-tag wordt de het geluid opnieuw getart zodra het is afgelopen. In het voorbeeld op deze bladzijde is loop niet gebruikt.
  muted		Als je muted opneemt in de <audio>-tag wordt het geluid uitgeschakeld. In het voorbeeld op deze bladzijde is muted niet gebruikt.
  preload		Hiermee geef je aan hoe het geluid moet worden geladen. Daarvoor heb je drie keywords: - auto Het hele geluidsbestand wordt geladen bij het laden van de pagina. Dit is de default-instelling. - metadata Er worden alleen gegevens over het geluid gedownload, de zg. metadata. - none Bij het laden van de pagina wordt het geluidsbestand niet geladen. In het voorbeeld op de bladzijde is de default instelling gebruikt.
  src		Dit is de naam van het geluidsbestand. Dit gebruik je als er maar één formaat beschikbaar is. Als je over meerdere formaten van het geluid beschikt, kun je de browser laten kiezen welk bestandsformaat er wordt gebruikt. Dat regel je met <source>-tags. Zie hieronder.

• Opmerking: Van bovenstaande attributen moet je tenminste autoplay of controls gebruiken om het geluid te kunnen starten.
   
• De attributen van de <source>-tag
• Er zijn drie attributen, waarvan je de eerste twee altijd nodig hebt. De meest gebruikte zijn:
   
  

  Attribuut		Betekenis
  type		Hiermee definieer je het bestandsformaat. Op het moment dat dit wordt geschreven zijn mogelijke waarden: - audio/mpeg Dit is voor het MP3-formaat. De benodigde codec is AAC. Alle browsers beschikken hierover en daarom is .mp3 op dit moment het aanbevolen formaat. - audio/ogg Dit is voor het Ogg-formaat. De benodigde codec is Vorbis. - audio/wav Dit is voor het WAV-formaat. Dit is een ongecomprimeerd formaat. De geluidskwaliteit kan daardoor zeer hoog zijn, maar de WAV-bestanden zijn daardoor ook zeer groot. De benodigde codec is Vorbis.
  src		Dit is de naam van het audio-bestand, waarvan je type hebt opgegeven.
  media		Hier zou je een CSS media-query in moeten kunnen zetten, om te bepalen wanneer het geluid wel en wanneer niet hoorbaar zou moeten zijn. Dit attribuut wordt vooralsnog door geen enkele browser ondersteund. Niet gebruiken dus.

  
   
• Inbouwen in je site
• In principe heb je geluidsbestanden nodig in drie bestandsformaten, nl. .mp3, .ogg en .wav. Er bestaat software die de benodigde conversie in één doorgang kan maken. Voor deze site is de video(!) converter van Freemake gebruikt. Deze converter kan ook heel goed met geluid overweg. Het programma levert ook een voorbeeld van de HTML-code, zij het met een extra, m.i. ongewenste, link naar de website van Freemake.
  Bij het installeren van dit programma wordt aangeboden software van derden mee te installeren. Dat kan je PC vervuilen. Let dus goed op wat je doet.
• De HTML-code van het voorbeeld staat hier onder. Er is geen CSS of JavaScript bij betrokken.

Gebruik:

• De code staat in de <BODY>, op de plaats waar de mediaspeler moet verschijnen.

De code ziet er als volgt uit:
 

<div align="center">
<audio controls autoplay>
  <source src="happyday.mp3" type="audio/mpeg">
  <source src="happyday.ogg" type="audio/ogg">
  <source src="happyday.wav" type="audio/wav">
<p>Audio is niet hoorbaar, HTML5 audio wordt door uw browser waarschijnlijk niet ondersteund.</p>
</audio>
<p align="center" class="Opmerk-g">clip: Oh Happy Day, duur 41 seconden,<br>0.24-7.02 MB, afhankelijk van het formaat.</p>
</div>