To get all of this, simply change your pages/playlist/playlist.Hello friends! I took a few days off to enjoy Thanksgiving with my family. And that’s just one function, you could even control the sound and seek to a position and much more.
Hosting festify at home mac#
The mechanism in the background is a universal link and we might talk about this in a future tutorial as well, so raise you hand below if you want more information on that topic.įinally, we can even play the track on the last device that was using Spotify! I’m not sure what exactly happens in the background but being able to control the Spotify client on my Mac from my Ionic app felt kinda epic. The “ Open in Spotify” function is using the URL of the link, which will then automatically open the Spotify app with the track.
Make sure to enable sound and turn it up on your device if you can’t hear anything 😉 The result contains an array of tracks that we can use later inside our view to iterate over all the entries.Īs for the functions, the play/stop logic for the preview works with the Media plugin and starts the song in the background. Inside our page we will use the library again and call getPlaylist() where we also pass in the ID of the owner and the playlist ID itself. Open the Spotify client and play the trackĮspecially the second option is kinda crazy and you can see it in action in the video linked at the end of this tutorial!.Play the track on our active Spotify device.Play the preview of the track (if it exists).In our case we will offer 3 options for every track: The Spotify team is working on this, but right now we can’t build a true Spotify app, but you can do almost everything else from your app.
Beware: There is currently now way to stream the whole song through the API (*at least from mobile devices)! To add some more features we now dive into the tracks of our playlist. Now you are able to log in with Spotify and retrieve your own Playlists! Working with Spotify Tracks You can also checkout all the functions inside the documentation of the library! We then got a nice array of playlists that we can present inside the view, so go ahead and change your pages/home/home.ts to: It looks like for some reason the params that are sent to the server are not escaped and the “+” character gets replaced with an empty space sometimes.Īnyway, if everything works fine we can then use the API to retrieve the playlists of a user by calling getUserPlaylists().
Remember, this won’t open the whole dialog again but simply request a new access token from our server using the refresh token!Īt this point I also encountered some problems with CryptoJS and decoding the refresh token, so in case you run into any problems just let me know below. We’ll also keep track of the loggedIn state of a user to show a logout button and also try to see if a user was previously logged in from the storage to automatically trigger our authorise flow again. We can directly pass it to an instance of the SpotifyWebApi so ll the future requests can use the token and make a valid request against the API. The first part of the login was already discussed before, but now we finally make real use of the access token we get back after login. I’ve also included the Ionic Storage so we can better keep track whether a user was previously logged in and automate parts of the token exchange flow under the hood when the user comes back. For those coming from part 1 make sure to run the additional commands as well! We finished the first tutorial with a simple login to try our OAuth flow, and we’ll continue with that but you can also simply start your app now if you haven’t. Once we are finished our app will display our playlists and also allow some options for the tracks inside those lists like you can see below. Inside this second part we will use the web API JS wrapper that only needs our access token and allows us to contact all the endpoints without having to lookup everything inside the documentation. Go back to the first part: Building an Ionic Spotify App – Part 1: OAuth If you haven’t went through the first part of this series, make sure to complete it first and then come back to this tutorial. After our initial setup for the Spotify OAuth dialog we are now ready to create a simple Ionic Spotify client that can access the Web API of Spotify to retrieve all kinds of information about the user, playlists or tracks!
0 kommentar(er)
