Începând cu Firefox 3.5, Chrome 3, Opera 10.5 și Safari 4, putem beneficia de multe dintre noile caracteristici HTML 5, inclusiv suportul audio nativ, fără a fi nevoie de Flash. După cum veți găsi, noi doar pentru a crea noul
Elementul audio
Elementul audio acceptă o mulțime de atribute, în special:
Redare automata : Imediat redă fișierul când pagina se încarcă.
controale: Afișează player-ul pe pagină.
preîncărcare: Imediat începe tamponarea fișierului. (valori = none, auto, metadate)
src: Calea către numele fișierului. Este o practică mai bună de a încărca fișierul prin elementul sursă copil în schimb.
Mozilla și Webkit nu se înțeleg complet încă, când vine vorba de formatul audio. Firefox va dori să vadă un fișier .ogg, în timp ce browserele Webkit vor funcționa bine cu extensia .mp3 comună. Aceasta înseamnă că, cel puțin pentru moment, ar trebui să creați două versiuni audio. Vă recomandăm să utilizați un instrument online rapid și simplu, numit Media.io, pentru a converti mp3-ul în format ogg.
Când Safari încarcă pagina, nu va recunoaște formatul .ogg și o va sări peste aceasta și va trece la versiunea mp3, în consecință. Rețineți că IE, de obicei, nu acceptă acest lucru, iar Opera 10 și versiunile mai mici pot funcționa numai cu fișiere .wav.
Încărcarea audio cu jQuery
// Ușor modificat din versiunea video. $ (document) .ready (function () // Creați un element audio și setați-l la autoplay, // și afișați playerul atunci când se încarcă pagina var audio = $ ('', autoPlay:' autoplay ', comenzi:' controls '); // Apelați funcția addSource și treceți elementul audio // și calea către audio. addSource (audio, 'audioFile.ogg'); addSource (audio, 'audioFile.mp3'); // Când un eveniment este concediat ... $ ('a') faceți clic pe (funcția () // Adăugați elementele audio + sursă la pagina audio.appendTo ('body'); // Fadeout tag-ul de ancorare pentru a păstra utilizatorul dă din nou clic pe el. $ (this) .fadeOut ('slow'); return false;); // Adaugă un element sursă și îl adaugă elementului audio, reprezentat // de elem. funcția addSource (elem, calea) $ ('') .attr (' src ', calea) .appendTo (elem); );
Vă rugăm să rețineți că putem merge mult, mult mai departe cu acest lucru, inclusiv cum să oprim sunetul, să schimbăm volumul etc. Acest sfat rapid de trei minute este doar pentru a vă mânui apetitul. Dacă doriți să vă dați mai adânc, spuneți-ne și voi programa un tutorial complet de treizeci de minute pe această temă!
Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.
Share
Accentsconagua
