Home / Blog / How to create a Music player screen

How to create a Music player screen

25 Sep 2024 · 7 min read

The Ionic Design Kit, leveraging the powerful Ionic Framework, streamlines the process of creating mobile apps by offering a comprehensive collection of pre-built components. Designers can easily pick and arrange these elements without having to build from the ground up, significantly reducing the workload. For developers, this means less complex coding, as the components are natively integrated within the Ionic ecosystem. This efficient setup fosters quick collaboration, making the Ionic Design Kit a valuable tool for both developers and designers.

The Music Player is a vital feature in modern apps, allowing users to interact with audio content in a simple and intuitive way. A well-designed music player should provide core functionalities, all while maintaining a user-friendly interface. Beyond the basics, features such as shuffle and playlist management can enhance the user experience by giving users more control over their listening habits. With clear icons and smooth transitions, a music player can elevate the overall functionality and appeal of an app.

This guide aims to provide a detailed overview, enabling designers and developers to seamlessly integrate a functional and aesthetically pleasing Music Player into their applications. The integration process is streamlined by using design components from the Ionic Kit, which is built on the solid foundation of the expansive Ionic library.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

Run the following command.

ionic start music-player-screen blank --type=react

3. Get inside the project directory

cd music-player-screen

4. Create a new page

Create page MusicPlayer.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const MusicPlayer: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default MusicPlayer;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add the header

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Add button at the beginning of the toolbar

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

<IonToolbar>
  <IonButtons slot='start'>
  </IonButtons>
</IonToolbar>

7. Add a back button

Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='' to create a back button that navigates back in the app's history upon being clicked. To customize the default icon, set the icon property to {arrowBack}. Please make sure that you’ve imported the icon from Ionic icons.

<IonButtons slot='start'>
  <IonBackButton defaultHref='#' text='' icon={arrowBack}>
  </IonBackButton>
</IonButtons>

8. Add the button at the end of the toolbar

Include another IonButtons component and set the 'slot' to 'end'. This positions the button at the end of the toolbar.

<IonToolbar>
  ...
  <IonButtons slot='end'></IonButtons>
</IonToolbar>

9. Within the IonButtons add the IonButton component

<IonButtons slot='end'>
  <IonButton>
  </IonButton>
</IonButtons>

10. Add icons to buttons

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={add} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.

<IonButton>
  <IonIcon slot='icon-only' icon={add}></IonIcon>
</IonButton>

11. Repeat steps 9 and 10

Add another IonButton and set icon={ellipsisHorizontal} in the IonIcon.

<IonButtons slot='end'>
  ...
  <IonButton>
    <IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
  </IonButton>
</IonButtons>

12. Add the content under the header

Following the IonHeader component, add the IonContent component and apply the ion-padding-vertical class to style the content within.

<IonPage>
  <IonHeader>
    ...
  </IonHeader>
  <IonContent className='ion-padding-vertical'>
  </IonContent>
</IonPage>

13. Place card into the Content component

Inside the IonContent component, add the IonCard component.

<IonContent className='ion-padding-vertical'>
  <IonCard>
  </IonCard>
</IonContent>

14. Add image to the card

Inside the IonCard add the IonImg component with the property src={cover}. Remember to import the required image before.

<IonCard>
  <IonImg src={cover}></IonImg>
</IonCard>

15. Add the div tag to create a block of content

Apply the ion-text-center class to style the content inside.

<IonContent className='ion-padding-vertical'>
  ...
  <div className="ion-text-center">
  </div>
</IonContent>

16. Add the song title

Inside the div tag, add the IonText component with an h1 tag to set the title and place the text 'Nirvana - Nevermind' inside. Set the ion-no-margin class to style the text.

<div className="ion-text-center">
  <IonText>
    <h1 className='ion-no-margin'>Nirvana - Nevermind</h1>
  </IonText>
</div>

17. Place an album name below

Add another IonText and set the color property as medium. Place the text 'Album 1991' inside the component.

<div className="ion-text-center">
  ...
  <IonText color='medium'>Album 1991</IonText>
</div>

18. Wrap the text

After the div tag, add another div with the ion-margin class to wrap the text content inside.

<IonContent className='ion-padding-vertical'>
  ...
  <div className="ion-margin">
  </div>
</IonContent>

19. Add the band description

Inside the div tag, add the IonText component and place the text 'Nirvana released its second album on the same day as other classics: Red Hot Ch...' inside. Set the color property as medium.

<div className="ion-margin">
  <IonText color='medium'>
    Nirvana released its second album on the same day as other classics: Red Hot Ch...
  </IonText>
</div>

20. Place 'More' text in the end of description

After the text content, add another IonText component with the color='dark' property to select part of the text in another color. Place the text 'More' inside.

<IonText color='medium'>
  Nirvana released its second album on the same day as other classics: Red Hot Ch...
  <IonText color='dark'>More</IonText>
</IonText>

21. Use grid component for building buttons layout

After the div block, add the IonGrid component with the IonRow and IonCol components to build a layout for buttons inside.

<IonContent className='ion-padding-vertical'>
  ...
  <IonGrid>
    <IonRow>
      <IonCol>
      </IonCol>
    </IonRow>
  </IonGrid>
</IonContent>

22. Add the button inside the column

Inside the IonCol, add the IonButton with the properties size='small', color='light', and expand='block' to style the button according to the design.

<IonCol>
  <IonButton size='small' color='light' expand='block'>
  </IonButton>
</IonCol>

23. Place an icon inside the button

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only', icon={play} and color='dark'.

<IonButton size='small' color='light' expand='block'>
  <IonIcon slot='icon-only' icon={play} color='dark'></IonIcon>
</IonButton>

24. Add a new column and repeat steps 22 and 23

Put another IonCol inside the IonRow and repeat steps 22 and 23 to include one more IonButton. Set the property icon as {shuffle} to add another icon.

<IonRow>
  <IonCol>
    ...
  </IonCol>
  <IonCol>
    <IonButton size='small' color='light' expand='block'>
      <IonIcon slot='icon-only' icon={shuffle} color='dark'></IonIcon>
    </IonButton>
  </IonCol>
</IonRow>

25. Add the IonList component to organize the items inside

Set the property lines as full and apply the ion-margin-top class to style the content.

<IonContent className='ion-padding-vertical'>
  ...
  <IonList lines='full' className='ion-margin-top'>
  </IonList>
</IonContent>

26. Inside the IonList add the IonItem component

<IonList lines='full' className='ion-margin-top'>
  <IonItem>
  </IonItem>
</IonList>

27. Put label inside an item

Within the IonItem add the IonLabel component and place the text 'Smells Like Teen Spirit' inside.

<IonItem>
  <IonLabel>Smells Like Teen Spirit</IonLabel>
</IonItem>

28. Place an icon

After the IonLabel add the IonIcon component with the properties icon={ellipsisHorizontal} to style the component, using the icon from Ionic icons.

<IonItem>
  ...
  <IonIcon icon={ellipsisHorizontal}></IonIcon>
</IonItem>

29. Repeat steps 27 and 28 to add another song name

Add another IonItem component and set the text 'In Bloom' inside the IonLabel.

<IonList lines='full' className='ion-margin-top'>
  ...
  <IonItem>
    <IonLabel>In Bloom</IonLabel>
    <IonIcon icon={ellipsisHorizontal}></IonIcon>
  </IonItem>
</IonList>

30. Repeat steps 27 and 28 to add another song name

Add another IonItem component and set the text 'Come As You Are' inside the IonLabel.

<IonList lines='full' className='ion-margin-top'>
  ...
  <IonItem>
    <IonLabel>Come As You Are</IonLabel>
    <IonIcon icon={ellipsisHorizontal}></IonIcon>
  </IonItem>
</IonList>

31. Repeat steps 27 and 28 to add another song name

Add another IonItem component and set the text 'Breed' inside the IonLabel.

<IonList lines='full' className='ion-margin-top'>
  ...
  <IonItem>
    <IonLabel>Breed</IonLabel>
    <IonIcon icon={ellipsisHorizontal}></IonIcon>
  </IonItem>
</IonList>

32. Repeat steps 27 and 28 to add another song name

Add another IonItem component and set the text 'Lithium' inside the IonLabel.

<IonList lines='full' className='ion-margin-top'>
  ...
  <IonItem>
    <IonLabel>Lithium</IonLabel>
    <IonIcon icon={ellipsisHorizontal}></IonIcon>
  </IonItem>
</IonList>

33. Repeat steps 27 and 28 to add another song name

Add another IonItem component and set the text 'Polly' inside the IonLabel.

<IonList lines='full' className='ion-margin-top'>
  ...
  <IonItem>
    <IonLabel>Polly</IonLabel>
    <IonIcon icon={ellipsisHorizontal}></IonIcon>
  </IonItem>
</IonList>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday