Alkalmazás fejlesztés Spotify Web API platformon

2021. Oct. 15. 4 min read Custom Software Development
Spotify API alkalmazás fejlesztés

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.

Forrás a Spotify fejlesztői oldaláról.

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.

OAuth Page
Rengeteg platformhoz hasonlóan itt is a Spotify végzi a felhasználó hitelesítését. Semmilyen olyan adathoz nem tud hozzáférni a harmadik fél által fejlesztett alkalmazás, amit előzetesen ne kérvényezett volna.

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.


Read our free regular tips

Interested in what solutions you can use to improve the digitalization of your business?

Subscribe to our professional newsletter

Want to increase productivity?

Want to work more efficiently?

Want to accomplish an idea?

Phone number

+ 36 20 337 1596

Email address

hello@teamenlight.com

Personal contact

We welcome all current and future customers in our Budapest office.