Az online rádiót jquery és jplayer segítségével fejlesztjük

Ki nem szereti a zenét a világon? Ma meg fogjuk mondani, hogy a jQuery és a jPlayer plugin használatával hozzon létre egy online rádiót j # 097; vascript, PHP és MySQL adatbázisok segítségével.

Adatbázis létrehozása

Most van egy adatbázist és egy táblázatot, amely a rádión játszott dalokról szóló alapvető információkat tárolja. Most be kell töltenünk az asztalt. Válasszon néhány mp3 fájlt, és adja meg az alábbi kódot az adatbázisban:

Az adatbázis készen áll.

Természetesen létre kell hoznunk egy oldalt a HTML-ben. Először vegye le a jPlayer plugin és a jQuery plugin letöltött példányát. Csomagolja ki a fájlokat, majd töltse fel a js / és skin / folders-t a kiszolgálóra.

Ezután hozzon létre egy demo.html nevű fájlt, és adja hozzá a következő kódot:

Ez a kód a jPlayer plugin demo alkalmazásaiból származik. Ez egy egyszerű HTML-kód, amely betölti a szükséges j # 097; vascript-fájlokat (jQuery + jPlayer plug-in), valamint a lejátszó megjelenítéséhez szükséges CSS és HTML kódot. Jelenleg nem jelenik meg helyesen: hozzá kell adnunk még néhány dolgot a jQuery-ből, hogy animáljuk. Hamarosan visszatérünk ehhez.

A fájlokat az adatbázisból kapjuk

Most létre kell hoznunk egy olyan PHP fájlt, amely betöl egy véletlenszerű dalt az adatbázisból, és megjeleníti a fájl URL-jét, valamint a művész nevét és a dal nevét: mindez az Ajax-nal végezhető el. Először töltsd le az ezSQL egy példányát. melyeket lekérdezéseket kezelünk az adatbázisban (itt láthatunk egy teljes útmutatót az ezSQL használatára). Távolítsa el a fájlokat, és töltse le az ez_sql_core.php és ez_sql_mysql.php fájlokat a kiszolgálóra.

Miután ezt megtette, hozzon létre egy fájlt a getong.php nevű szerveren. Illessze be a következő kódot:

Semmi bonyolult: bevezettük a szükséges ezSQL fájlokat, létrehoztunk egy kapcsolatot az adatbázis-hoz, majd egy sorból kértük a dalok tábláját. 3 érték (fájl URL, előadó, dal címe) jelenik meg, osztott nézetben.

És így közel vagyunk. Most egy kicsit jQuery-t kell használnunk, hogy egy Ajax-dal és a file getsong.php fájlunkon egy dalkérést hozzunk létre. Ezután a jPlayer plugint használjuk a játékhoz.

Nyissa meg a demo.html fájlt, és illessze be azt, ahol a 10 sor után jelenik meg:

Script bővítési lehetőségek