Publisering av lyd som del av nettsider
Publisering av lyd med åpne standarder er i ferd med å bli forholdsvis enkelt: Nyere versjoner av Firefox, Opera, Chrome og Safari (også på mobiltelefoner) støtter <audio>-taggen i HTML, og i alle fall én av Ogg Vorbis eller AAC. Microsoft har annonsert <audio> og AAC i Internet Explorer 9.
Det vil dog ta tid før de eldre nettleserne er faset ut. Denne oppskriften viser hvordan Ogg- og MP3-lyd kan publiseres for nye nettlesere, og deretter hvordan framgangsmåten kan kombineres med JavaScript-biblioteket mwEmbed for en løsning som fungerer med eldre nettleserversjoner.
<audio>
Nyere versjoner av mange utbredte nettlesere kan bruke HTML-taggen <audio> for å spille av lyd i nettsider, uten bruk av plugins. HTML5-lyd har derfor stort potensial for å virke på tvers av plattformer, uten ressurskrevende plugins, og uten å måtte bry brukere med nedlasting av programvare.
W3C og andre organisasjoner arbeider med standarder for undertekster og synkronisering av lyd, tekst og bilder.
<audio> fungerer på samme måte som <img>-taggen for bilder, men gjør det også mulig å parallellpublisere samme lydfiler i flere formater (typisk Ogg Vorbis og AAC) for å dekke flere nettlesere og plattformer:
<audio duration="09:56" controls="1">
<source type="audio/ogg" src="wavy.ogg">
<source type="audio/mp3" src="wavy.mp3">
</audio>
Taggen <audio> omslutter to <source>-tagger. Det er <source>-taggene som viser til lydfilene. Filstier fungerer likt som for bilder, linker og andre referanser i HTML-dokumenter.
Se gjeldende HTML5-dokumentasjon for en detaljert beskrivelse av tagger og parametre. Her er de viktigste:
| <audio> | Plasserer en lydfil i nettsida, vanligvis med samme innhold kodet i flere formater. |
|---|---|
| <source> | Viser til en faktisk lydfil. Alle <source> tagger i samme <audio>-tag må peke til samme innhold, men kodet i hvert sitt format. |
| duration | Lengden på lydfila i minutter og sekunder, atskilt med kolon |
| controls | Hvis spesifisert viser nettleseren automatisk knapper e.l. (f.eks. play/pause) for å styre avspilling. I motsatt fall må den som publiserer bygge kontrollmekanismene selv, og knytte dem til lydavspillingen med JavaScript. |
| width/height | |
| type | MIME-typen til fila <source>-taggen referer til. Nettleseren vil bruke denne for å finne ut hvilke versjoner av lyden den kan spille av. |
| src | Filsti eller komplett URL til lydfila |
Websider med lyd bør (med mindre sterke forhold taler for noe annet) inneholde lenker direkte til lydfilene, slik at brukeren selv kan laste dem ned og/eller velge annen programvare for å vise dem.
Se http://media.hiof.no/diverse/difi/audio_html5.html for et komplett eksempel.
Legg merke til at HTML-koden over er HTML5, og derfor ikke vil bli godtatt som gyldig XHTML eller HTML 4.
mwEmbed
I lang tid framover vil det være nødvendig å vise weblyd i eldre nettlesere. JavaScript-biblioteket HTML5_Video_Media_JavaScript_Library">mwEmbed lar deg bruke samme HTML5-kode og lydfiler med eldre browsere, ved å falle tilbake på plugins de fleste brukere har installert (bl.a. Adobe Flash, QuickTime Player og VLC).
Det enkleste er å legge følgende kodebit inne i HTML-dokumentets <head>-tag:
<head> ... <script type="text/javascript" src="http://html5.kaltura.org/js" > </script> </head>
Når dokumentet lastes på brukerens maskin vil <lyd>-taggen automatisk tilpasses brukerens nettleser.
Se http://media.hiof.no/diverse/difi/audio_index.html for et komplett eksempel.
mwEmbed (lokal installasjon)
Eksempelet over henter mwEmbed-biblioteket fra direkte fra utviklernes nettsted (Kaltura.org). Av hensyn til ytelse, sikkerhet eller andre praktiske årsaker kan det være nyttig eller nødvendig å plassere biblioteket på en lokal webserver.
Last i så fall ned biblioteket
fra HTML5_Video_Media_JavaScript_Library">Kaltura.org
(nedlastingslenken Download Latest nederst på sida). Pakk
biblioteket ut, og referer til fila mwEmbed.js,
f.eks. slik:
<head> ... <script type="text/javascript" src="mwEmbed/mwEmbed.js" > </script> </head>
Se http://media.hiof.no/diverse/difi/audio_lokal.html for et komplett eksempel.
Undertekster
Mye tyder på at både vanlige nettlesere og biblioteker som mwEmbed vil støtte kommende standarder for undertekster og synkronisering av tekst og bilder (f.eks. slides fra presentasjoner).
Inntil videre kan både undertekster og synkronisering av elementer implementeres programmatisk med f.eks. JavaScript.
Lenker
Musikken i eksempelet er Wavy Glass av Podington Bear.