Slik legger du til lyd på en HTML5 webside

HTML5 gjør det enkelt å legge til lyd og musikk på websidene dine med elementet. Faktisk er det vanskeligste å opprette flere kilder du trenger for å sikre at lydfilene dine spilles på det bredeste utvalget av nettlesere.

Fordelen med å bruke HTML5 er at du kan legge inn lyd bare ved å bruke et par tagger. Nettleserne spiller da lyden akkurat som de ville vise et bilde når du bruker en

IMG element.

Slik legger du til lyd på en HTML5 webside

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

1. Først trenger du en lydfil. Det er best å registrere filen som en MP3 (

   .mp3) Dette har høy lydkvalitet og støttes av de fleste nettlesere (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ og Safari 5+).

2. Konverter filen til Vorbis-format (

   Ogg) for å legge til i Firefox 3.6+ og Opera 10.5+ støtte. Du kan bruke en omformer som en som finnes på Vorbis.com. Du kan også konvertere MP3 til et WAV-filformat (

   .wav) for å få Firefox og Opera støtte. Jeg anbefaler at du legger inn filen i alle tre typer, bare for sikkerhet, men det du trenger er MP3 og en annen type.

3. Last opp alle lydfiler til webserveren din og noter katalogen du lagret dem inn. Det er en god idé å plassere dem i en underkatalog bare for lydfiler, som de fleste designere lagrer bilder i en

   Bilder katalogen.

4. Legg til

   AUDIO element til HTML-filen din der du vil at lydfilkontrollene skal vises.

5. Sted

   KILDE elementer for hver lydfil du laster opp inne i

   AUDIO element:

6. 1. En hvilken som helst HTML inne i

      AUDIO elementet vil bli brukt som en tilbakebetaling for nettlesere som ikke støtter

      AUDIO element. Så legg til litt HTML. Den enkleste måten er å legge til HTML for å la dem laste ned filen, men du kan også bruke HTML 4.01-innlemmingsmetoder for å spille av lyden. Her er et enkelt fallback:

      Nettleseren din støtter ikke lydavspilling, laster ned filen: MP3,

   2. Vorbis, WAV

7. Det siste du trenger å gjøre er å lukke AUDIO-elementet ditt:

   1. Når du er ferdig, bør HTML-en din se slik ut:

   4. Nettleseren din støtter ikke lydavspilling, laster ned filen:

   5. MP3,

   6. Vorbis,

   7. WAV

Ytterligere tips

• Pass på at du bruker HTML5-doktypen () slik at HTML-en din vil validere
• Gå gjennom egenskapene som er tilgjengelige for elementet, for å se hvilke andre alternativer du kan legge til elementet ditt.
• Vær oppmerksom på at vi oppretter HTML-en for å inkludere kontroller som standard og at autoplay er slått av. Du kan selvfølgelig endre det, men husk at mange mennesker finner lyd som starter automatisk / at de ikke kan kontrollere å være irriterende i beste fall, og vil ofte bare forlate siden når det skjer.