Ionic 4 Spotify style Music Streaming App Template: Features Overview
Tags: ionic, spotify, music, template
Published: 2020-03-25 23:18:24

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="2d85" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="237c" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">IonSpotify&#8202;—&#8202;An Ionic 4 Music Streaming App Template </strong>is a mobile app theme/template. With this template, you can create a Music streaming app like Spotify, Gaana, Wynk, Jio Music, etc.</blockquote><p name="fce5" class="graf graf--p graf-after--blockquote">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.</p><figure tabindex="0" contenteditable="false" name="bf46" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*vjy8sih83B_myEUFbTJwwg.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/720/1*vjy8sih83B_myEUFbTJwwg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4ce4" class="graf graf--p graf-after--figure">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.</p><p name="764f" class="graf graf--p graf-after--p">This template is made in Ionic 4 language. With Ionic 4, you can:</p><ul class="postList"><li name="dca5" class="graf graf--li graf-after--p">Create iOS and an Android app with a single source code</li><li name="8c53" class="graf graf--li graf-after--li">Cut your project cost and time in half</li><li name="8ca3" class="graf graf--li graf-after--li">Ensure exact same UI in iOS and Android, while following the standard UI norms</li><li name="8d89" class="graf graf--li graf-after--li">Saves separate updates for each app in future</li></ul><p name="3537" class="graf graf--p graf-after--li">Let’s see all the features of the app.</p><h3 name="b0b2" class="graf graf--h3 graf-after--p">Features</h3><h4 name="f1a2" class="graf graf--h4 graf-after--h3">Screens</h4><ol class="postList"><li name="0ea6" class="graf graf--li graf-after--h4"><strong class="markup--strong markup--li-strong">Landing Page</strong></li></ol><figure tabindex="0" contenteditable="false" name="53d8" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 305px; max-height: 660px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.4%;"></div><img class="graf-image" data-image-id="1*SZhIOzPxs2xkI7huKn29iA.jpeg" data-width="305" data-height="660" src="https://cdn-images-1.medium.com/max/720/1*SZhIOzPxs2xkI7huKn29iA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="6259" class="graf graf--p graf-after--figure">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.</p><p name="8ecf" class="graf graf--p graf-after--p">Currently, the Facebook login is only for demo purpose, you can integrate Ionic Facebook Log In authentication following our previous blog on <a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 apps using Firebase.</a></p><p name="8132" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">2. Log In</strong></p><figure tabindex="0" contenteditable="false" name="098b" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 346px; max-height: 750px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.8%;"></div><img class="graf-image" data-image-id="1*auKAfl9cwYEkOIX9z9OvCg.png" data-width="346" data-height="750" src="https://cdn-images-1.medium.com/max/720/1*auKAfl9cwYEkOIX9z9OvCg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="fe15" class="graf graf--p graf-after--figure">By clicking on the Log In button it redirects you to the login page here.</p><p name="89d2" class="graf graf--p graf-after--p">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.</p><p name="2a25" class="graf graf--p graf-after--p">The login page also contains “Forgot Password” page navigations.</p><p name="b8b6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">3. Sign Up</strong></p><figure tabindex="0" contenteditable="false" name="5828" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*SXREi_aRvdq610deFAYqfA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*SXREi_aRvdq610deFAYqfA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="805a" class="graf graf--p graf-after--figure">This page can be accessed from the landing page. By clicking on the signup button it redirects you to the signup page.</p><p name="a4d5" class="graf graf--p graf-after--p">The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.</p><p name="3735" class="graf graf--p graf-after--p">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.</p><p name="8a2a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">4. Select Music</strong></p><figure tabindex="0" contenteditable="false" name="cdfd" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*v4I2ZZD2ePgxU4SoOUelgA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*v4I2ZZD2ePgxU4SoOUelgA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="14d1" class="graf graf--p graf-after--figure is-selected">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.</p><p name="9742" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">5. Select Artist</strong></p><figure tabindex="0" contenteditable="false" name="401e" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*iw4nWV5mNEC3-VmmLhzMhQ.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*iw4nWV5mNEC3-VmmLhzMhQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ed04" class="graf graf--p graf-after--figure">This page can be accessed by successful selection of kind of music in the select music taste page.</p><p name="f54e" class="graf graf--p graf-after--p">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.</p><p name="aa63" class="graf graf--p graf-after--p">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.</p><p name="3e52" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">6. Find Artist</strong></p><figure tabindex="0" contenteditable="false" name="c7bb" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*vqm0J0q27DE-yDVyrLhiPw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*vqm0J0q27DE-yDVyrLhiPw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e9f9" class="graf graf--p graf-after--figure">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.<br>It will display you some results according to your input in the vertical list view.<br>This is only UI so it will result only some preset data.</p><p name="1c96" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">7. Account Recovery</strong></p><figure tabindex="0" contenteditable="false" name="07e5" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*X3JWXYrb9n05Py7nP1tqiA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*X3JWXYrb9n05Py7nP1tqiA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="6682" class="graf graf--p graf-after--figure">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.</p><p name="304a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">8. Home</strong></p><figure tabindex="0" contenteditable="false" name="3da4" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*x_h0b3DAT4PdynhUrG2M4w.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*x_h0b3DAT4PdynhUrG2M4w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e5b3" class="graf graf--p graf-after--figure">This is the first tab of the application.</p><p name="76b2" class="graf graf--p graf-after--p">Home page contains recommended music and other categories for a user.</p><p name="5cc8" class="graf graf--p graf-after--p">The songs/albums are arranged in a horizontal scroll for each category.</p><p name="17d6" class="graf graf--p graf-after--p">A vertical scroll allows the addition of any number of categories on the homepage, each category being arranged in a horizontal scroll.</p><p name="a17f" class="graf graf--p graf-after--p">By clicking on any category, it will navigate to the category playlist page.</p><p name="0361" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">9. Home, by Category Songs List</strong></p><figure tabindex="0" contenteditable="false" name="1373" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*rRQOtPU1T-Jd4Kpx0_2hAA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*rRQOtPU1T-Jd4Kpx0_2hAA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="2e9f" class="graf graf--p graf-after--figure">This page can be accessed by clicking on any category on the home page.</p><p name="3d1d" class="graf graf--p graf-after--p">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.</p><p name="b65c" class="graf graf--p graf-after--p">Here the heart icon is used to toggle songs to add or remove as like or dislike songs.</p><p name="b640" class="graf graf--p graf-after--p">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.</p><p name="e8cf" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">10. Song List Modal</strong></p><figure tabindex="0" contenteditable="false" name="18c0" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*WMQwpJ03IAD-vAAiXZjwWg.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*WMQwpJ03IAD-vAAiXZjwWg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="a602" class="graf graf--p graf-after--figure">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.</p><h4 name="f75d" class="graf graf--h4 graf-after--p">11. Home &gt; Songs List &gt; Might&nbsp;Like</h4><figure tabindex="0" contenteditable="false" name="2a4e" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*tf7gzZoiPr46Xub-nV-7Ig.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*tf7gzZoiPr46Xub-nV-7Ig.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f857" class="graf graf--p graf-after--figure">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.</p><h4 name="0781" class="graf graf--h4 graf-after--p">12. Add Songs&nbsp;Modal</h4><figure tabindex="0" contenteditable="false" name="af40" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*vnwIlA_TcSLgHTqrEE5SIA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*vnwIlA_TcSLgHTqrEE5SIA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4b6f" class="graf graf--p graf-after--figure">On clicking the options button in the top-right of the header, the current action modal opens.</p><p name="89b7" class="graf graf--p graf-after--p">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. <a href="http://store.enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">You can follow or ask to that for you</a>.</p><h4 name="d92b" class="graf graf--h4 graf-after--p">13. Add Songs&nbsp;Page</h4><figure tabindex="0" contenteditable="false" name="4e38" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*YwxnpY02yo8B46hZ8jXhNg.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*YwxnpY02yo8B46hZ8jXhNg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4e32" class="graf graf--p graf-after--figure">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.</p><h4 name="225e" class="graf graf--h4 graf-after--p">14. Music&nbsp;Player</h4><figure tabindex="0" contenteditable="false" name="e06f" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*KSd0KYftzIJLua0gW9orhQ.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*KSd0KYftzIJLua0gW9orhQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="b4f0" class="graf graf--p graf-after--figure">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.</p><p name="8b8d" class="graf graf--p graf-after--p">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.</p><p name="1f86" class="graf graf--p graf-after--p">On clicking the Playlist button in the top-right of the header, the current playlist opens.</p><h4 name="29d6" class="graf graf--h4 graf-after--p">15. Settings&nbsp;Page</h4><figure tabindex="0" contenteditable="false" name="e143" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*WpLNKJ_PZJVS0xU-HhR-ZQ.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*WpLNKJ_PZJVS0xU-HhR-ZQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="b58b" class="graf graf--p graf-after--figure">The settings page can be accessed from the Home page’s top-right button.</p><p name="cbe1" class="graf graf--p graf-after--p">This page contains the settings/options for the app like</p><ul class="postList"><li name="1361" class="graf graf--li graf-after--p">data saver</li><li name="e6c7" class="graf graf--li graf-after--li">Playback Options</li><li name="3f59" class="graf graf--li graf-after--li">Language</li><li name="c9e8" class="graf graf--li graf-after--li">Edit Profile</li><li name="8a0d" class="graf graf--li graf-after--li">Notifications</li><li name="1460" class="graf graf--li graf-after--li">Devices</li><li name="5883" class="graf graf--li graf-after--li">Car-View</li><li name="c287" class="graf graf--li graf-after--li">About</li><li name="291c" class="graf graf--li graf-after--li">Privacy-Policy</li><li name="6ea2" class="graf graf--li graf-after--li">Support</li><li name="20d1" class="graf graf--li graf-after--li">Social</li><li name="14f7" class="graf graf--li graf-after--li">Other</li><li name="bab9" class="graf graf--li graf-after--li">Logout</li></ul><p name="2e3b" class="graf graf--p graf-after--li">Most of these settings options have toggle options and Language and notification navigate to other pages.</p><h4 name="2b8c" class="graf graf--h4 graf-after--p">16. Settings &gt; Notification</h4><figure tabindex="0" contenteditable="false" name="7270" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*CA1_ao3qNU5xUyEKFMRSKA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*CA1_ao3qNU5xUyEKFMRSKA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="60aa" class="graf graf--p graf-after--figure">The settings page can be accessed from the Setting page’s navigation option.</p><p name="a80d" class="graf graf--p graf-after--p">This page contains the navigation options/settings for Push notification and Email notification in the app like</p><ul class="postList"><li name="e9bf" class="graf graf--li graf-after--p">Recommended Music</li><li name="22bc" class="graf graf--li graf-after--li">New Music</li><li name="53e4" class="graf graf--li graf-after--li">Playlist Update</li><li name="00aa" class="graf graf--li graf-after--li">Concert Notification</li><li name="264e" class="graf graf--li graf-after--li">Artist Updates</li></ul><p name="07e4" class="graf graf--p graf-after--li">To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase&#8202;—&#8202;implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> here</a>.</p><h4 name="f58a" class="graf graf--h4 graf-after--p">17. Settings &gt;&nbsp;Language</h4><figure tabindex="0" contenteditable="false" name="3466" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*vM3OIzbvONmZC-K3Vlq-iA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*vM3OIzbvONmZC-K3Vlq-iA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="28aa" class="graf graf--p graf-after--figure">This page can be accessed from “Settings” page.</p><p name="ece5" class="graf graf--p graf-after--p">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.</p><h4 name="3702" class="graf graf--h4 graf-after--p">18. Search</h4><figure tabindex="0" contenteditable="false" name="3438" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*EdSCHT6wN1X1rqu8SQ3Z-g.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*EdSCHT6wN1X1rqu8SQ3Z-g.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="b911" class="graf graf--p graf-after--figure">This is the second tab of the application.</p><p name="c724" class="graf graf--p graf-after--p">Search page contains the UI for searching songs, albums, artists etc.</p><p name="462f" class="graf graf--p graf-after--p">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.</p><h4 name="bf68" class="graf graf--h4 graf-after--p">19. Library &gt;&nbsp;Playlist</h4><figure tabindex="0" contenteditable="false" name="1f3d" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*Kt4cpaNDxuUq9gaudltIHg.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*Kt4cpaNDxuUq9gaudltIHg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="1d39" class="graf graf--p graf-after--figure">This is the third tab, first sub-segment of the Music segment’s</p><p name="a8ca" class="graf graf--p graf-after--p">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.</p><h4 name="0427" class="graf graf--h4 graf-after--p">20. Library &gt; Music &gt; Playlist &gt; Create&nbsp;Playlist</h4><figure tabindex="0" contenteditable="false" name="a016" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*HTrReIfyu4DTpja0x9ABEA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*HTrReIfyu4DTpja0x9ABEA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="0d84" class="graf graf--p graf-after--figure">You can create as many songs as you want by creating different play lists.</p><p name="0adc" class="graf graf--p graf-after--p">All the playlists will be arranged in a vertical manner in the <strong class="markup--strong markup--p-strong">Library-Playlist page.</strong></p><h4 name="ed5e" class="graf graf--h4 graf-after--p">21. Library &gt; Music &gt; Playlist &gt;&nbsp;Artist</h4><figure tabindex="0" contenteditable="false" name="e3bc" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*L2hJApyWYd0KTqk_x6nzBA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*L2hJApyWYd0KTqk_x6nzBA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="128f" class="graf graf--p graf-after--figure">This is the third tabs, second sub-segment of the Music segment’s</p><p name="2017" class="graf graf--p graf-after--p">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 <a href="https://medium.com/maestral-solutions/react-native-custom-infinite-scroll-5fd35bc1f12e"  class="markup--anchor markup--p-anchor"    target="_blank">infinite scroll</a> feature to fetch more songs on scroll.</p><h4 name="3d51" class="graf graf--h4 graf-after--p">22. Library &gt;&nbsp;Podcast</h4><figure tabindex="0" contenteditable="false" name="50b1" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*4GNoPeL94wQhtOBBQkE3mw.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*4GNoPeL94wQhtOBBQkE3mw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="6ff5" class="graf graf--p graf-after--figure">This is the third tab, and the second segment.</p><p name="6d93" class="graf graf--p graf-after--p">Episode, Download, and shows are the first, second and third sub-segment of the podcast segment.</p><p name="9e76" class="graf graf--p graf-after--p">The browse podcast button will navigate to the Episode, Download and shows podcast category.</p><p name="9957" class="graf graf--p graf-after--p">Podcast categories have been defined in the grid view in the vertical direction in the app.</p><h4 name="03f9" class="graf graf--h4 graf-after--p">23. Podcast &gt; categories</h4><figure tabindex="0" contenteditable="false" name="b7a6" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*kINJS5MlkROyE3wLRZt8Gw.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*kINJS5MlkROyE3wLRZt8Gw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ae61" class="graf graf--p graf-after--figure">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.</p><p name="eaf2" class="graf graf--p graf-after--p">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.</p><h4 name="71c9" class="graf graf--h4 graf-after--p">24. Podcast &gt; Categories &gt; List&nbsp;view</h4><figure tabindex="0" contenteditable="false" name="72de" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*9UQpbwvRcBk21ubuWQDe-g.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*9UQpbwvRcBk21ubuWQDe-g.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="0124" class="graf graf--p graf-after--figure">This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category type, playlist page.</p><h4 name="8f5a" class="graf graf--h4 graf-after--p">25. Podcast &gt; Categories &gt; Grid&nbsp;view</h4><figure tabindex="0" contenteditable="false" name="3cb3" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*Jqu2NmLdsbWj-9tSPsyaLA.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*Jqu2NmLdsbWj-9tSPsyaLA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="41fd" class="graf graf--p graf-after--figure">This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category selected page.</p><h4 name="97c6" class="graf graf--h4 graf-after--p">26. Premium</h4><figure tabindex="0" contenteditable="false" name="eb58" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*EVeHRuYyCPhbxz3-p1PU6Q.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*EVeHRuYyCPhbxz3-p1PU6Q.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="b311" class="graf graf--p graf-after--figure">This is the apps forth tab.</p><p name="e8f1" class="graf graf--p graf-after--p">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 or<a href="http://store.enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> can reach to us</a> for integration.</p><h3 name="2b69" class="graf graf--h3 graf-after--p">Feature Explanation</h3><h4 name="b7ad" class="graf graf--h4 graf-after--h3">1. User Authentication</h4><p name="216b" class="graf graf--p graf-after--h4">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.</p><p name="ffa2" class="graf graf--p graf-after--p">As per your requirements, you can either</p><p name="a97a" class="graf graf--p graf-after--p">Allow a user to access the app without login, and ask a login for specific features, OR</p><p name="a69f" class="graf graf--p graf-after--p">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 <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p><h4 name="6bc8" class="graf graf--h4 graf-after--p">2. Music&nbsp;Player</h4><p name="3d97" class="graf graf--p graf-after--h4">This is a central component of a music streaming app. This template has two types of music player&#8202;—&#8202;a Mini player at the bottom of each screen and a full-screen player.</p><p name="dae3" class="graf graf--p graf-after--p">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.</p><p name="67b8" class="graf graf--p graf-after--p">Clicking on Mini Music Player takes you to Music player page.</p><figure tabindex="0" contenteditable="false" name="e146" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*KSd0KYftzIJLua0gW9orhQ.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*KSd0KYftzIJLua0gW9orhQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="a098" class="graf graf--h4 graf-after--figure">3. Settings&nbsp;Page</h4><p name="0d0f" class="graf graf--p graf-after--h4">Settings are an important part of an app.</p><p name="2405" class="graf graf--p graf-after--p">This template also has a dedicated and relevant Settings page.</p><figure tabindex="0" contenteditable="false" name="0bc7" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*WpLNKJ_PZJVS0xU-HhR-ZQ.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*WpLNKJ_PZJVS0xU-HhR-ZQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="53b3" class="graf graf--p graf-after--figure">There are options for push notification, email notifications, and languages for</p><ul class="postList"><li name="0a7b" class="graf graf--li graf-after--p">Notification handling</li><li name="2f11" class="graf graf--li graf-after--li">Language handling</li><li name="fbea" class="graf graf--li graf-after--li">Edit Profile</li><li name="0e2d" class="graf graf--li graf-after--li">Logout</li><li name="7ed0" class="graf graf--li graf-after--li">Toggles for other many options</li></ul><p name="b7ec" class="graf graf--p graf-after--li">To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase&#8202;—&#8202;implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notification<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> here</a>.</p><p name="458e" class="graf graf--p graf-after--p">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.</p><h4 name="8cc5" class="graf graf--h4 graf-after--p">4. Tabs</h4><figure tabindex="0" contenteditable="false" name="c399" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*x_h0b3DAT4PdynhUrG2M4w.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*x_h0b3DAT4PdynhUrG2M4w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="303c" class="graf graf--p graf-after--figure">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.</p><p name="520d" class="graf graf--p graf-after--p">Tabs are placed at the bottom of every page.</p><h4 name="7481" class="graf graf--h4 graf-after--p">5. Premium feature&nbsp;addition</h4><p name="0171" class="graf graf--p graf-after--h4">Providing premium features is where you can earn using your app.</p><p name="0a8e" class="graf graf--p graf-after--p">This template does have a premium feature page but only for UI.</p><p name="daa7" class="graf graf--p graf-after--p">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</p><ul class="postList"><li name="f8d8" class="graf graf--li graf-after--p">Serve low-quality data to non-premium users, ask them to get premium for better quality</li><li name="c4a2" class="graf graf--li graf-after--li">Don’t allow Offline content for non-premium users, ask them to get premium for Offline content</li><li name="a872" class="graf graf--li graf-after--li">Don’t allow creating more than a fixed number of playlists etc in non-premium</li><li name="6f7f" class="graf graf--li graf-after--li">Show Ads using Ionic AdMob for non-premium users and many similar things.</li></ul><figure tabindex="0" contenteditable="false" name="c4c4" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 296px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.2%;"></div><img class="graf-image" data-image-id="1*EVeHRuYyCPhbxz3-p1PU6Q.png" data-width="296" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*EVeHRuYyCPhbxz3-p1PU6Q.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="8b76" class="graf graf--p graf-after--figure">You can implement the payments by using any one or multiple of the following</p><ul class="postList"><li name="cb7a" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic PayPal</a></li><li name="cd0c" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic Stripe</a></li><li name="a002" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic in-app purchase</a></li><li name="3b43" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/payment-gateway-solutions-in-ionic-4-paypal-apple-pay-stripe-and-others/6"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic Apple Pay and Android Pay</a></li><li name="443b" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic Razorpay</a></li></ul><h4 name="17b8" class="graf graf--h4 graf-after--li">Device Compatibility</h4><p name="af8d" class="graf graf--p graf-after--h4">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.</p><p name="88c0" class="graf graf--p graf-after--p">This template has been tested in all latest Android versions and major devices.</p><p name="4ea4" class="graf graf--p graf-after--p">This template has also been tested in all latest versions of iPhones, including iPhone X.</p><h3 name="c992" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="ea6a" class="graf graf--p graf-after--h3 graf--trailing">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.</p></div></div></section><section name="addb" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="c05d" class="graf graf--p graf--leading"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><p name="2ada" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em></strong><a href="https://store.enappd.com/product/ionic-4-spotify-app-starter/"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">IonSpotify</strong></a><strong class="markup--strong markup--p-strong">”<em class="markup--em markup--p-em"> today!!</em></strong></p><p name="fba2" class="graf graf--p graf-after--p graf--trailing"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p></div></div></section></div></article></main>