Ionic 4 Spotify Style Template
  • Introduction
  • Ionic 4 Music App and PWA Template
  • Why to use this Template
  • Initial Setup
  • Running the app
  • Template Features
    • Screens
      • Welcome, Login, Signup
      • Home, Album, Playlist
      • Music Player, Add songs
      • Settings
      • Search
      • User Library
      • Premium User
    • Features
  • How to use this Template
    • Two ways to use
    • Modifying Code
    • Removing a Page
    • Removing a plugin
    • Integrating Back-end
    • Add More Features
  • Build the App & PWA
    • Building App on Device
    • Deploying app as PWA
  • Extra
    • Troubleshooting
    • FAQs
Powered by GitBook
On this page
  • Add songs modal
  • Add songs page
  • Music Player

Was this helpful?

  1. Template Features
  2. Screens

Music Player, Add songs

PreviousHome, Album, PlaylistNextSettings

Last updated 5 years ago

Was this helpful?

Add songs modal

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

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.

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.

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