HTML5 facilitează adăugarea de sunet și muzică la paginile dvs. Web cu elementul. De fapt, cel mai greu lucru este să creați sursele multiple de care aveți nevoie pentru a vă asigura că fișierele dvs. de sunet se difuzează pe cea mai largă varietate de browsere.
Beneficiul utilizării HTML5 este că puteți să încorporați sunetul folosind doar câteva etichete. Prin urmare, browserele redă sunetul exact așa cum ar afișa o imagine atunci când utilizați un element IMG .
Cum se adaugă sunet pe o pagină Web HTML5
Veți avea nevoie de un editor HTML , un fișier audio (preferabil în format MP3) și un convertor de fișiere audio.
- În primul rând, aveți nevoie de un fișier de sunet. Cel mai bine este să înregistrați fișierul ca MP3 ( .mp3 ), deoarece acesta are o calitate ridicată a sunetului și este susținut de cele mai multe browsere (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ și Safari 5+).
- Convertiți fișierul în format Vorbis ( .ogg ) pentru a adăuga suportul Firefox 3.6+ și Opera 10.5+. Aveți posibilitatea să utilizați un convertor ca cel găsit pe Vorbis.com. De asemenea, puteți converti MP3-ul într-un format de fișier WAV ( .wav ) pentru a obține suportul Firefox și Opera. Vă recomandăm postarea fișierului dvs. în toate cele trei tipuri, doar pentru securitate, dar cel mai mult aveți nevoie de MP3 și de un alt tip.
- Încărcați toate fișierele audio pe serverul dvs. web și notați directorul în care le-ați stocat. Este o idee bună să le plasați într-un sub-director doar pentru fișiere audio, așa cum majoritatea designerilor salvează imagini într-un director de imagini .
- Adăugați elementul AUDIO în fișierul HTML unde doriți să fie afișate comenzile pentru fișierele audio.
- Plasați elementele SOURCE pentru fiecare fișier audio pe care îl încărcați în interiorul elementului AUDIO :
-
- Orice cod HTML din elementul AUDIO va fi utilizat ca rezervă pentru browserele care nu acceptă elementul AUDIO . Deci, adăugați câteva HTML. Cea mai ușoară cale este să adăugați un cod HTML pentru a le permite să descarce fișierul, dar puteți utiliza și metode de încorporare HTML 4.01 pentru a reda sunetul. Iată un simplu backup:
Browserul dvs. nu acceptă redarea audio, descărcați fișierul:
- Ultimul lucru pe care trebuie să-l închideți este să închideți elementul AUDIO :
- Când ați terminat, codul dvs. HTML ar trebui să arate astfel:
Sfaturi suplimentare
- Asigurați-vă că utilizați documentul HTML5 doctype () astfel încât codul dvs. HTML să fie validat
- Examinați atributele disponibile pentru element pentru a vedea ce alte opțiuni puteți adăuga la elementul dvs.
- Rețineți că am creat codul HTML pentru a include controalele în mod prestabilit și pentru a avea opțiunea de dezactivare automată. Desigur, puteți schimba acest lucru, dar amintiți-vă că mulți oameni găsesc un sunet care începe automat / că nu pot controla pentru a fi enervant în cel mai bun caz și de multe ori va părăsi pagina când se întâmplă acest lucru.