Så här lägger du till ljud på en HTML5 webbsida

HTML5 gör det enkelt att lägga till ljud och musik på dina webbsidor med elementet. Faktum är att det svåraste att göra är att skapa flera källor som du behöver för att se till att dina ljudfiler spelar på det bredaste utbudet av webbläsare.

Fördelen med att använda HTML5 är att du kan bädda in ljud bara genom att använda ett par taggar. Webbläsarna spelar sedan ljudet precis som att de skulle visa en bild när du använder en

IMG element.

Så här lägger du till ljud på en HTML5 webbsida

Du behöver en HTML-editor, en ljudfil (helst i MP3-format) och en ljudfilomvandlare.

1. Först behöver du en ljudfil. Det är bäst att spela in filen som en MP3 (

   .mp3) eftersom det här har hög ljudkvalitet och stöds av de flesta webbläsare (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ och Safari 5+).

2. Konvertera din fil till Vorbis-format (

   .ogg) för att lägga till i Firefox 3.6+ och Opera 10.5+ support. Du kan använda en omvandlare som en som finns på Vorbis.com. Du kan också konvertera din MP3 till ett WAV-filformat (

   .wav) för att få Firefox och Opera stöd. Jag rekommenderar att du skickar in din fil i alla tre typer, bara för säkerhet, men det du behöver är MP3 och en annan typ.

3. Ladda upp alla ljudfiler till din webbserver och notera katalogen du lagrade dem in. Det är en bra idé att placera dem i en underkatalog bara för ljudfiler, som de flesta designers sparar bilder i en

   bilder katalogen.

4. Lägg till

   AUDIO element till din HTML-fil där du vill att ljudfilerna ska visas.

5. Plats

   KÄLLA element för varje ljudfil du laddar upp inuti

   AUDIO element:

6. 1. Vilken HTML som helst inom

      AUDIO element kommer att användas som en återgång för webbläsare som inte stöder

      AUDIO element. Så lägg till lite HTML. Det enklaste sättet är att lägga till HTML för att låta dem ladda ner filen, men du kan också använda HTML 4.01-inbäddningsmetoder för att spela upp ljudet. Här är en enkel återgång:

      Din webbläsare stöder inte ljudavspelning, ladda ner filen: MP3,

   2. Vorbis, WAV

7. Det sista du behöver göra är att stänga ditt AUDIO-element:

   1. När du är klar ska din HTML se ut så här:

   4. Din webbläsare stöder inte ljudavspelning, ladda ner filen:

   5. MP3,

   6. Vorbis,

   7. WAV

Ytterligare tips

• Var noga med att använda HTML5-doktypen () så att din HTML kommer att validera
• Granska attributen som är tillgängliga för elementet för att se vilka andra alternativ du kan lägga till i ditt element.
• Observera att vi ställer in HTML-koden för att inkludera kontroller som standard och autoplay är avstängd. Du kan förstås ändra det, men kom ihåg att många människor hittar ljud som startar automatiskt / att de inte kan kontrollera att de är irriterande i bästa fall och kommer ofta att lämna sidan när det händer.