HTML5 olakšava dodavanje zvuka i muzike na svoje web stranice sa elementom. Zapravo, najteža stvar je stvaranje više izvora koji su vam potrebni kako biste bili sigurni da se vaše zvučne datoteke igraju na najširim broju pretraživača.
Prednost korištenja HTML5 je u tome što možete ugrađivati zvuk samo pomoću nekoliko oznaka. Pretraživači zatim reprodukuju zvuk baš kao što bi prikazali sliku kada koristite IMG element.
Kako dodati zvuk na HTML5 web stranicu
Potreban vam je HTML Editor , zvučna datoteka (poželjno u MP3 formatu) i pretvarač zvučne datoteke.
- Prvo, potrebna vam je zvučna datoteka. Najbolje je snimiti datoteku kao MP3 ( .mp3 ) jer ima visok kvalitet zvuka i podržava većina pretraživača (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ i Safari 5+).
- Pretvorite datoteku u Vorbis format ( .ogg ) da biste dodali u Firefox 3.6+ i Opera 10.5+ podršku. Možete koristiti pretvarač kao što je pronađen na Vorbis.com. Takođe možete pretvoriti MP3 u WAV format datoteke ( .wav ) kako biste dobili podršku za Firefox i Opera. Preporučujem objavljivanje datoteke u sva tri tipa, samo za sigurnost, ali najviše vam je potrebno MP3 i još jedan tip.
- Postavite sve audio datoteke na svoj web server i zabeležite im direktor koji ste ih uskladili. Dobro je da ih stavite u pod-direktorij samo za audio datoteke, kao što većina dizajnera čuvaju slike u direktorijumu slika .
- Dodajte AUDIO element u vašu HTML datoteku gdje želite da se prikazuju kontrole audio datoteka.
- Postavite SOURCE elemente za svaku audio datoteku koju postavljate unutar elementa AUDIO :
-
- Svaki HTML unutar AUDIO elementa će se koristiti kao rezervni za pregledače koji ne podržavaju AUDIO element. Zato dodajte neki HTML. Najlakši način je dodavanje HTML-a da ih pustite da preuzmu datoteku, ali takođe možete koristiti HTML 4.01 metode ubacivanja kako biste reprodukovali zvuk. Evo jednostavnog povratka:
Vaš pretraživač ne podržava audio reprodukciju, preuzmite datoteku:
- Poslednja stvar koju treba da uradite je da zatvorite svoj AUDIO element:
- Kad završite, vaš HTML treba da izgleda ovako:
Dodatni saveti
- Obavezno koristite HTML5 doctype () tako da vaš HTML bude validiran
- Pregledajte atribute dostupne za element da biste videli koje druge opcije možete dodati svom elementu.
- Imajte na umu da smo podesili HTML da uključite kontrole po podrazumevanoj vrednosti i da autoplay bude isključen. Možete, naravno, to promeniti, ali zapamtite da mnogi ljudi pronalaze zvuk koji počinje automatski / koji ne mogu kontrolisati da bi u najboljem slučaju bio dosadan i često će napustiti stranicu kada se to dogodi.