Crearea unui player audio cu html5

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

, deoarece vom adăuga controale la acesta împreună cu decodificarea textului.

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