9.1: Audio (geluid) in je website
Het kan zinvol zijn om geluid op te nemen in je website. Als je bijvoorbeeld kinderen via je website wil leren welk geluid afkomstig is van welk dier dan zou je bijvoorbeeld een afbeelding van een paard kunnen laten zien. Hiernaast kun je dan een audio-element opnemen dat afgespeeld kan worden. Het kind krijgt dan het het gehinnik van een paard te horen.
Hieronder zie je een voorbeeld:
De code voor het weergeven van een audio-element is als volgt:
<audio controls>
<source src="media/horse.mp3" type="audio/mpeg">
De Browser ondersteunt geen mp3 geluid.
</audio>
Let op de volgende zaken:
- Alle moderne Browsers ondersteunen geluid
- MP3 wordt door alle (moderne) Browsers ondersteund
- Let op het juiste path (relatieve link) naar het geluidsbestand
- Als de website geopend wordt met een verouderde Browser dan ziet de bezoeker de mededeling
Er zijn 3 audioformaten toegestaan:
- MP3: <source src="path/bestand.mp3" type="audio/mpeg">
- WAV: <source src="path/bestand.wav" type="audio/wav">
- OGG: <source src="path/bestand.ogg" type="audio/ogg">
Opdracht 22: Audio
- Maak een nieuwe webpagina en sla deze op als audio_en_video.html in een nieuwe map met de naam 'media'.
- Zet in deze pagina een afbeelding van een dier (dat geluid maakt; dus geen slak)
- zoek op internet naar een mp3-bestand of wav-bestand met het geluid van jouw dier en sla het bestand op in een nieuwe map media
- Zorg dat de afbeelding zichbaar is (juiste link) en het geluid hoorbaar is (juiste link)