Dezvoltăm radioul online cu jquery și jplayer

Cine nu-i place muzica din lume? Astăzi vă vom spune cum, utilizând jQuery și pluginul jPlayer, creați un radio online folosind bazele de date j # 097, vascript, PHP și MySQL.





Crearea unei baze de date


Acum avem o bază de date și un tabel pentru stocarea informațiilor de bază despre melodiile care vor fi difuzate pe radioul nostru. Acum trebuie să umplem masa. Selectați unele fișiere mp3 și introduceți în baza de date următorul cod:


Baza de date este acum gata.







Desigur, va trebui să creăm o pagină în HTML. Mai întâi, luați o copie descărcată a pluginului jPlayer și a pluginului jQuery. Dezarhivați fișierele, apoi încărcați jc / și skin / folderele pe serverul dvs.

Apoi, creați un fișier numit demo.html și adăugați următorul cod:


Acest cod a fost preluat din aplicațiile demo ale pluginului jPlayer. Acesta este un cod HTML simplu care încarcă fișierele necesare j # 097; vascript-uri (jQuery + jPlayer plug-in), precum și codul CSS și HTML necesar pentru a afișa playerul. În momentul de față, acesta nu va fi afișat corect: trebuie să adăugăm mai multe lucruri de la jQuery pentru ao anima. În curând vom reveni la acest lucru.

Aducem fișierele din baza de date

Acum trebuie să creați un fișier PHP care să încarce o melodie aleatorie din baza de date și să afișeze URL-ul fișierului, precum și numele artistului și numele piesei: toate acestea se pot face cu Ajax. Mai întâi, descărcați o copie a ezSQL. pe care le folosim pentru a gestiona interogările în baza de date (Aici puteți vedea un ghid complet pentru utilizarea ezSQL). Dezarhivați fișierele și descărcați fișierele ez_sql_core.php și ez_sql_mysql.php pe server.

Odată ce faceți acest lucru, creați un fișier pe serverul numit getong.php. Inserați următorul cod:


Nimic complicat: am inclus fișierele ezSQL necesare, am creat o conexiune la baza de date și apoi am solicitat o linie din tabela de melodii. Se afișează 3 valori (fișier URL, artist, titlu cântec), într-o vizualizare împărțită.

Și aproape că am terminat. Acum trebuie să folosim un pic de jQuery pentru a crea o cerere de melodie prin Ajax și fișierul nostru getsong.php. Apoi vom folosi pluginul jPlayer pentru a reda.

Deschideți fișierul demo.html și lipiți-l în locul afișat după linia 10:

Opțiuni de extindere a scriptului







Trimiteți-le prietenilor: