HTML lyd

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

Problemer, problemer og løsningsmetoder

Det er ikke nemt at afspille lyd i HTML!

Du skal være mester i mange færdigheder for at sikre, at din lydfil 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øsningsmetoder for dig.

Bruk programtillegg

Nettleserprogramtillegg er små dataprogrammer som utvider nettleserens standardfunksjoner.

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

Man kan bruke <object> eller <embed> tagget til å legge til programtillegg i en HTML-side.

Disse taggene definerer kontainer for ressurser (vanligvis ikke HTML ressurser), som avhengig av type, kan vises av nettleseren eller av et eksternt programtillegg.

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 kode fragment kan vise en MP3 fil som er indlejret i en nettside:

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.
  • Forskellige nettlesere støtter lydformater forskellig.
  • Hvis nettleseren ikke støtter filformatet, kan lyden ikke spilles av uten programtillegg.
  • Hvis brukerens datamaskin ikke har installert programtillegg, kan lyden ikke spilles av.
  • Selv hvis filen konverteres til et andet format, kan den ikke afspilles i alle nettlesere.

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

Bruk <object> elementet

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

Følgende kode fragment kan vise en MP3 fil som er indlejret i en nettside:

Example

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

Try it yourself

Spørgsmål:

  • Forskellige nettlesere støtter lydformater forskellig.
  • Hvis nettleseren ikke støtter filformatet, kan lyden ikke spilles av uten programtillegg.
  • Hvis brukerens datamaskin ikke har installert programtillegg, kan lyden ikke spilles av.
  • Selv hvis filen konverteres til et andet format, kan den ikke afspilles i alle nettlesere.

Bruk HTML5 <audio> elementet

<audio> elementet er et HTML5 element, som er ulovligt 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 lydformat.
</audio>

Try it yourself

Det ovenstående eksempel bruger en mp3 fil, så det fungerer i Internet Explorer, Chrome og Safari.

For at gøre dette lyd stykke fungerer også i Firefox og Opera, blev en fil af typen oglg tilføjet. Hvis det mislykkes, vises en fejlmeddelelse.

Spørgsmål:

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

Bemærk:Brug <!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 med mp3 eller ogg. Hvis det fejler, vil koden tilbagefalle til at prøve <embed>-elementet.

Spørgsmål:

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

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

Den enkleste måde at tilføje lyd til en webside på

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

Yahoo's Media Player er bestemt en af dem.

Brug af Yahoo Media Player er en anden metode. Du skal bare lade Yahoo gøre arbejdet med at afspille sangene.

Det kan afspille mp3 samt en række andre formater. Ved hjælp af et enkelt stykke kode kan du nemt tilføje det til din webside 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 bare indsætte dette JavaScript i bunden af din side:

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

Herefter skal du bare linke til MP3-filen i 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 afspiller. Men når du klikker på knappen, vises den fulde afspiller.

Note that this player is always docked 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 launch 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 the recording will play.

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 the embedded object.
<param> Define the parameters of the object.

HTML 5 multimedia tags

Tag Description
<audio> The tag defines sound, such as music or other audio streams.
<embed> The tag defines embedded content, such as plugins.