HTML audio

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 dina audiofiler 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 plugins

Webbläsarplugin är en liten datorprogramvara som utökar webbläsarens standardfunktioner.

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

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

Dessa taggar definierar behållare för resurser (vanligtvis inte HTML-resurser), de visas antingen av webbläsaren eller av externa plugins, beroende på typ.

Använd <embed>-elementet

<embed>-taggen definierar en behållare för extern (icke 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 själv

Fråga:

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

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

Använd <object>-elementet

<object tag>-taggen kan också definiera en behållare för extern (icke 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 själv

Fråga:

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

Använd HTML5 <audio>-elementet

<audio>-elementet ä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 själv

Det översta exemplet använder en mp3-fil, så den fungerar i Internet Explorer, Chrome och Safari.

För att göra detta ljud lika effektivt i Firefox och Opera, lades en fil av typen ogg till. Om detta misslyckas visas ett felmeddelande.

Fråga:

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

Anmärkning: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 själv

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

Fråga:

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

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

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

Hur är det enklaste sättet att lägga till ljud till en webbsida?

Yahoo Media Player är definitivt en av dem.

Användning av Yahoo Media Player är en annan väg. Du behöver bara låta Yahoo ta hand om spelningen av låtarna.

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>

Prova själv

Användning av Yahoo 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 sång 1</a>
<a href="song2.mp3">Spela sång 2</a>
...
...
...

Yahoo Media Player erbjuder användarna 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 lä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 kodfragment 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 själv

Inlineljud

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. Samt observera 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 multimedia-taggar

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

HTML 5 multimedia-taggar

Taggar Beskrivning
<audio> Taggen definierar ljud, till exempel musik eller andra ljudströmmar.
<embed> Taggar definierar inbäddat innehåll, till exempel plugins.