Dacă scorul Google despre cum să rulați muzică prin CSS, probabil că veți găsi:
- Ceva despre jocul Counter Strike: Sursa
- Ceva despre play-în timpul funcțiilor sau tac-înainte, sau ceva care arata foarte promițătoare, dar în realitate este numai articolul de formare mediocre.
Nu credem că sunetele diferite sunt o parte integrantă a oricărui site web, dar este o rușine că până acum, prin CSS, nu a existat nici o modalitate de a începe sunetul. Pentru a porni sunetul, atunci când cursorul mouse-ului atinge o anumită zonă a paginii, trebuie să ne bazăm pe HTML5 și / sau Flash. Dar aproape că nimeni nu vrea să se ocupe de Flash, nu? Să ne face prin HTML5, care ne permite să ruleze muzica prin intermediul unui nou element de «audio» (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). Pentru a stoarce la maximum posibilitățile din browser, facem acest lucru folosind atât sursa MP3 (pentru WebKit și IE), cât și sursa OGG (pentru Firefox și Opera).
Dacă introduceți codul exact așa cum este arătat mai sus, atunci este puțin probabil să vedeți sau să auziți nimic. Dacă aveți nevoie de un mic element al playerului, atunci asigurați-vă că utilizați atributul controlorilor ("controale audio"). Dacă trebuie să auziți player-ul, dar nu-l vedeți, utilizați elementul "auto-automat". Sau utilizați ambele elemente.
Scopul nostru este de a face redarea sunetului atunci când cursorul mouse-ului este plutind peste un anumit element (de exemplu, un element de meniu). Din nou, din nefericire, nu putem face ca elementul "audio" să funcționeze prin CSS, trebuie să folosim j # 097; vascript. Pentru a reda sunetul cu j # 097; vascript, folosiți următorul cod:
Să folosim jQuery deoarece simplifică foarte mult fluxul de lucru prin selectarea și crearea unui eveniment.
Să ne asigurăm că sunetul începe să fie redat când cursorul mouse-ului depășește un anumit element:
Pagina de îngrijire a aplicației mobile Goodfoot utilizează o tehnică similară pentru a introduce sunete atunci când plasați cursorul peste capul unui om de zăpadă. Aici totul este implementat prin introducerea unui nou element audio în DOM cu fiecare mutare pe caracter:
Acest lucru poate fi ușor îmbunătățit pentru a sprijini formatul OGG. Nu credem că atributul nivelului sunetului va funcționa, deoarece nu am văzut niciodată sprijinul pentru această funcție oriunde. Toate acestea au fost modernizate de Jeffrey Way (Jeffrey Way):
Suntem mulțumiți de această abordare, deoarece aici totul funcționează așa cum ar trebui. După ce sunetul este redat, acesta este stocat în memoria cache, ceea ce accelerează foarte mult lucrul la următoarea descărcare.
Un alt mod de a implementa acest lucru este introducerea în pagină a trei elemente audio.
Și apoi urmează alegerea alternativă a fiecăruia dintre ele:
Repetiții și probleme: impunerea de sunete
Inițial, unii vor să încorporeze sistemul în meniul de navigare atunci când se deplasează peste file. Aici apare imediat problema: funcția .play () este pornită mult mai rapid și mai des decât puteți asculta fiecare sunet separat lansat. Același sunet nu poate fi redat pe lângă ceea ce se joacă deja. Prin urmare, funcțiile .play () ulterioare nu sunt pornite până când nu este terminată prima buclă de funcționare.
Inițial, am încercat să folosim funcția .pause () pentru a opri redarea și a porni din nou funcția, dar nu a ajutat-o. Se face o pauză, dar funcția .play () nu dorește să fie reluată.
Cea mai bună metodă am găsit este duplicarea elementului pentru fiecare element de meniu. Astfel, fiecare element de meniu va avea o secțiune proprie a fișierului audio, care va fi redat de funcții individuale, creând o suprapunere.