player de radio folosind HTML5 - audio, educație W3

Înainte de apariția HTML5 a fost extrem de incomod pentru a adăuga audio în paginile web. De ani de zile, Flash a fost singura modalitate de a încorpora conținutul audio - dar cu introducerea etichetei

În acest articol ne uităm la tag-ul

sintaxa tag-ul audio de bază

element

Browserul va crea un player simplu pe o pagină web. Mai jos este un membru

element

src conține calea către fișierul audio pe care doriți să îl redați. atribut Src poate fi de asemenea substituit cu unul sau mai multe etichete în interiorul elementului audio:

Acest lucru vă permite să folosiți mai multe elemente . pentru a specifica mai multe formate audio. Pe măsură ce va face diferite browsere suporta formate diferite, astfel încât în ​​mod ideal, trebuie să specificați mai multe formate pentru a permite jucătorului să lucreze în toate browserele. De exemplu:

autoplay - atribut permite redarea audio în mod automat, imediat ce se încarcă pagina.

Notă: Rețineți că autorun enervează mulți utilizatori. Dacă utilizați caracteristica AutoRun, da utilizatorului posibilitatea de a întrerupe redarea.

autobuffer - un atribut care permite să descarce automat fluxul audio, imediat după ce se încarcă pagina fără redare automată. Acest atribut este valabil numai în cazul în care nici un atribut AutoPlay.

buclă - un atribut vă permite să joace câteva ori după sfârșitul piesei.

Putem schimba, de asemenea, atributul src:

Revenind la audio.play metodei și audio.pause () (), puteți începe sau întrerupe redarea fișierului. parametru Audio.volume specifică volumul, iar timeupdate de tratare a evenimentului se execută de fiecare dată când redarea este actualizat. Aceste tehnici simple va fi suficient pentru a crea un jucător de radio.

Să ne uităm la aceste caracteristici în acțiune! Următorul script va crea un element

Script-ul de mai sus se aplică la acest cod html:

Dacă vrei să afli mai multe despre API-ul audio, vă sugerez să faceți cunoștință cu articolul Simon Peters „tot ce trebuie să știți despre HTML5 video și audio“.

Codec suport în browsere

Pentru a sprijini mai multe browsere, trebuie să specificați aceeași piesă audio în mai multe formate. Așa cum am menționat mai devreme, puteți specifica mai multe formate diferite, folosind tag-uri . plasat în interiorul elementului

Pentru compatibilitate cu browserele vechi care nu suporta elementul

Streaming prin elementul

Am făcut player-ul folosind tag-ul audio. poate reda fișiere audio în diferite browsere. Cu toate acestea, acum ne confruntăm cu întrebarea - cum să se ocupe de streaming de date audio folosind elementul

Creați HTML5-player

Vom folosi fluxul audio furnizat de NRK de radio norvegian. NRK oferă fiecărui canal radio în două formate: Ogg și MP3, astfel încât să avem două surse pentru streaming audio.

Date pentru a crea jucător

Stabilirea structurii si design-player

Urmatorul nostru pas este de a crea structura HTML pentru player-ul și comenzile sale:

fiecare element și

Ea are propriul identificator ID. astfel încât să puteți referi cu ușurință la aceste elemente și să atribuie manipulare eveniment pentru a controla player-ul utilizând API-ul audio.

Fiecare buton este încadrată folosind CSS:

De asemenea, trebuie remarcat faptul că am cerut clasa .radio-implicit pentru elementul

. care conține toate player-ul. Acum putem folosi pentru a defini cu ușurință stiluri în CSS:

Cu capacitatea de a instala mai multe clase într-un singur element în HTML, putem crea stiluri de joc (skin-uri) și a comuta între ele, doar prin schimbarea uneia dintre clasele:

Va forța jucătorul să lucreze

Ultimul nostru pas în utilizarea jPlayer plugin - creați funcționalitatea necesară. Mai întâi trebuie să vă conectați la script-uri HTML jQuery bibliotecă și jPlayer plugin-ul, precum și propriul fișier de cod pentru a configura player (player.js), adăugând următorul cod:

În primul rând, a crea un obiect jQuery variabilă, în care este generat elementul

În continuare, vom obține date despre fluxul audio necesar în format JSON folosind AJAX:

Atunci când AJAX-interogare va returna datele de pe server, trebuie să evite toate canalele primite în buclă, și adăugați-l la lista de selecție a canalelor jucător. Lista de selecție de canale - în cazul nostru este pur și simplu o listă de imagini de la logo-ul fiecărui canal și de tratare a evenimentului onclick pe fiecare imagine pentru a schimba fluxul audio în player, care permite utilizatorului să selecteze oricare dintre canalele disponibile.

Funcția atașat la un eveniment onclick pentru fiecare imagine în lista de selectare canal conține apelul metoda șterge fișierul curent fiind jucat și metoda de selectare a unui nou element de curgere

Plug jPlayer avea grijă de curățare vechi flux și instalarea unui nou element

Codul de mai sus se adaugă jPlayer un element cu #player ID. configurarea apel pluginului am stabilit elementul

În funcția gata am înființat un post de radio în mod implicit.

În cele din urmă, subliniem plugin-ul de identificare jPlayer diferite butoane de control și înființat de tratare a evenimentelor la redarea audio, pentru a schimba timpul jocului nostru pe player.

concluzie

În acest articol am încercat să ia în considerare în detaliu elementul HTML5