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, dakle, reproduciraju zvuk baš kao što bi prikazivali sliku prilikom korištenja
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.
- 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+).
- Pretvorite datoteku u Vorbis format (
.ogg) da biste dodali 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 svoj MP3 u format WAV 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.
- Prenesite sve audiodatoteke na svoj web poslužitelj i zabilježite imenik u kojem ste ih pohranili. Dobro je staviti ih u poddirektorij samo za audio datoteke, kao što većina dizajnera spremaju slike u
slika imenik.
- Dodaj
AUDIO elementu u svoju HTML datoteku gdje želite da se kontrola zvučne datoteke prikazuje.
- Mjesto
IZVOR elementi za svaku zvučnu datoteku koju prenesete unutar
AUDIO element:
-
-
- Bilo koji HTML unutar
AUDIO element će se koristiti 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: MP3,
-
Vorbis, WAV
- Bilo koji HTML unutar
-
Posljednje što trebate učiniti je zatvoriti svoj AUDIO element:
-
Kada završite, HTML bi trebao izgledati ovako:
-
-
-
Vaš preglednik ne podržava reprodukciju zvuka, preuzmite datoteku:
-
MP3,
-
Vorbis,
-
WAV
-
Dodatni savjeti
- Svakako upotrebljavajte HTML5 doctype () kako bi HTML potvrdio
- Pregledajte atribute dostupne elementu da biste vidjeli koje druge opcije možete dodati elementu.
- 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.