HTML-ljud

Det finns många sätt att spela upp ljud i HTML.

Problemer, problem och lösningar

Det är inte lätt att spela upp ljud i HTML!

Du behöver behärska många färdigheter för att säkerställa att din ljudfil kan spelas upp i alla webbläsare (Internet Explorer, Chrome, Firefox, Safari, Opera) och på alla hårdvaror (PC, Mac, iPad, iPhone).

I detta kapitel sammanfattar CodeW3C.com problem och lösningar för dig.

Använd tillägg

Webbläsarplugin är ett litet datorprogram som utökar webbläsarens standardfunktioner.

Tillägg har många användningsområden: spela musik, visa kartor, verifiera bankkonton, styra inmatning osv.

Du kan använda taggarna <object> eller <embed> för att lägga till tillägg till en HTML-sida.

Dessa taggar definierar behållare för resurser (vanligtvis inte HTML-resurser), som beroende på typ, antingen visas av webbläsaren eller av ett externt tillägg.

Använd elementet <embed>

Taggen <embed> definierar en behållare för extern (inte HTML) innehåll. (Detta är en HTML5-tagg som är ogiltig i HTML4, men fungerar i alla webbläsare).

Följande kodsnutt kan visa en MP3-fil inbäddad i en webbsida:

Exempel

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

Prova det själv

Fråga:

  • Taggen <embed> är ogiltig i HTML 4. Sidan kan inte valideras med HTML 4.
  • Olika webbläsare stöder olika ljudformat.
  • Om webbläsaren inte stöder filformatet kan ljudet inte spelas upp utan tillägg.
  • Om användarens dator inte har installerat ett tillägg kan ljudet inte spelas upp.
  • Om filen konverteras till ett annat format fungerar den fortfarande inte att spela upp i alla webbläsare.

Kommentar:Använd <!DOCTYPE html> (HTML5) för att lösa valideringsproblem.

Använd elementet <object>

Taggen <object> kan också definiera en behållare för extern (inte HTML) innehåll.

Följande kodsnutt kan visa en MP3-fil inbäddad i en webbsida:

Exempel

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

Prova det själv

Fråga:

  • Olika webbläsare stöder olika ljudformat.
  • Om webbläsaren inte stöder filformatet kan ljudet inte spelas upp utan tillägg.
  • Om användarens dator inte har installerat ett tillägg kan ljudet inte spelas upp.
  • Om filen konverteras till ett annat format fungerar den fortfarande inte att spela upp i alla webbläsare.

Använd HTML5 <audio>-elementet

Elementet <audio> är ett HTML5-element som är ogiltigt i HTML 4, men fungerar i alla webbläsare.

Exempel

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Din webbläsare stöder inte detta ljudformat.
</audio>

Prova det själv

Ovanstående exempel använder en mp3-fil, så att den fungerar i Internet Explorer, Chrome och Safari.

För att göra detta ljud fungerar lika bra i Firefox och Opera, har en fil av typen ogg lagts till. Om det misslyckas, visas ett felmeddelande.

Fråga:

  • Taggen <audio> är ogiltig i HTML 4. Din sida kan inte valideras med HTML 4.
  • Du måste konvertera ljudfilen till ett annat format.
  • Elementet <audio> fungerar inte i äldre webbläsare.

Kommentar:Använd <!DOCTYPE html> (HTML5) för att lösa valideringsproblem.

Bästa HTML-lösningen

Exempel

<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>

Prova det själv

Exempeln ovan använde två olika ljudformat. HTML5 <audio>-elementet försöker spela ljudet i mp3 eller ogg. Om detta misslyckas försöker koden med att använda elementet <embed>.

Fråga:

  • Du måste konvertera ljudet till ett annat format.
  • Elementet <audio> kan inte valideras med HTML 4 och XHTML.
  • Elementet <embed> kan inte valideras med HTML 4 och XHTML.
  • Elementet <embed> kan inte återställas för att visa felmeddelanden.

Kommentar:Använd <!DOCTYPE html> (HTML5) för att lösa valideringsproblem.

Det enklaste sättet att lägga till ljud på en webbplats

Hur är det enklast att lägga till ljud på en webbsida?

Yahoo Media Player är absolut en av dem.

Användning av Yahoo Media Player är en annan väg. Du behöver bara låta Yahoo göra arbetet med att spela låtar.

Den kan spela mp3 och en rad andra format. Genom en enkel rad kod kan du lägga till den i din webbsida och enkelt omvandla en HTML-sida till en professionell spellista.

Yahoo Media Player

Exempel

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

Prova det själv

Användning av Yahoo Media Player är gratis. För att använda den behöver du lägga till detta JavaScript i sidans botten:

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

Därefter behöver du bara länka MP3-filen till din HTML, och JavaScript skapar automatiskt en spelknapp för varje låt:

<a href="song1.mp3">Spela låt 1</a>
<a href="song2.mp3">Spela låt 2</a>
...
...
...

Yahoo Media Player erbjuder dina användare en liten spelknapp, inte en fullständig spelare. Men när du klickar på knappen dyker den fullständiga spelaren upp.

Observera att spelaren alltid är fäst vid botten på fönstret. Klicka bara på den för att dra ut den.

Använd hyperlänkar

Om en webbsida innehåller länkar till mediafiler, använder de flesta webbläsare "hjälpapplikationen" för att spela upp filen.

Följande kodsnutt visar en länk till en mp3-fil. Om användaren klickar på länken, startar webbläsaren "hjälpapplikationen" för att spela upp filen:

Exempel

<a href="song.mp3">Spela upp ljudet</a>

Prova det själv

Inkluderade ljud

När du inkluderar ljud i en webbsida eller som en del av en webbsida, kallas det inlineljud.

Om du planerar att använda inlineljud i webbapplikationer, måste du vara medveten om att många tycker att inlineljud är irriterande.Observera också att användaren kanske redan har stängt av alternativet för inlineljud i webbläsaren.

Vår bästa rekommendation är att endast inkludera dem där användaren vill höra inlineljud. Ett positivt exempel är när användaren behöver höra en inspelning och klicka på en länk, då öppnas sidan och inspelningen spelas upp.

HTML 4.01-mediabetag

Etikett Beskrivning
<applet> Inte rekommenderat. Definiera inbäddad applet.
<embed> Inte rekommenderat i HTML4, tillåtet i HTML5. Definiera inbäddade objekt.
<object> Definiera inbäddade objekt.
<param> Definiera parametrar för objektet.

HTML 5-mediabetag

Etikett Beskrivning
<audio> Etiketten definierar ljud, till exempel musik eller andra ljudströmmar.
<embed> Etiketter definierar inbäddat innehåll, till exempel plug-in.