How audio playback works and some limitations

First let me thank you for the project. Having fun reading the excellent code.

Took me a while do understand how Spotify playback was made possible:

this.audio = new Audio(song.track.preview_url);

A new Audio instance (Web Audio API) receives a preview_url (which only has 30s of the song):

The app does not use the new Web Playback SDK which would enable a full playback experience.

I also couldn’t find a refresh_token workflow in the code. Without background refreshing of the token the page would have to be reloaded from time to time (interrupting the experience).

If a developer is considering using this project to start another (like I am) I believe more details on the README.md would facilitate a more informed decision.

I’m I understanding correctly how the audio playback works?

Thanks!

[Pau1fitz]

You are correct. It uses the Web Audio API. This is all handled in the App.js file in this method.

The Spotify API offers 3 authorization flows. In the past I have used the Authorization Code flow but for this project I opted for the Implicit Grant flow . There is a detailed explanation on each of the authorization workflows here. Spotify also provides examples of each one on their github account.

In this application, if the initial request was unauthorized the application will request another token from the API. See code here, line 25 in particular. You only have to give the application access to your Spotify account the first time you use it. At that point a cookie is stored on your machine. If you delete this cookie then you will need to authorize the application again, which would interrupt the experience.

I didn’t use the new Web Playback SDK. I had not actually seen this before. Looks like it would definitely be worth implementing. Firstly, I need to get a premium account 😟

[nukeop]

I’m not sure if there’s a way to make it work with Electron, which is the use case I’m interested in.