Kako dodati zvok na spletno stran HTML5

HTML5 omogoča preprosto dodajanje zvoka in glasbe na svoje spletne strani z elementom. Dejstvo je, da je najtežja stvar ustvariti več virov, ki jih morate zagotoviti, da se vaše zvočne datoteke igrajo na najrazličnejših brskalnikih.

Prednost uporabe HTML5 je, da lahko vdelate zvok samo z uporabo nekaj oznak. Brskalniki nato predvajajo zvok, tako kot bi prikazali sliko, ko boste uporabili element IMG .

Kako dodati zvok na spletno stran HTML5

Potrebovali boste urejevalnik HTML , zvočno datoteko (po možnosti v formatu MP3) in zvočni pretvornik datotek.

  1. Najprej potrebujete zvočno datoteko. Najbolje je, da datoteko posnamete kot MP3 ( .mp3 ), saj ima to visoko kakovost zvoka in je podprta z večino brskalnikov (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ in Safari 5+).
  2. Pretvorite svojo datoteko v format Vorbis ( .ogg ), da dodate v Firefox 3.6+ in Opera 10.5+ podporo. Uporabite lahko pretvornik, podoben tistemu, ki ga najdete na Vorbis.com. Prav tako lahko pretvorite svoj MP3 v format WAV datoteke ( .wav ), da dobite podporo za Firefox in Opera. Priporočam, da objavite svojo datoteko v vseh treh vrstah, samo za varnost, vendar najbolj potrebujete MP3 in eno drugo vrsto.
  3. Naložite vse zvočne datoteke v spletni strežnik in si zapomnite imenik, v katerem ste jih shranili. Dobro je, da jih postavite v podimenik samo za zvočne datoteke, kot večina oblikovalcev, shranite slike v imeniku slik .
  4. Dodajte element AUDIO v datoteko HTML, kamor želite prikazati nadzor zvočnih datotek.
  5. Postavite elemente SOURCE za vsako zvočno datoteko, ki jo naložite znotraj elementa AUDIO :
  1. Vsak HTML znotraj elementa AUDIO bo uporabljen kot nadomestna možnost za brskalnike, ki ne podpirajo elementa AUDIO . Dodajte nekaj HTML. Najlažji način je dodati HTML, s katerim lahko prenesete datoteko, vendar lahko za predvajanje zvokov uporabite tudi metode za vdelavo HTML 4.01. Tukaj je preprosta povratna povezava:

    Vaš brskalnik ne podpira predvajanja zvoka, prenesite datoteko:

    1. MP3 ,
    2. Vorbis , WAV
  2. Zadnja stvar, ki jo morate storiti, je zapreti vaš AUDIO element:
  3. Ko končate, mora vaš HTML izgledati takole:
    1. Vaš brskalnik ne podpira predvajanja zvoka, prenesite datoteko:

    2. MP3 ,
    3. Vorbis ,
    4. WAV

Dodatni nasveti

  1. Uporabite HTML5 doctype (), tako da bo vaš HTML potrdil
  2. Oglejte si atribute, ki so na voljo elementu in si oglejte, katere druge možnosti lahko dodate v element.
  3. Upoštevajte, da smo nastavili HTML za privzete nastavitve in samodejni izklop izključili. Seveda lahko to spremenite, vendar ne pozabite, da mnogi ljudje najdejo zvok, ki se samodejno zažene / ne more nadzorovati, da bi bil v najboljšem primeru nadloga, in pogosto zapusti stran, ko se to zgodi.