Spotify Web API segítségével kellett megterveznünk és megvalósítanunk egy böngészőben futó Angular keretrendszerben írt zenelejátszó platformot. A cél az volt, hogy egy zenelejátszót szolgáltatást hozzunk létre amibe bármelyik nagyobb streaming platform felhasználója be tud jelentkezni. Az alkalmazáson belül egységes felület mellett a felhasználók böngészhetik a könyvtárukhoz hozzáadott zenéiket, albumjaikat, előadóikat és ezeket le is tudják játszani.
A platform jellegére a projektnek még visszatérünk egy későbbi cikkünkben, ebben a bejegyzésben csak a Spotify alkalmazásfejlesztési sajátosságaival fogunk foglalkozni. A cikksorozat ezen részében a Spotify Connect szolgáltatással és a Spotify Web API-val kapcsolatos tapasztalatainkat fogjuk megosztani.
A Spotify által biztosított fejlesztői eszközökről annyit előre érdemes megjegyezni, hogy trükkös velük egy klasszikus zenelejátszót megvalósítani. Tervezni egy ilyen alkalmazást könnyű, hiszen alapvetően a felhasználó zenekönyvtárának megjelenítésén kívül a szokásos zenelejátszási funkciók vezérlését kell megvalósítani a szoftverfejlesztés során. Az implementációt az nehezítette meg, hogy a Spotify zenelejátszó szolgáltatása két elemből áll ez nagymértékben megnehezíti a valósidejű vezérlést.
- Először is, ha zenét akarunk lejátszani egy böngészőben akkor be kell léptetnünk a felhasználót Spotify Connect segítségével. A sikeres belépés után példányosodik a Spotify Connect Javascript engine a böngészőnkben. Erre az engine-re egy zenelejátszóként kell tekinteni amit vezérelhetünk. Innentől kezdve a böngésző ablakunk pontosan úgy fog működni, mint azok a Spotify eszközeink ahol be vagyunk jelentkezve, ennek során kitehetjük rá az éppen hallgatott lejátszási listát.
- Másodszor pedig, ha szeretnénk vezérelni az első lépésben létrehozott Spotify eszközt, akkor azt Spotify Web API-n keresztül tehetjük meg. Ezt az API-t a beléptetett user JWT tokenjén keresztül tudjuk meghívni. A vezérlés során minden esetben meg kell mondanunk az API-nak, hogy az leadott kérés melyik eszközön értelmezett – amely a mi esetünkben a böngésző lesz.
Gyakorlatilag egy REST API-n keresztül vezérelhető zenelejátszót kapunk, ami távol van egy közvetlen parancsokkal vezérelhető s ezáltal valós idejű lejátszótól. A Spotify egy rendkívül jó fejlesztői adott azoknak a fejlesztők kezébe, akik távolról szeretnék vezérelni egy másik eszközön futó Spotify lejátszójukat, de a mi felhasználási módunknak ez egyáltalán nem ideális.
Felhasználó beléptetése – backend fejlesztés
Ahhoz, hogy használni tudjuk a Spotify szolgáltatásait a felhasználót be kell léptetnünk. Ehhez a webes lejátszó alkalmazás mellé fejleszteni kell egy ugyanazon a domainen, csak más port alatt futó backend szolgáltatást ami működteti a felhasználó beléptetését . A példakód itt található amit node.js-ben íródott.
Erre azért van szükség, mert a Spotify secure módon autentikálja a felhasználót aki hívni fogja a Spotify API-kat illetve autentikálásra kerül az alkalmazás is amibe a felhasználó bejelentkezik. A Spotify csak általa ismert alkalmazásokkal osztja meg a felhasználók információit és csak olyan adatokat ad át, amiket az alkalmazás előzetesen kérvényezett.
Ha a hitelesítés sikeres, akkor az alkalmazásunk egy olyan URL-el lesz meghívva, amiben be lesz állítva az a JWT token, aminek segítségével meghívható a Spotify Web API.
Az Angular zenelejátszó
A bejelentkezett user könyvtárát olvasni és megjeleníteni gyerekjáték Angular keretrendszerben. Egy zeneszámot lejátszani a böngészőben futó lejátszót vezérelve sem nehéz. Az igazi kihívás a Spotify engine vezérlésének REST API jellegéből fakad. Az állapotmentes kommunikáció miatt nagyon körültekintően kell eljárni, ha pontosan szeretnénk vezérelni a lejátszót.
Például lehetősége van a felhasználónak hangerőt szabályozni. Ezt egy tekerő gomb segítségével tudja megtenni, aminek minden elmozdulásakor kiadjuk az utasítást, hogy változzon meg a hangerő. A lejátszó eszközön pontosan olyan hangosan kell mennie a lejátszásnak amennyire a felhasználó azt beállította,a lehető legalacsonyabb késleltetés mellett. Itt figyelnünk kell arra, hogy amennyiben túl sűrűn küldjük el API-n a parancsokat az eszközhöz, akkor az korántsem biztos, hogy jó sorrendben fognak oda megérkezni.
Egy másik esetben lehetőséget biztosítunk a felhasználónak ahhoz, hogy beletekerjen a zeneszámba amit hallgat. Mindezt egy állapotmentes API-n csak úgy tehetjük, meg, ha lekérdeztük a felhasználó lejátszásának jelenlegi állapotát és ehhez mérten igazítjuk az előre vagy hátratekerés mértékét.
Angular környezetben megszoktuk, hogy az éppen megjelenített állapotunk szinkronban van a megjelenítésért felelős komponensünkben tárolt tagváltozóval. A böngészőnkben futó lejátszás állapotát a Spotify Connect engine hivatott tárolni. A Spotify Connect-hez nem fordulhatunk azzal a kéréssel hogy megkérdezzem mi a lejátszás jelenlegi állapota, ugyanis nem minden esetben érhető el a lejátszó a böngészőben. Ez azért van, mert iOS Safariban a Spotify Player nem támogatott, ezeken az eszközökön csak más lejátszó vezérelhető. Ha minden esetben elérhető lenne egy aktuális állapot a lejátszásról, akkor mindjárt könnyebb dolgunk lenne, de sajnos így mindent Web API-n keresztül kell megoldani.
A zenelejátszás azon az eszközön ezek szerint csak úgy oldható meg, ha azt támogatja a Spotify Connect, minden más esetben csak más eszközöket tudunk vezérelni.
A következő szereplő
A cikksorozat következő fejezetében bemutatjuk, hogy a Spotify-hoz képest milyen az Apple MusicKit lejátszójával dolgozni, ugyanis ez volt a következő streaming platform amit beleintegráltunk a lejátszóba.
A MusicKit egy csomagba integrálja a zenelejátszót, a könyvtáradatok API-ját és a vezérlés. Direkt módon vezérelhető, szemben a Spotify API-s megoldásával ezáltal sokkal könnyebb vele dolgozni hisz mindig van egy számunkra elérhető állapot a böngészőn belül.
