Kuidas lisada heli HTML5 veebilehele

HTML5 muudab selle elemendi veebisaitidega heli ja muusika hõlpsaks. Tegelikult on kõige raskem asi luua mitmesuguseid allikaid, mida peate tagama, et teie helifailid mängiksid kõige laias valikus brauseritega.

HTML5-i kasutamise eeliseks on see, et saate hõivata lihtsalt mõne silti abil. Seejärel mängivad brauserid heli nii, nagu oleks IMG- elemendi kasutamisel kuvatud pilt.

Kuidas lisada heli HTML5 veebilehele

Teil on vaja HTML-redaktorit , helifaili (eelistatavalt MP3-vormingus) ja helifailide muundurit.

  1. Esiteks, vajate helifaili. Parim on faili salvestamine MP3-vormingus ( .mp3 ), kuna see on kõrge helikvaliteediga ja seda toetavad enamik brauseritest (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ ja Safari 5+).
  2. Teisenda faili Vorbis-vormingus ( .ogg ), et lisada Firefox 3.6+ ja Opera 10.5+ tuge. Võite kasutada konverterit nagu see, mida leidis Vorbis.com. Võite ka teisendada oma MP3 WAV-failivormingus ( .wav ), et saada Firefoxi ja Opera tugi. Soovitan postitada oma faili kõigis kolmes tüübis, turvalisuse huvides, kuid kõige rohkem vaja on MP3 ja veel üks tüüp.
  3. Laadige kõik helifailid oma veebiserverisse üles ja märkige kataloog, kuhu neid salvestasite. Hea mõte on asetada need alamkataloogi ainult helifaile, nagu enamik disainereid päästa pilte kataloogis.
  4. Lisage AUDIO elementi oma HTML-faili, kuhu soovite helifailide juhtelemendid kuvada.
  5. Asetage SOURCE elemendid iga AUDIO elemendi üles laaditud helifaili jaoks:
  1. Mis tahes AUDIO- elemendis olevat HTML-i kasutatakse tagasihoidlikena brauseritele, mis ei toeta AUDIO- elementi. Nii et lisa mõni HTML. Lihtsaim viis on HTML-i lisamine faili alla laadimiseks, kuid heli esitamiseks võite kasutada ka HTML 4.01 sisestamise meetodeid. Siin on lihtne tagavara:

    Teie brauser ei toeta heli taasesitamist, laadige alla fail:

    1. MP3
    2. Vorbis , WAV
  2. Viimane asi, mida peate tegema, on sulgeda AUDIO elementi:
  3. Kui oled valmis, peaks teie HTML välja nägema järgmiselt:
    1. Teie brauser ei toeta heli taasesitamist, laadige fail alla:

    2. MP3
    3. Vorbis
    4. WAV

Lisateave

  1. Kasuta HTML5 doctype () kindlasti nii, et teie HTML valideeruks
  2. Vaadake üle elemendi jaoks kättesaadavad atribuudid, et näha, milliseid muid võimalusi saate oma elemendile lisada.
  3. Pange tähele, et me seadisime HTML-i, et lülitada juhtelemendid vaikimisi sisse ja automaatvideerimine välja lülitada. Muidugi saate seda muuta, kuid pidage meeles, et paljud inimesed leiavad heli, mis käivitub automaatselt / et nad ei saa enam parimal viisil häirivaks juhtida, ja jätavad sageli lihtsalt lehe, kui see juhtub.