Ako pridať zvuk na webovú stránku HTML5

Anonim

HTML5 uľahčuje pridávanie zvuku a hudby na vaše webové stránky elementom. V skutočnosti je najťažšia vec, ktorú musíte urobiť, aby ste vytvorili viac zdrojov, ktoré potrebujete, aby ste sa uistili, že vaše zvukové súbory budú prehrávať na najrôznejších prehliadačoch.

Výhodou používania HTML5 je, že môžete vložiť zvuk iba pomocou niekoľkých značiek. Prehliadače potom prehrávajú zvuk rovnako ako pri zobrazení obrázka

IMG element.

Ako pridať zvuk na webovú stránku HTML5

Budete potrebovať editor HTML, zvukový súbor (najlepšie vo formáte MP3) a prevodník zvukových súborov.

  1. Najprv potrebujete zvukový súbor. Najlepšie je nahrávať súbor ako MP3 (

    .mp3), pretože má vysokú kvalitu zvuku a podporuje väčšinu prehliadačov (Android 2.3, Chrome 6+, IE 9+, iOS 3+ a Safari 5+).

  2. Previesť súbor do formátu Vorbis (

    .ogg) na pridanie do programu Firefox 3.6+ a Opera 10.5+. Môžete použiť konvertor, ako je ten, ktorý sa nachádza na stránke Vorbis.com. Môžete tiež previesť MP3 do formátu súboru WAV (

    .wav), aby získali podporu Firefoxu a opery. Odporúčam vám uverejniť súbor vo všetkých troch typoch, len pre bezpečnosť, ale najviac, čo potrebujete, sú MP3 a jeden ďalší typ.

  3. Nahrajte všetky zvukové súbory na váš webový server a poznačte si adresár, v ktorom ste ich uložili. Je vhodné umiestniť ich do podadresára iba pre zvukové súbory, ako väčšina návrhárov ukladá obrázky do

    snímky adresár.

  4. Pridajte

    AUDIO do vášho súboru HTML, kde chcete zobraziť ovládacie prvky zvukových súborov.

  5. miesto

    SOURCE prvky pre každý zvukový súbor, ktorý odovzdávate vo vnútri

    AUDIO element:

    1. Každý HTML vo vnútri

      AUDIO element bude použitý ako záložný pre prehliadače, ktoré nepodporujú

      AUDIO element. Takže pridajte nejaký HTML. Najjednoduchším spôsobom je pridať HTML, aby ste mohli stiahnuť súbor, ale na prehrávanie zvuku môžete použiť aj metódy vkladania HTML 4.01. Tu je jednoduchá záloha:

      Váš prehliadač nepodporuje prehrávanie zvuku, stiahnite súbor: MP3,

    2. Vorbis, WAV

  7. Posledná vec, ktorú musíte urobiť, je zatvoriť prvok AUDIO:

    1. Keď skončíte, váš HTML by mal vyzerať takto:

    4. Váš prehliadač nepodporuje prehrávanie zvuku, stiahnite súbor:

    5. MP3,

    6. Vorbis,

    7. WAV

Ďalšie tipy

  • Uistite sa, že používate HTML5 doctype (), aby váš HTML overil
  • Pozrite si atribúty, ktoré sú k dispozícii pre prvok, aby ste zistili, aké ďalšie možnosti môžete pridať do svojho prvku.
  • Všimnite si, že sme HTML nastavili tak, aby predvolene obsahovali ovládacie prvky a vypínali automatické prehrávanie. Môžete to samozrejme zmeniť, ale nezabudnite, že veľa ľudí nájde zvuk, ktorý sa spustí automaticky /, že nemôžu kontrolovať, aby boli v najlepšom prípade nepríjemné a často sa v prípade, že sa to stane, často opustí stránku.

Redakcia Choice