Ionic 4 Spotify style Music Streaming App Template: Features Overview

IonSpotify — An Ionic 4 Music Streaming App Template is a mobile app theme/template. With this template, you can create a Music streaming app like Spotify, Gaana, Wynk, Jio Music, etc.

If you want to create your own Spotify app, it doesn’t need to make your wallet go empty. You can easily start with a Spotify app starter like the one I am going to describe and make your way from there.

This template is front-end part of the music app, i.e. the screens and user interfaces are ready. You can easily change the screens, styles, and logic to suit your requirements. To make it a live app you just need to add your backend (data loaded) to the app. This is a great starting point for app development, as more than half the work is done here. All pages and components are set. The starter uses data from JSON files, so this data can be easily swapped with data from the backend.

This template is made in Ionic 4 language. With Ionic 4, you can:

• Create iOS and an Android app with a single source code
• Cut your project cost and time in half
• Ensure exact same UI in iOS and Android, while following the standard UI norms
• Saves separate updates for each app in future

Let’s see all the features of the app.

Features

Screens

1. Landing Page

This page can be accessed after the app loads. This is the landing page. This page contains the Sign Up page, continue with Facebook and Log In page navigations.

Currently, the Facebook login is only for demo purpose, you can integrate Ionic Facebook Log In authentication following our previous blog on Facebook login in Ionic 4 apps using Firebase.

2. Log In 

By clicking on the Log In button it redirects you to the login page here.

The Log In page can be used to perform Log In action with username/email and password. Currently as this just template, the login is only for demo purpose.

The login page also contains “Forgot Password” page navigations.

3. Sign Up

This page can be accessed from the landing page. By clicking on the signup button it redirects you to the signup page.

The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.

The signup page also contains “Date of birth and Gender, select music of your taste, select artist of your taste and find favorite artist page” page navigations.

4. Select Music

This page can be accessed by successful input of username/email and password in the create account page. Here, you can select kinds of music according to your taste. After selecting kinds of music it will navigate to the music artist taste.

5. Select Artist

This page can be accessed by successful selection of kind of music in the select music taste page.

Here, you can select many artists according to your taste. After selecting artists it will navigate the finding music page where your selected music and artist data will be loaded in the app but here it is only UI demonstration.

Here we have a find artist page too. You can access this page by clicking on the search bar. It will navigate to the search page.

6. Find Artist

This page can be accessed by clicking on the search bar at the top of the artist page. Here you can find an artist of your choice by typing in the search input.
It will display you some results according to your input in the vertical list view.
This is only UI so it will result only some preset data.

7. Account Recovery

This page can be accessed from the “Login” page. Account Recovery page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The OTP sent to the user can be verified here and the user can be asked to provide a new password.

8. Home

This is the first tab of the application.

Home page contains recommended music and other categories for a user.

The songs/albums are arranged in a horizontal scroll for each category.

A vertical scroll allows the addition of any number of categories on the homepage, each category being arranged in a horizontal scroll.

By clicking on any category, it will navigate to the category playlist page.

9. Home, by Category Songs List

This page can be accessed by clicking on any category on the home page.

Here the list of all songs is available according to the category you selected.In this page, we have three icons for each song functioning different things.

Here the heart icon is used to toggle songs to add or remove as like or dislike songs.

The remove icon is used to hide and show the song in the song’s list. And the menu icon on click opens a modal from where we can like or dislike, hide or show, add it to playlist, add to queue, view artist, share, Report explicit Content and show credentials.

10. Song List Modal

This page can be accessed by clicking on the Songs List page’s options button. This page contains the actions for the currently playing playlist arranged in a vertical list. Any song can be clicked and these actions can be performed.

11. Home > Songs List > Might Like

This page can be accessed from the songs list page from the home page, besides the songs selected by the category, there are some options to select other categories of your choice and it will navigate to the might like page.

12. Add Songs Modal

On clicking the options button in the top-right of the header, the current action modal opens.

This page can be accessed from the Songs List and Might Like page’s playlist button. This page contains the songs of the actions to add songs, make Non- collaborative, rename, delete, find and short playlist actions. Except add songs all the left actions are only UI. Particular actions can be done by writing some codes for that. You can follow or ask to that for you.

13. Add Songs Page

This page can be accessed by clicking on the add songs in the add songs modal or from the Library-Playlists. We can add songs to our playlist by clicking on the add button in the rightmost of each song name.

14. Music Player

This page can be accessed from many places, by clicking on a particular song item or by clicking the Mini-player on the bottom of any page.

Music player page contains the currently playing playlist, with songs of the playlist arranged in an image slider on the top half of the page. At the bottom, there is a music control bar with play, pause, next etc. buttons.

On clicking the Playlist button in the top-right of the header, the current playlist opens.

15. Settings Page

The settings page can be accessed from the Home page’s top-right button.

This page contains the settings/options for the app like

• data saver
• Playback Options
• Language
• Edit Profile
• Notifications
• Devices
• Car-View
• About
• Privacy-Policy
• Support
• Social
• Other
• Logout

Most of these settings options have toggle options and Language and notification navigate to other pages.

16. Settings > Notification

The settings page can be accessed from the Setting page’s navigation option.

This page contains the navigation options/settings for Push notification and Email notification in the app like

• Recommended Music
• New Music
• Playlist Update
• Concert Notification
• Artist Updates

To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

17. Settings > Language

This page can be accessed from “Settings” page.

The options available can be chosen to change the language of the app / music, as per your requirement. “Back” button takes you back to “Settings” page.

18. Search

This is the second tab of the application.

Search page contains the UI for searching songs, albums, artists etc.

Just type any word in the input box and the results can be displayed in the content as a list For demo purpose. When you type in the search box, you see preset results in the result.

19. Library > Playlist

This is the third tab, first sub-segment of the Music segment’s

Playlist page contains your playlists arranged in a vertical list. The create playlist button allows you to create a playlist and add songs to it. You can add as many playlists you want. You can also implement an infinite scroll feature to fetch more playlists on scroll.

20. Library > Music > Playlist > Create Playlist

You can create as many songs as you want by creating different play lists.

All the playlists will be arranged in a vertical manner in the Library-Playlist page.

21. Library > Music > Playlist > Artist

This is the third tabs, second sub-segment of the Music segment’s

Artist page contains your favorite Artist arranged in a vertical list. By clicking on any artist navigates you to its songs list. You can add as many artist you want. You can also implement an infinite scroll feature to fetch more songs on scroll.

22. Library > Podcast

This is the third tab, and the second segment.

Episode, Download, and shows are the first, second and third sub-segment of the podcast segment.

The browse podcast button will navigate to the Episode, Download and shows podcast category.

Podcast categories have been defined in the grid view in the vertical direction in the app.

23. Podcast > categories

These categories contain all the digital audio file made available on the Internet for downloading to a computer or mobile device, typically available as a series, new installments of which can be received by subscribers automatically. You can integrate all the functionalities by applying back-end code to it. Above is only UI.

The categories have been defined accordingly in the list view and grid view in the app. By clicking a particular category will navigate to the podcast category page.

24. Podcast > Categories > List view

This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category type, playlist page.

25. Podcast > Categories > Grid view

This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category selected page.

26. Premium

This is the apps forth tab.

Providing premium features is where you can earn using your app.This is only a UI but you can integrate back-end code for premium services with the help of a back-end developer orcan reach to us for integration.

Feature Explanation

1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Change password.

As per your requirements, you can either

Allow a user to access the app without login, and ask a login for specific features, OR

Do not allow any access without login. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to HomePage. You can even choose to integrate social logins in the app. Check details here.

2. Music Player

This is a central component of a music streaming app. This template has two types of music player — a Mini player at the bottom of each screen and a full-screen player.

Mini Music Player is present in almost all screens on the bottom of the screen. It shows the currently playing song, and a play/pause button depending on whether the song is playing or paused.

Clicking on Mini Music Player takes you to Music player page.

3. Settings Page

Settings are an important part of an app.

This template also has a dedicated and relevant Settings page.

There are options for push notification, email notifications, and languages for

• Notification handling
•  Language handling
•  Edit Profile
•  Logout
•  Toggles for other many options

To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

Edit Profile and Change Password can also be implemented very easily with Firebase, even if you are using Social logins. Custom back-end will require you to make custom APIs for these purposes.

4. Tabs

Tabs can be accessed after the successful login or signup process. Maximum of the pages in the app can be navigated with the help of tabs.

Tabs are placed at the bottom of every page.

5. Premium feature addition

Providing premium features is where you can earn using your app.

This template does have a premium feature page but only for UI.

You can then route each your music streaming request via a checking function which checks for the user being premium or non-premium. Accordingly, you can

• Serve low-quality data to non-premium users, ask them to get premium for better quality
• Don’t allow Offline content for non-premium users, ask them to get premium for Offline content
• Don’t allow creating more than a fixed number of playlists etc in non-premium
• Show Ads using Ionic AdMob for non-premium users and many similar things.

You can implement the payments by using any one or multiple of the following

• Ionic PayPal
• Ionic Stripe
• Ionic in-app purchase
• Ionic Apple Pay and Android Pay
• Ionic Razorpay

Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows single source code to create both iOS and Android apps.

This template has been tested in all latest Android versions and major devices.

This template has also been tested in all latest versions of iPhones, including iPhone X.

Conclusion

In this post, we learned about various features of Ionic 4 Spotify Style Music Streaming App Starter. This template is a ready-made front-end for a Music Streaming App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.