How to Create a Music Player App with Ionic and Angular

Posted on by Panther

Introduction

In this tutorial, we will be building a music player app using the Ionic framework and Angular. The app will allow users to browse and play music from their device’s library. We will be using the Apache Cordova Media plugin to handle the audio playback.

By the end of this tutorial, you will have a working music player app that can play audio files from the user’s device.

Prerequisites

To follow along with this tutorial, you will need:

  • Node.js installed on your machine
  • Basic knowledge of Angular and TypeScript
  • Basic knowledge of Ionic framework

Set up the Project

To get started, we need to set up a new Ionic project. Open your terminal or command prompt and run the following command:

ionic start music-player-app blank --type=angular

This will create a new Ionic project with the name “music-player-app” using the Angular template.

Navigate to the project directory:

cd music-player-app

Add the Media Plugin

Next, we need to add the Cordova Media plugin to our project. The Media plugin provides the functionality to play and control audio files.

Run the following command to add the plugin to the project:

ionic cordova plugin add cordova-plugin-media

Now, let’s install the TypeScript typings for the plugin. Run the following command:

npm install --save @ionic-native/media

Create a Music Provider

We will create a music provider service that will handle the audio playback functionality. Run the following command to generate the music provider:

ionic generate service providers/music

This will generate a new service file named “music.service.ts” in the “src/app/providers” directory.

Open the “music.service.ts” file and replace the contents with the following code:

import { Injectable } from '@angular/core';
import { Media, MediaObject } from '@ionic-native/media/ngx';

@Injectable({
  providedIn: 'root'
})
export class MusicService {

  currentTrack: MediaObject;

  constructor(private media: Media) { }

  play(track: string): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      if (this.currentTrack) {
        this.currentTrack.stop();
      }

      this.currentTrack = this.media.create(track);

      this.currentTrack.play();

      resolve();
    });
  }

  pause(): void {
    if (this.currentTrack) {
      this.currentTrack.pause();
    }
  }

  stop(): void {
    if (this.currentTrack) {
      this.currentTrack.stop();
    }
  }

}

In this code snippet, we import the required modules from the Cordova Media plugin. We also define a currentTrack property to keep track of the currently playing audio file. The play() method creates a new MediaObject using the provided track URL and plays it. The pause() and stop() methods pause and stop the currently playing audio, respectively.

Update the Home Page

Open the “home.page.ts” file located in the “src/app/home” directory and replace the code with the following:

import { Component } from '@angular/core';
import { MusicService } from '../providers/music.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private musicService: MusicService) {}

  playMusic() {
    const track = '<path-to-audio-file>';
    this.musicService.play(track);
  }

  pauseMusic() {
    this.musicService.pause();
  }

  stopMusic() {
    this.musicService.stop();
  }

}

In this code snippet, we import the MusicService from our music provider service and inject it into the HomePage class. The playMusic() method is called when the user clicks the “Play” button and invokes the play() method of the MusicService. The pauseMusic() and stopMusic() methods call the respective methods in the MusicService.

Update the Home Page Template

Open the “home.page.html” file located in the “src/app/home” directory and replace the code with the following:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Music Player
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="ion-padding">
    <ion-button expand="full" (click)="playMusic()">Play</ion-button>
    <ion-button expand="full" (click)="pauseMusic()">Pause</ion-button>
    <ion-button expand="full" (click)="stopMusic()">Stop</ion-button>
  </div>
</ion-content>

In this code snippet, we define a simple UI with three buttons to play, pause, and stop the music.

Update the Home Page Styles

Open the “home.page.scss” file located in the “src/app/home” directory and replace the code with the following:

ion-content {
  --background: #f4f4f4;
}

.ion-padding {
  padding: 20px;
}

ion-button {
  margin-bottom: 10px;
}

In this code snippet, we define some basic styles to make the UI look visually appealing.

Test the App

Now, let’s run the app and test the functionality.

In your terminal or command prompt, run the following command to start the app in the browser:

ionic serve

This will open the app in your default browser. Click the “Play” button to play the music, “Pause” button to pause the music, and “Stop” button to stop the music.

Conclusion

Congratulations! You have successfully created a music player app using Ionic and Angular. In this tutorial, you learned how to set up a project, add the Cordova Media plugin, create a music provider service, and implement audio playback functionality in your app.

Feel free to expand on this app by adding features like a playlist, audio controls, or even integrate with an online music streaming service.

Happy coding!

Related Post