Tags:    html html5 audio

Introduktion :

Denne artikel handler om HTML elementet <audio> som gør det muligt at afspille lyd på hjemmesider.

<audio> er ny i HTML 5 og virker derfor kun i nyere browsere.

<audio> virker i nyere versioner af disse browsere :

Mozilla Firefox
Opera
Apple Safari
Google Chrome
Microsoft Internet Explorer

eksempel på brug af <audio> :

 <audio src="lydfil.xxx" controls>
 </audio>

Hvis den tomme controls attribut findes viser browseren sin standard afspiller. Ellers er afspilleren skjult.

Standard afspilleren har forskelligt udseende og størrelse fra browser til browser som det ses her :

Mozilla Firefox


Opera


Apple Safari


Google Chrome


Microsoft Internet Explorer

Lydformater :

Da de forskellige browsere ikke understøtter samme lydformater er det nødvendigt at have sine lydfiler i mere end et format for at det skal kunne virke i flest mulige browsere.

Browserne understøtter primært 3 lydformater.
De kaldes populært for OGG, MP3 og WAVE.

Hvis man har sine lydfiler i både OGG og MP3 så kan lyden afspilles i alle de mest populære browsere (Firefox, Opera, Safari, Chrome, Internet Explorer).

Konvertering :

For at konverter lydfiler til et andet format kan man bruge programmer som Miro Video Converter og ffmpeg2theora.

Hvis man vil redigere lydfilen kan man bruge Audacity.

Eksempel med 3 lydformater :

Når man angiver mere end én lydfil i samme afspiller så skal der ikke være nogen href attribut i <audio>.
I stedet bruges <source>.

 <audio controls>
    <source src="lydfil.oga" type="audio/ogg" />
    <source src="lydfil.mp3" type="audio/mp3" />
    <source src="lydfil.wav" type="audio/wave" />
 </audio>

Browseren afspiller den første <source> på listen som den er i stand til at afspille.

Bagudkompatibel :

Man kan inkluder noget alternativt indhold til sidst mellem <audio> og </audio> som vises i browsere som ikke understøtter <audio>.

 <audio controls>
    <source src="lydfil.oga" type="audio/ogg" />
    <source src="lydfil.mp3" type="audio/mp3" />
    <source src="lydfil.wav" type="audio/wave" />
    Denne tekst vises i browsere som ikke understøtter audio elementet.
 </audio>

Man kan også vise en flash afspiller i de browsere som ikke understøtter audio elementet.

Her er et eksempel hvor jeg bruger player_mp3_multi.swf som kan hentes hos flash-mp3-player.net.

Eksempel med alternativ flash afspiller :

 <audio controls>
    <source src="lydfil.oga" type="audio/ogg" />
    <source src="lydfil.mp3" type="audio/mp3" />
    <source src="lydfil.wav" type="audio/wave" />
 
    <object type="application/x-shockwave-flash" data="player_mp3_multi.swf" width="200" height="100">
       <param name="movie" value="player_mp3_multi.swf" />
       <param name="FlashVars" value="mp3=lydfil1.mp3|lydfil2.mp3&amp;title=Lydfil1|title=Lydfil2" />
       Denne tekst vises i browsere som hverken understøtter audio elementet eller flash.
    </object>
 
 </audio>

MIME typer :

For at være sikker på at lydfiler skal kunne afspilles af browserne skal filerne sendes af serveren med de korrekte MIME type.
Hvis du oplever at browseren ikke vil afspille en lydfil selvom den burde så kan det være fordi serveren sender lydfilen med en forkert MIME type.

Du kan bruge web-sniffer.net til at checke hvad MIME type din server sender lydfilerne med for at være sikker på de sendes rigtigt (kig efter "Content-type").

For eksempel kan der står en af følgende muligheder :

      Content-type: audio/ogg
      Content-type: audio/mpeg
      Content-type: audio/wave

Hvis der for eksempel står følgende så sender serveren en forkert MIME type :
Content-type: text/plain

Bruger man Apache HTTP server og serveren ikke sender lydfilerne med korrekt MIME type kan man skrive følgende i en .htaccess fil som man ligger i roden af hjemmesiden :

AddType audio/ogg .oga
AddType audio/mpeg .mp3
AddType audio/wave .wav

<audio> attributter :

src (sti til en lydfil)

controls (viser standard afspilleren hvis attributten findes)

autoplay (afspiller lyden automatisk hvis attributten findes)

loop (starter forfra når slutningen er nået hvis attributten findes)

preload (betemmer om browseren skal hente noget af filen inden brugeren starter afspilningen sådan at filens varighed eller lyden er klart før afspilningen starter)

      Mulige værdier for preload :
         auto (henter en del af filen eller hele filen. Browseren bestemmer)
         metadata (henter kun data om format, varighed og ligende)
         none (hentet ingenting)

Javascript API :

Hvis man ønsker en ensartet afspiller kan man undlade controls attributten for af skjule standard afspilleren også lave sin egen afspiller med Javascript.

Her ses nogle eksempler på hvordan man kan styre <audio> fra Javascript.

 <audio id="musik1" src="filnavn.xxx">
    Din browser understøtter ikke audio tagget.
 </audio>
 
 <div>
 
    <button onclick="document.getElementById('musik1').play();">
       Start
    </button>
    
    <button onclick="document.getElementById('musik1').pause();">
       Pause
    </button>
    
    <button onclick="document.getElementById('musik1').pause(); document.getElementById('musik1').currentTime = 0;">
       Stop
    </button>
 
    <button onclick="document.getElementById('musik1').controls = true;">
       Vis controls
    </button>
 
    <button onclick="document.getElementById('musik1').controls = false;">
       Skjul controls
    </button>
 
    <button onclick="document.getElementById('musik1').muted = true;">
       mute
    </button>
 
    <button onclick="document.getElementById('musik1').muted = false;">
       unmute
    </button>
 
    <button onclick="document.getElementById('musik1').volume = 0.3;">
       30 % volume
    </button>
 
    <button onclick="document.getElementById('musik1').volume = 0.7;">
       70 % volume
    </button>
 
 </div>

<source> attributter :

src (sti til en lydfil)

type (angiver MIME type og eventuelt codes)

      For eksempel :
         "audio/ogg"
         "audio/ogg; codecs='vorbis'"
         "audio/mpeg"
         "audio/wave"

media (media queries)

      For eksempel :
         handheld
         screen
         min-width:400px
         screen and (min-width:320px)

Læs mere om media queries hos w3.org og w3schools.com.

Angående MIME type og codecs :

Grunden til at man angiver en MIME type og eventuel codec er fordi så behøver browseren ikke downloade noget af lydfilen for at finde ud af om den er istand til at afspille den.
Ved at angive type MIME type og codec bliver hjemmesiden hurtigere for brugerne.

Bonus info :

Brug <!doctype html> øverst i dine HTML 5 filer for at få browseren i standardoverholdende tilstand.
Så kan man være mere sikker på at HTML 5 koden vises som man ønsker og forventer.

Specifikationer :

audio Editor's Draft
audio W3C Working Draft

source Editor's Draft
source W3C Working Draft

Slut kommentar :

Du kan finde mere om HTML 5 <audio> på min hjemmeside : <audio> tag - HTMLgrisen
Kontakt mig gerne hvis du har nogen spørgsmål, kommentar, rettelser eller andet.


Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X