HTML lyd

Der er mange måder at afspille lyd i HTML på.

Problemer, problemer og løsninger

Det er ikke nemt at afspille lyd i HTML!

Du skal være mester i mange færdigheder for at sikre, at dine lydfiler kan afspilles på alle browsere (Internet Explorer, Chrome, Firefox, Safari, Opera) og alle hardware (PC, Mac, iPad, iPhone).

I dette kapitel har CodeW3C.com opsummeret problemer og løsninger for dig.

Bruk plugin

Nettleserplugin er et lite dataprogram som utvider nettleserens standardfunksjoner.

Plugins har mange bruksområder: avspill musikk, vise kart, verifisere bankkonto, kontrollere inngang osv.

Du kan bruke <object> eller <embed> tagget til å legge til plugins i HTML-siden.

Disse taggene definerer containere for ressurser (vanligvis ikke HTML-ressurser), som enten vises av nettleseren eller av en ekstern plugin, avhengig av type.

Bruk <embed> elementet

<embed> tagget definerer en container for eksternt (ikke HTML) innhold. (Det er et HTML5-tag, som er ulovlig i HTML4, men fungerer i alle nettlesere).

Følgende kodefragment kan vise en MP3-fil innebygd i nettsiden:

Example

<embed height="100" width="100" src="song.mp3" />

Try it yourself

Spørgsmål:

  • <embed> tagget er ugyldig i HTML 4. Siden kan ikke verifiseres med HTML 4.
  • Forskjellige nettlesere støtter lydformater på forskjellig måte.
  • Hvis nettleseren ikke støtter filformatet, kan lyden ikke spilles av uten plugin.
  • Hvis brukerens datamaskin ikke har installert plugin, kan lyden ikke spilles av.
  • Selv om filen konverteres til et annet format, kan den ikke spilles av i alle nettlesere.

Bemærk:Brug af <!DOCTYPE html> (HTML5) for at løse valideringsproblemer.

Bruk <object> elementet

<object tag> kan også brukes til å definere en container for eksternt (ikke HTML) innhold.

Følgende kodefragment kan vise en MP3-fil innebygd i nettsiden:

Example

<object height="100" width="100" data="song.mp3"></object>

Try it yourself

Spørgsmål:

  • Forskjellige nettlesere støtter lydformater på forskjellig måte.
  • Hvis nettleseren ikke støtter filformatet, kan lyden ikke spilles av uten plugin.
  • Hvis brukerens datamaskin ikke har installert plugin, kan lyden ikke spilles av.
  • Selv om filen konverteres til et annet format, kan den ikke spilles av i alle nettlesere.

Bruk HTML5 <audio> elementet

<audio> elementet er et HTML5-element, som er ulovlig i HTML 4, men fungerer i alle nettlesere.

Example

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Din nettleser støtter ikke dette lydformatet.
</audio>

Try it yourself

Eksempelet ovenfor brukte en mp3-fil, slik at den fungerer i Internet Explorer, Chrome og Safari.

For å gjøre denne lyden funksjonell i Firefox og Opera, ble en fil av type ogg lagt til. Hvis det mislykkes, vises en feilmelding.

Spørgsmål:

  • <audio> tagget er ugyldig i HTML 4. Din side kan ikke verifiseres med HTML 4.
  • Du må konvertere lydfilen til et annet format.
  • <audio> elementet virker ikke i gamle nettlesere.

Bemærk:Brug af <!DOCTYPE html> (HTML5) for at løse valideringsproblemer.

Bedste HTML løsning

Example

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Try it yourself

De ovenstående eksempler bruger to forskellige lydformater. HTML5 <audio>-elementet forsøger at afspille lyden som mp3 eller ogg. Hvis det mislykkes, vil koden forsøge at bruge <embed>-elementet.

Spørgsmål:

  • Du skal konvertere lyden til en anden format.
  • Elementet <audio> kan ikke valideres i HTML 4 og XHTML.
  • Elementet <embed> kan ikke valideres i HTML 4 og XHTML.
  • Elementet <embed> kan ikke bruges til at vise fejlmeddelelser.

Bemærk:Brug af <!DOCTYPE html> (HTML5) for at løse valideringsproblemer.

Den nemmeste måde at tilføje lyd til en hjemmeside

Hvad er den nemmeste måde at tilføje lyd til en webside?

Yahoo's Media Player er bestemt en af dem.

Brug af Yahoo Media Player er en anden metode. Du skal kun lade Yahoo tage sig af afspilningen af sangene.

Den kan afspille mp3 og en række andre formater. Ved hjælp af en enkel linje kode kan du tilføje den til din side og nemt omdanne din HTML-side til en professionel spilleliste.

Yahoo Media Player

Example

<a href="song.mp3">Afspil Lyd</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Try it yourself

Brug af Yahoo Player er gratis. For at bruge det skal du blot indsætte dette JavaScript i bunden af din side:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Dernæst skal du kun tilføje MP3-filens link til din HTML, og JavaScript vil automatisk oprette afspilningsknapper for hver sang:

<a href="song1.mp3">Afspil Sang 1</a>
<a href="song2.mp3">Afspil Sang 2</a>
...
...
...

Yahoo Media Player tilbyder dine brugere en lille afspilningsknap, ikke en fuld spiller. Men når du klikker på knappen, vises den fulde spiller.

Note that this player always docks at the bottom of the window frame. Just click on it to slide it out.

Use hyperlinks

If a web page contains hyperlinks to media files, most browsers will use an "assistant application" to play the file.

The following code snippet shows a link to an mp3 file. If the user clicks on the link, the browser will start an "assistant application" to play the file:

Example

<a href="song.mp3">Play the sound</a>

Try it yourself

Inline sound

When you include sound in a web page or as part of a web page, it is called inline sound.

If you plan to use inline sound in web applications, you need to be aware that many people find inline sound annoying. Also, note that the user may have turned off the inline sound option in the browser.

Our best advice is to only include them where the user wants to hear inline sound. A positive example is when the user needs to hear a recording and click on a link, the page will open and play the recording.

HTML 4.01 multimedia tags

Tag Description
<applet> Not recommended. Define embedded applet.
<embed> Not recommended in HTML4, allowed in HTML5. Define embedded objects.
<object> Define embedded objects.
<param> Define the parameters of the object.

HTML 5 multimedia tags

Tag Description
<audio> Tags define sounds, such as music or other audio streams.
<embed> Tags define embedded content, such as plugins.