Audio plaatsen op webpagina

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Video plaatsen op webpagina

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

Ook audiobestanden kun je plaatsen op een webpagina.

De drie meest gangbare formaten voor audio zijn mp, wav en ogg.

Alleen de mp wordt door alle browsers ondersteund dus is dat formaat aan te raden om te gebruiken.

In de Local Root Folder heb ik een mapje voor de geluiden gemaakt en die heet sound.

Daarin zitten een aantal audiofragmenten waarmee je kunt gaan experimenteren.

Om audio in te voegen op een pagina plaats je het html-element -audio-.

Deze moet ook worden afgesloten.

Binnen het audio-element kun je een tekst opnemen in een p-element bijvoorbeeld.

Deze tekst wordt getoond als de browser het html-element -audio- in zijn geheel niet ondersteunt.

Mocht een bezoeker met een zwaar verouderde browser werken, dan verschijnt deze tekst.

Ik bewaar het document .

En je ziet nog niets verschijnen op de pagina.

Daar gaan we nu verandering in aanbrengen.

Het eerste attribuut voor audio is het attribuut -controls-.

En kijk! Nu wordt er al een audio-player getoond.

We hebben nog geen audiobestand opgegeven dus de player doet nog niets. Maar het is alvast een begin.

Binnen het audio-element plaats ik het html-element -source-.

Deze hoef je niet af te sluiten.

Hierin geef ik het betreffende audiobestand op met src="".

Tussen de quotes plaats je de route naar het bestand.

Dus in de map sound staat een bestand meeuwen.mp.

Dan plaats je het volgende verplichte attribuut en dat is type=" " .

Tussen de quotes geef je aan wat voor audioformaat het is en dat doe je met met audio/mp.

En ik bewaar het document.

Je kunt meer dan één bronbestand opgeven.

Ik kopieer deze broncode met commando C en plak deze nogmaals twee keer onder elkaar.

Ik heb namelijk van deze meeuwen ook nog een wav-bestand in de map sounds staan.

Dus ik verander de extensie hier in wav.

En geef ook het juiste bestandstype aan, zet daar ook neer audio/wav..

Mocht je trouwens een geluidsbestand in een ander bestandsformaat willen omzetten.

Dan kun je online zoeken naar audioconverters.

Ik heb hier een voorbeeld van zo'n website.

Klik op Open files en kies het geluidsbestand.

Klik op Open. Kies daarna het bestandsformaat waarin je deze wilt omzetten.

Ik wil ook nog een ogg-bestand van hebben, dus kies ik voor OGG.

Klik op Convert.

En je kunt het bestand downloaden.

Laten tonen in de finder.

En plaatsen in de Local Root Folder.

Ik wijzig de naam in meeuwen.ogg.

En geef dit ook correct op in de broncode. Dus dit is een ogg en het type is ook een ogg.

Waarom plaats je drie keer hetzelfde bestand?

Nou stel dat een browser geen mp's kan afspelen.

Dan wordt automatisch het volgende audiobestand gebruikt.

In dit geval de wav.

Als de browser ook die niet kan afspelen dan wordt het ogg-bestand gebruikt.

Dan zijn er nog een paar attributen voor audio die ik wil laten zien.

Allereerst preload=" " Hier bestaan drie waarden voor.

None betekent 'doe niets'.

Metadata betekent dat de metadata die bij het bestand ingesloten zit alvast wordt gedownload.

Zoals bijvoorbeeld de bestandsnaam, het type bestand, de copyrightgegevens etcetera.

Ik zet deze op auto.

Auto betekent dat het geluidsbestand bij het openen van deze webpagina direct wordt gedownload.

Waardoor deze ook meteen kan afspelen zodra de gebruiker op play drukt. En dat lijkt me handig.

Ik heb deze pagina nu in drie verschillende browsers geopend.

En je ziet dat elke browser een zelfontworpen audio-player heeft.

Ook de functionaliteiten van de player kunnen verschillen per browser.

Met het attribuut loop zal het fragment zichzelf herhalend gaan afspelen.

Kijk maar! Als ik de afspeelkop naar het einde verplaats en ik druk op Play.

Dan schiet deze nu automatisch terug naar het begin en start opnieuw.

Het attribuut autoplay zou ik niet aanraden.

Want dan speelt het geluid bij het laden van de pagina direct af.

En de meeste mensen vinden dit juist erg vervelend.

Het attribuut muted maakt dat het volume in eerste instantie uit wordt gezet.

Ik zal nu als bezoeker zelf actief het volume weer moeten aanzetten.