<audio> Element - HTML

Her ses hvordan <audio> elementet bruges til at lave en lydafspiller på hjemmesiden

Element og attributter

Her ses hvordan <audio> bruges med tilhørende attributter.


<audio> har de samme attributter som <video> bortset fra poster, width og height som kun findes i <video>.
Attribut Betydning Mulige værdier
src sti til lydfil som skal afspilles For eksempel :
lydfil.mp3
lydfil.oga
lydfil.wav
controls viser browserens standard afspiller [boolsk udtryk] 1
autoplay afspilningen starter automatisk [boolsk udtryk] 1
loop afspilningen starter forfra når slutningen er nået [boolsk udtryk] 1
preload bestemmer om dele af filen skal hentes inden den afspilles auto = browseren bestemmer (hvilket gerne betyder at en del af lydfilen hentes så den er klar til afspilning)

metadata = henter kun data om varighed og lignende

none = henter ingen data
autobuffer bruges ikke mere. Er blevet omdøbt til preload [boolsk udtryk] 1
muted slår lyden fra [boolsk udtryk] 1
mediagroup Bruges på flere audio/video elementer så de kan afspille synkront (en gruppe af medieelementer deler samme controls) Se også Mediagroup attribut.


1 Boolske udtryk kan både skrives som controls, controls="controls" eller controls="true".

Jeg vælger at bruge controls da jeg bruger HTML og det er mest simpelt.

Hvis man bruger XHTML skal attributten have tildelt en værdi som contols="controls" da tomme attributter ikke er tilladt i XHTML.

Eksempel

Her ses et simpelt eksempel på brug af <audio>.

Element og attributter med source

Ved at bruge <audio> sammen med flere <source> kan man angive flere forskellige lydformater af den samme lydfil så flest mulige browsere kan afspille lyden.

Når man bruger <source> skal man ikke bruge src attributten i <audio>.

Eksempel med source

Her ses et eksempel med <audio> og 3 lydformater i hver sin <source>.

Browseren afspiller det første format den understøttet.

Firefox vil afspille .oga filen.
Safari vil afspille .mp3 filen fordi Safari ikke kan afspille .oga filen.
Hvis browseren hverken kan afspille .oga eller .mp3 filen så afspilles .wav filen hvis browseren understøtter det format.

Bredde

Til at bestemme bredden på <audio controls> bruges CSS.
Man kan ikke sætte bredden med <audio controls width="xxx">.

Her ses afspillerens standard bredde som variere fra browser til browser.
Resultatet ovenfor er skabt af følgende kode


Her er bredden sat med CSS.


Resultatet ovenfor er skabt af følgende kode

Lyd fra video

Som en sjov detalje kan man også afspille en videofil i et <audio> tag.
Så afspilles kun lyden uden billedet.

Type attributten

type attributten i <source> angiver filens MIME type.

Formålet med at angive filens MIME type er at browseren så ikke behøver downloade noget af filen for at finde ud af om den er i stand til at afspille den.

Her ses nogle eksempel.

Udover at angive MIME typen kan man også angive codecs som en del af type attributten.
Hvis man også angive codecs har browseren endnu bedre mulighed for at vide om den er i stand til at afspille filen.

Her ses et eksempel med :
En OGG container med Vorbis codec.
En MPEG-1 container med MPEG-1 Audio Layer 3 codec.
En Waveform Audio File Format container med PCM codec.
En OGG container med Opus codec.


Her ses nogle eksempler med MPEG-4 container med MPEG-4 Advanced Audio Coding codec.
Jeg er i tvivl om hvordan det skal skrives.


Man kan også bytte om på ' og " tegnene.
Det bestemmer man selv alt efter hvad man fortrækker.
Disse eksempler er også gyldige.

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.