Există două abordări pentru a crea aproape orice. Primul - este de a prelua problema cu năpusti, în curs de dezvoltare de la întreg la privat, conuri de umplere de probleme în care acestea apar, și în speranța că veți înțelege în toate. Al doilea este de a crea o serie de teste simple: dezvoltarea de la privat la întreg. verificând fiecare pas înainte de a folosi fructele muncii lor pentru a crea o lucrare finală, finalizată.
Fiecare dintre aceste două metode are avantajele sale, dar a doua, de regulă, conduce la un rezultat mai bun. Aici voi demonstra a doua abordare, în dezvoltarea prototipului original al unui player audio web, cu care v-am prezentat în prima parte a acestei serii de articole.
Elemente originale
Mai întâi de toate, să ne asigurăm că putem reda fișierul audio pe pagină. Aici folosesc Track 24 din albumul Ghosts III al grupului NIN sub licența Creative Commons:
Deoarece cele mai recente versiuni ale Firefox împreună cu alte browsere moderne acceptă acum. mp 3. aici folosesc doar acest codec. Am plasat articolul
După ce vă asigurați că sunetul funcționează, următoarea sarcină este să vă creați propriul UI pentru player.
Lucrați pentru îmbunătățirea treptată
Adăugat în partea de jos a paginii HTML, acest script scurtează, de fapt, playerul nostru audio într-un element simplu
Acum putem seta cu ușurință textul pentru orice element HTML.
Apoi, trebuie să facem butonul să facă ceva:
Crearea butonului mut
De asemenea, trebuie să creăm controale pentru volumul sonor. Cel mai simplu lucru este să faceți un buton "Mute" care utilizează un șablon foarte asemănător cu șablonul pentru butonul Redare / Pauză:
Această funcție este puțin brută: atunci când sunetul este pornit, acesta stabilește nivelul de volum al sunetului la maximul său maxim (în măsura în care sistemul permite), dar în acest moment acest lucru este acceptabil.
Crearea unui control al volumului
Apoi, avem nevoie de un control al volumului mai precis. Candidatul evident pentru acest control al UI este elementul "range".
Din păcate, nu există o metodă setAttributes. care vă permite să setați simultan valorile mai multor atribute. Cu toate acestea, pentru aceasta putem face o funcție destul de simplă:
Acum puteți seta atributele pentru controlul intervalului de volum folosind o linie de cod:
Rețineți că valorile minime și maxime ale controlerului corespund valorilor funcției muter ().
Apoi, adăugăm manipulatorul evenimentului în câmpul controlerului, setând volumul piesei audio la valoarea controlerului în cadrul funcției anonime:
Aici ne confruntăm cu prima problemă serioasă: din punct de vedere functional, reducând controlul de volum la 0 și faceți clic pe «Mut» - aceasta este aceeași, astfel încât schimbarea de stat să apară în buton. Cum putem face asta?
Sincronizarea comenzilor
Decizia mea este să abstracționez de la butoane și să privesc orice modificare a volumului elementului însuși
Mai este încă un lucru care trebuie rezolvat. Când piesa muzicală se termină, muzica ar trebui să revină la început, iar butonul de redare ar trebui să afișeze "Redare" în loc de "Pauză" sau "Stop":
Acest cod presupune că odată ce script-ul este încărcat, toate condițiile vor fi ideale: că browser-ul suportă HTML5 și toate funcțiile API, care este am folosit, și că pista audio este încărcat imediat. Dar acest lucru nu este întotdeauna cazul: de exemplu, Android 2 și mai mult nu suportă evenimentul. pentru audio. Există modalități de a obține în jurul valorii de acest lucru și multe folbekov pe care am putea adăuga, dar nu va acorda o atenție pentru a le astăzi.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima schimbare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
Din Paris (în fotografie), unde a avut loc recent întâlnirea grupului de lucru CSS, au apărut știri interesante: proprietățile din grilă și decalajul dintre grilă și coloană, precum și diferența dintre ele ...