Our lives have always revolved around music, and the emergence of digital streaming services has made it easier than ever to listen to our favourite songs. One of the most popular music streaming services, Spotify, provides developers with an iFrame widget that enables them to incorporate Spotify material straight into online applications. We will guide you through the process of integrating Spotify iFrame into an Angular application in this blog.
Prerequisite:
Make sure you have the following before beginning the implementation:
- npm and node.js must installed on your system
- Account on Spotify
- Angular CLI should installed
Step 1: Create a New Angular Project
You can create a new project using Angular CLI with the following command:
ng new spotify-app
Step 2: Create a New Spotify Component inside Project
You can simply create a new component by using the Angular CLI with the following command:
ng generate component spotify-player
Step 3: Implement Spotify iFrame in the Component
Add below embedded code to spotify-player.component.html file in your application.
<div style="display:flex;flex-direction:column;align-items:center; height:100vh"> <iframe src="https://open.spotify.com/embed/track/5FVd6KXrgO9B3JPmC8OPst" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> </div>
Here, we’re using the Spotify track’s URL to embed it inside an iFrame. You can replace or use any other Spotify content—such as albums, playlists, or artists—for the track URL.
Step 4: Run Your Application
Run below command to see the Spotify player.
ng serve -o
Conclusion
Creating a music player by using the Angular Framework is a very easy and straight forward approach with spotify iFrame. Spotify embeded code allows us to use spotify player and allows user to interact with player You can follow the above steps mentioned in this blog, to easily embed Spotify tracks, albums, playlists, or artists in your Angular projects and provide an immersive and interactive music experience for your users.
Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency.
Happy coding!