Sådan tilføjes lyd til en HTML5 webside

HTML5 gør det nemt at tilføje lyd og musik til dine websider med elementet. Faktisk er det vanskeligste at lave de mange kilder, du har brug for for at sikre, at dine lydfiler spiller på det bredeste udvalg af browsere.

Fordelen ved at bruge HTML5 er, at du kan integrere lyd bare ved at bruge et par tags. Browserne spiller så lyden, ligesom de ville vise et billede, når du bruger en

IMG element.

Sådan tilføjes lyd til en HTML5 webside

Du skal bruge en HTML Editor, en lydfil (helst i MP3-format) og en lydfilkonverter.

1. For det første har du brug for en lydfil. Det er bedst at optage filen som en MP3 (

   .mp3) da dette har en høj lydkvalitet og understøttes af de fleste browsere (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ og Safari 5+).

2. Konverter din fil til Vorbis format (

   .ogg) for at tilføje i Firefox 3.6+ og Opera 10.5+ support. Du kan bruge en konverter som den, der findes på Vorbis.com. Du kan også konvertere din MP3 til et WAV-filformat (

   .wav) for at få Firefox og Opera support. Jeg anbefaler at sende din fil i alle tre typer, bare for sikkerhed, men det mest du har brug for er MP3 og en anden type.

3. Upload alle lydfiler til din webserver og noter den mappe, du har gemt dem i. Det er en god idé at placere dem i en undermappe kun for lydfiler, som de fleste designere gemmer billeder i en

   billeder vejviser.

4. Tilføj

   AUDIO element til din HTML-fil, hvor du vil have lydfilkontrolerne til at blive vist.

5. Placere

   KILDE elementer til hver lydfil, du uploader inde i

   AUDIO element:

6. 1. Enhver HTML inde i

      AUDIO element vil blive brugt som en tilbagesendelse til browsere, der ikke understøtter

      AUDIO element. Så tilføj nogle HTML. Den nemmeste måde er at tilføje HTML for at lade dem downloade filen, men du kan også bruge HTML 4.01-indlejringsmetoder til at afspille lyden. Her er et simpelt tilbageslag:

      Din browser understøtter ikke lydafspilning, download filen: MP3,

   2. Vorbis, WAV

7. Det sidste du skal gøre er at lukke dit AUDIO element:

   1. Når du er færdig, skal din HTML se sådan ud:

   4. Din browser understøtter ikke lydafspilning, download filen:

   5. MP3,

   6. Vorbis,

   7. WAV

Yderligere tips

• Sørg for at bruge HTML5 doctype (), så din HTML vil validere
• Gennemgå attributterne til elementet for at se, hvilke andre muligheder du kan føje til dit element.
• Bemærk, at vi opsætter HTML'en for at inkludere kontroller som standard, og autoplay er slukket. Du kan selvfølgelig ændre det, men husk at mange mennesker finder lyd, der starter automatisk / at de ikke kan kontrollere at være irriterende i bedste fald, og vil ofte bare forlade siden, når det sker.