Kako dodati zvuk na HTML5 web stranicu

HTML5 olakšava dodavanje zvuka i glazbe na vaše web stranice s elementom. Zapravo, najteže je napraviti više izvora potrebnih da biste bili sigurni da se vaše zvučne datoteke reproduciraju na najširem rasponu preglednika.

Prednost korištenja HTML5 je da možete ugraditi zvuk samo pomoću nekoliko oznaka. Preglednici zatim reproduciraju zvuk baš kao što bi prikazivali sliku prilikom korištenja IMG elementa.

Kako dodati zvuk na HTML5 web stranicu

Trebat će vam HTML uređivač , zvučna datoteka (po mogućnosti u MP3 formatu) i pretvornik zvučnih datoteka.

1. Prvo, potrebna vam je zvučna datoteka. Najbolje je snimiti datoteku kao MP3 ( .mp3 ) jer to ima visoku kvalitetu zvuka i podržava većina preglednika (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ i Safari 5+).
2. Pretvorite datoteku u Vorbis format ( .ogg ) za dodavanje u Firefox 3.6+ i Opera 10.5+ podršku. Možete koristiti pretvarač poput onog pronađen na Vorbis.com. Također možete pretvoriti MP3 u WAV format datoteke ( .wav ) da biste dobili Firefox i Opera podršku. Preporučujem postavljanje datoteke u sve tri vrste, samo za sigurnost, ali najviše vam je potrebna MP3 i jedna druga vrsta.
3. Prenesite sve audio datoteke na svoj web poslužitelj i zapišite imenik u kojem ste ih pohranili. Dobro je staviti ih u poddirektorij samo za audio datoteke, kao što većina dizajnera sprema slike u imeniku slika .
4. Dodajte AUDIO element u svoju HTML datoteku gdje želite da se kontrola zvuka prikaže.
5. Stavite SOURCE elemente za svaku zvučnu datoteku koju prenesete unutar AUDIO elementa:

1. Svaki HTML unutar AUDIO elementa upotrijebit će se kao zamjena za preglednike koji ne podržavaju AUDIO element. Zato dodajte neki HTML. Najjednostavniji način je dodavanje HTML-a da bi ih preuzeli, ali možete koristiti i HTML 4.01 metode ugrađivanja za reprodukciju zvuka. Ovdje je jednostavan zamisao:

   Vaš preglednik ne podržava reprodukciju zvuka, preuzmite datoteku:

   1. MP3 ,
   2. Vorbis , WAV
2. Posljednja stvar koju trebate učiniti je zatvoriti svoj AUDIO element:
3. Kada završite, HTML bi trebao izgledati ovako:
   4. Vaš preglednik ne podržava reprodukciju zvuka, preuzmite datoteku:

   5. MP3 ,
   6. Vorbis ,
   7. WAV

Dodatni savjeti

1. Svakako upotrebljavajte HTML5 doctype () kako bi HTML potvrdio
2. Pregledajte atribute dostupne elementu da biste vidjeli koje druge opcije možete dodati elementu.
3. Imajte na umu da smo postavili HTML da uključimo kontrole prema zadanim postavkama i isključili automatsku reprodukciju. Možete, naravno, promijeniti to, ali imajte na umu da mnogi ljudi pronađu zvuk koji automatski pokreće / da ne može kontrolirati da je u najboljem slučaju neugodno i često će napustiti stranicu kada se to dogodi.