TL;DR: In this article, you will learn how to develop an audio player app using Angular and RxJS. You will handle audio operations and application state using RxJS. To secure your application, you will use Auth0. If needed, you can find the final code in this GitHub repository.

Introduction

Creating an audio player is always an intimidating task, especially if you think about managing the media's state, reacting to media events, and reflecting these changes correctly on the UI (User Interface). So, in this article, you will use Angular and Angular Material (with some other libraries) to easily tackle these challenges.

To handle media playback in a reactive way, you will wrap JavaScript's

Audio

object with an RxJS Observable and you will also use RxJS to manage the state of your audio player.

To provide a secure user experience through your application, you'll add user authentication through Auth0.

Prerequisites

Since you are going to use Angular, you will need to install Node.js in your development machine. So, if you haven't done so yet, go to the download page of Node.js and follow the instructions there.

After Installing it, you will need to install Angular CLI via

npm

npm install -g @angular/cli

If you are using npm v5.2+, you can use
npx
to use
@angular/cli
without installing it by running
npx @angular/cli [options that follow the ng global command]

Scaffolding the app

After installing all the environment dependencies, you can focus on scaffolding your Angular app. To do this, issue the following command on a terminal:

ng new angular-audio

You can use also use

npx

to scaffold the app:

npx @angular/cli new angular-audio

This command will ask you three questions:

Would you like to add Angular routing? (y/N): You can input
```
y
```
(yes) as you are going to use Angular Routing in the app.
Which stylesheet format would you like to use? (Use arrow keys): Select
```
SCSS
```
from the options given.
Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy For more details and how to change this setting, see http://angular.io/analytics. (y/N): If you want to share data with Google press
```
y
```
else press
```
N
```
.

Running the application

Before continuing, make sure you can start your application in the browser. Make

angular-audio

your current working directly:

cd angular-audio

Once there, you can simply run:

npm start

In your browser, visit

http://localhost:4200/

to open the app.

Installing project dependencies

Having confirmed that you can run the basic app in the browser, you can start building this app by installing the dependencies. To build your audio player, you will use the Angular Material Library. You can install it using the

ng add

command:

ng add @angular/material

This command will ask you three questions:

Choose a pre-built theme name, or "custom" for a custom theme: Choose
```
Indigo/Pink
```
Set up HammerJS for gesture recognition?: You can input
```
y
```
(yes) since you need gesture recognition.
Set up browser animations for Angular Material? (Y/n): you can input
```
y
```
(yes) again because you will need animation.

You are also going to use

moment.js

to manipulate dates and times. Install it via

npm

npm install --save moment

Note: RxJS comes bundled with Angular

Developing the Audio Player UI Using Angular Material

In this section, you will design the UI of the application. In the end, your application will look like this:

Image of music/audio player application built with Angular and RxJS

Since your app will use Angular Material Components, you'll need to import them inside your root

NgModule

To do so, create a

material

module using the

ng generate

command:

ng generate module material --module=app --flat

The
ng generate module
command creates the module with the given name; in your case, the name is
material
. The
--module=app
option allows you to specify in which module to import the new one, and
--flat
creates the module into the root directory without creating an extra folder.

The previous command will generate

material.module

in the

/src/app

directory. Replace the content of that file with the following code:

// src/app/material.module.ts
import { NgModule } from "@angular/core";
import {
  MatButtonModule,
  MatListModule,
  MatSliderModule,
  MatIconModule,
  MatToolbarModule,
  MatCardModule
} from "@angular/material";

const modules = [
  MatButtonModule,
  MatListModule,
  MatSliderModule,
  MatIconModule,
  MatToolbarModule,
  MatCardModule
];

@NgModule({
  imports: modules,
  exports: modules
})
export class MaterialModule {}

Then, you are going to create the

app-player

component using the

@angular/cli

ng generate component pages/player --module app

It will generate a

player.component.ts

file and other required files within the

src/app/pages/player/

directory.

Audio player HTML

Inside the

./src/pages/player

directory, you will find the

player.component.html

file. In this file, you will add some HTML to define your player structure. As you will see, the top-level element is a

div

with the

container

class. On the top, you will have a navigation bar which contains the name of the application inside

<mat-toolbar>

Below the header, you will have a

div

element with class

content

which will have your app's logo and a

<mat-list>

with the list of media files.

Finally, the footer

div

element with class

.media-footer

will have two

<mat-toolbar>

elements.

In the first

<mat-toolbar>

, you will have a

<mat-slider>

. This will allow the user to change the current time of the audio track.

In the second

<mat-toolbar>

, you will have rest of the playback controls.

Replace the content of

src/app/pages/player/player.component.html

with the following code:

<!-- src/app/pages/player/player.component.html -->
<div class="container">
    <mat-toolbar color="primary" class="main-toolbar">
      <span>Audio Player</span>
    </mat-toolbar>
    <div class="content">
        <div class="logo">
          <mat-icon>music_note</mat-icon>
          <div>Audio Player</div>
      </div>
      <mat-list color="primary">
        <h3 mat-subheader>Songs</h3>
        <mat-list-item *ngFor="let file of files; let i = index" (click)="openFile(file, i)">
          <mat-icon color="primary" mat-list-icon>music_note</mat-icon>
          <h4 mat-line>{{ file.name }}</h4>
          <h5 mat-line>by {{ file.artist }}</h5>
          <mat-icon color="primary" *ngIf="currentFile.index === i && !state?.error">volume_up</mat-icon>
          <h6 *ngIf="currentFile.index === i && state?.error">ERROR</h6>
          <mat-divider></mat-divider>
        </mat-list-item>
      </mat-list>
    </div>
    <div class="media-footer">
      <mat-toolbar color="primary">
        <mat-toolbar-row>
           {{ state?.readableCurrentTime }}
           <mat-slider class="time-slider" min="0" [max]="state?.duration" step="1" [value]="state?.currentTime" (input)="onSliderChangeEnd($event)" [disabled]="state?.error || currentFile.index === undefined"></mat-slider>
           {{ state?.readableDuration }}
        </mat-toolbar-row>
        <mat-toolbar-row class="media-action-bar">
          <button mat-button [disabled]="isFirstPlaying()" (click)="previous()">
            <mat-icon mat-list-icon>skip_previous</mat-icon>
          </button>
          <button mat-button (click)="play()" [disabled]="state?.error" *ngIf="!state?.playing">
            <mat-icon mat-list-icon>play_circle_filled</mat-icon>
          </button>
          <button mat-button (click)="pause()" *ngIf="state?.playing">
            <mat-icon mat-list-icon>pause</mat-icon>
          </button>
          <button  mat-button [disabled]="isLastPlaying()" (click)="next()">
            <mat-icon mat-list-icon>skip_next</mat-icon>
          </button>
        </mat-toolbar-row>
      </mat-toolbar>
    </div>
</div>

Styling the audio player

Just to improve the look and feel of your app, you will do some minor styling in the

player.component.scss

file (you can find it under

./src/pages/player/

), as shown below:

// src/app/pages/player/player.component.scss
.container {
  .main-toolbar {
    .spacer {
      flex: 1 1 auto;
    }
    .toolbar-btn {
      font-size: 16px;
      margin-right: 5px;
      cursor: pointer;
    }
  }

  .content {
    .logo {
      margin: 2.5rem;
      text-align: center;
      font-size: 24px;
      color: #3f51b5;
      .mat-icon {
        height: 160px !important;
        width: 160px !important;
        font-size: 160px !important;
      }
    }
  }

  .media-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    .time-slider {
      width: 100% !important;
      margin-left: 20px;
      margin-right: 20px;
    }
    .media-action-bar {
      width: 100%;
      padding: 2.5rem;
      justify-content: center;
      .mat-icon {
        height: 48px !important;
        width: 48px !important;
        font-size: 48px !important;
      }
    }
  }
}

To ensure that your application compiles, open

player.component.ts

and update it with the following content which includes mock data:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  files: Array<any> = [
    { name: "First Song", artist: "Inder" },
    { name: "Second Song", artist: "You" }
  ];
  state;
  currentFile: any = {};

  isFirstPlaying() {
    return false;
  }
  isLastPlaying() {
    return true;
  }
}

Updating the router

In order to see the UI, you need to configure the router inside the

app-routing.module.ts

file to use

PlayerComponent

as a route like so:

// src/app/app-routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { PlayerComponent } from "./pages/player/player.component";

const routes: Routes = [
  { path: "", component: PlayerComponent },
  { path: "**", redirectTo: "" }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

You also have to replace the content of

app.component.html

with

<router-outlet></router-outlet>

as following:

<router-outlet></router-outlet>

At this point, you can actually see how the app looks like. Go ahead and spin up the development server with

npm start

and open the browser at

localhost:4200

. You should see this:

Image of music/audio player application built with Angular and RxJS

However, you will observe that none of our buttons are working. Let's start adding functionality to our application.

Creating a Service to Manage the Audio Playback

After creating the audio player UI, you can start working on the playback feature.

Creating playback Observable

The Observable that you are going to create is the central piece of your application. RxJS comes with an

Observable

constructor to help you create custom observables. It takes a

subscribe

function as an input and returns an

Observable

new Observable(subscribe): Observable<T>;

This

subscribe

function takes an

observer

object and returns an

unsubscribe

function. Observer objects provide three methods:

next

error

, and

complete

To emit a value, you can call the
```
observer.next
```
method with the desired value.
In case of an error, you can use the
```
observer.error
```
function to throw the error and make the observable stop.
If you no longer need the observer and there are no more values to emit, you can call the
```
observer.complete
```
method.

Don't be confused with
new Observable(subscribe)
and
Observable.subscribe()
. The
subscribe
method that you pass into the
Observable
constructor is like a blueprint of an Observable and you can execute it by invoking
Observable.subscribe()
method.
To know more about Observables, take a look at Reverse Engineering Observable.

In your audio player app, you are going to create an observable to get notifications about media events like

playing

pause

timeupdate

, and so on. So, basically, you will listen to the media events of

Audio

inside the observable and then notify the rest of the app via the

observer.next

method.

Now that you understand why you need an observable, you can start by creating a service using it in your Angular app:

ng generate service services/audio

This will generate service in a file called

audio.service.ts

under

./src/services/audio/

. Replace the contents of the

audio.service.ts

file with:

// src/app/services/audio.service.ts
import { Injectable } from "@angular/core";
import { Observable, BehaviorSubject, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import * as moment from "moment";

@Injectable({
  providedIn: "root"
})
export class AudioService {
  private stop$ = new Subject();
  private audioObj = new Audio();
  audioEvents = [
    "ended",
    "error",
    "play",
    "playing",
    "pause",
    "timeupdate",
    "canplay",
    "loadedmetadata",
    "loadstart"
  ];

  private streamObservable(url) {
    new Observable(observer => {
      // Play audio
      this.audioObj.src = url;
      this.audioObj.load();
      this.audioObj.play();

      const handler = (event: Event) => {
        observer.next(event);
      };

      this.addEvents(this.audioObj, this.audioEvents, handler);
      return () => {
        // Stop Playing
        this.audioObj.pause();
        this.audioObj.currentTime = 0;
        // remove event listeners
        this.removeEvents(this.audioObj, this.audioEvents, handler);
      };
    });
  }

  private addEvents(obj, events, handler) {
    events.forEach(event => {
      obj.addEventListener(event, handler);
    });
  }

  private removeEvents(obj, events, handler) {
    events.forEach(event => {
      obj.removeEventListener(event, handler);
    });
  }
}

Now, whenever you want to play a new audio file, you will create this observable and listen to all these media events. You will do this via a new method called

playStream()

that you are going to add to the

AudioService

class:

// src/app/services/audio.service.ts
// ... import statements ...

export class AudioService {
  // ... constructors and other methods ...

  playStream(url) {
    return this.streamObservable(url).pipe(takeUntil(this.stop$));
  }
}

“Learn about the power of RxJS observables by building an audio player with Angular and Material Design.”
Tweet This

Adding the playback methods

Now that you have the basis of the

AudioService

, you can develop the rest of its methods:

play

pause

stop

seekTo

, and

formatTime

. As their implementation is self-explanatory, you can simply add these five methods to the

AudioService

service as shown below:

// src/app/services/audio.service.ts
// ... import statements ...

export class AudioService {
  // ... constructors and other methods ...
  play() {
    this.audioObj.play();
  }

  pause() {
    this.audioObj.pause();
  }

  stop() {
    this.stop$.next();
  }

  seekTo(seconds) {
    this.audioObj.currentTime = seconds;
  }

  formatTime(time: number, format: string = "HH:mm:ss") {
    const momentTime = time * 1000;
    return moment.utc(momentTime).format(format);
  }
}

Managing Playback State Using RxJS

In a typical Angular application, you might use some state management library like

NgRx

. But in this application, you are going to use

BehaviorSubject

to manage the state of the application.

You are going to update

AudioService

to manage the state since the state is dependent on audio playback.

Creating StreamState interface

In order to take more advantage of TypeScript's type checking; first, you are going to create an

interface

for state management.

ng g interface interfaces/streamState

This will generate an interface in a file called

stream-state.ts

under

./src/interfaces/

. Replace the content of the file with the following:

// src/app/interfaces/stream-state.ts
export interface StreamState {
  playing: boolean;
  readableCurrentTime: string;
  readableDuration: string;
  duration: number | undefined;
  currentTime: number | undefined;
  canplay: boolean;
  error: boolean;
}

This list explains what these values mean:

```
playing
```
: a boolean which indicates if there is any audio playing
```
readableCurrentTime
```
: a string which gives you the current time of playing audio in a human-readable form
```
readableDuration
```
: the human-readable duration of the current audio
```
duration
```
: the duration of current audio in milliseconds
```
currentTime
```
: the current time of audio in milliseconds
```
canplay
```
: boolean to indicate if you can play the selected audio or not
```
error
```
: a boolean to indicate if an error occurred while playing audio or not

Creating a default state

Now you are going to import the

StreamState

interface and create a

state

object with the initial state as following:

// src/app/services/audio.service.ts
import { StreamState } from '../interfaces/stream-state';

export class AudioService {
  ...
  private state: StreamState = {
    playing: false,
    readableCurrentTime: '',
    readableDuration: '',
    duration: undefined,
    currentTime: undefined,
    canplay: false,
    error: false,
  };
}

Emitting the state changes

You will also need a way to emit state changes. So you are going to use

BehaviorSubject

named

stateChange

. You will also provide and emit the default value of state as shown below. Also, the state is dependent on Audio Events like

playing

pause

and so on. You are going to update state by reacting to those events using the

updateStateEvents

method. The

updateStateEvent

method takes an audio event and set

this.state

. In the end, you are going to emit the latest state via

stateChange

subject as shown:

// src/app/services/audio.service.ts
export class AudioService {
  private stateChange: BehaviorSubject<StreamState> = new BehaviorSubject(
    this.state
  );

  private updateStateEvents(event: Event): void {
    switch (event.type) {
      case "canplay":
        this.state.duration = this.audioObj.duration;
        this.state.readableDuration = this.formatTime(this.state.duration);
        this.state.canplay = true;
        break;
      case "playing":
        this.state.playing = true;
        break;
      case "pause":
        this.state.playing = false;
        break;
      case "timeupdate":
        this.state.currentTime = this.audioObj.currentTime;
        this.state.readableCurrentTime = this.formatTime(
          this.state.currentTime
        );
        break;
      case "error":
        this.resetState();
        this.state.error = true;
        break;
    }
    this.stateChange.next(this.state);
  }
}

Resetting the state

When you need to reset the state. You can do it using

resetState

method as following:

// src/app/services/audio.service.ts
private resetState() {
  this.state = {
    playing: false,
    readableCurrentTime: '',
    readableDuration: '',
    duration: undefined,
    currentTime: undefined,
    canplay: false,
    error: false
  };
}

Reading the state

You are going to need a method to share the

stateChange

BehaviorSubject to the rest of the application. However, providing access to Subject outside the service can be dangerous. So you will use

asObservable

method of

BehaviorSubject

to only return

Observable

part as follows:

// src/app/services/audio.service.ts
export class AudioService {
  getState(): Observable<StreamState> {
    return this.stateChange.asObservable();
  }
}

Updating

streamObservable

Finally, you need to adapt the

streamObservable

method by firing

updateStateEvent

method inside it and also resetting the state during unsubscription. The updated streamObservable looks like this:

// src/app/services/audio.service.ts
private streamObservable(url) {
  return new Observable(observer => {
    // Play audio
    this.audioObj.src = url;
    this.audioObj.load();
    this.audioObj.play();

    const handler = (event: Event) => {
      this.updateStateEvents(event);
      observer.next(event);
    };

    this.addEvents(this.audioObj, this.audioEvents, handler);
    return () => {
      // Stop Playing
      this.audioObj.pause();
      this.audioObj.currentTime = 0;
      // remove event listeners
      this.removeEvents(this.audioObj, this.audioEvents, handler);
      // reset state
      this.resetState();
    };
  });
}

You can check the final version of

AudioService

here.

Reading the Music Files

After managing the state of the application, you will need to create a service to get a list of files. To do so, you can create a cloud service using Angular:

ng generate service services/cloud

This command will generate service in a file called

cloud.service.ts

under

./src/services

. Now, replace the contents of this file with:

// src/app/services/cloud.service.ts
import { Injectable } from "@angular/core";
import { of } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class CloudService {
  files: any = [
    // tslint:disable-next-line: max-line-length
    {
      url:
        "https://ia801504.us.archive.org/3/items/EdSheeranPerfectOfficialMusicVideoListenVid.com/Ed_Sheeran_-_Perfect_Official_Music_Video%5BListenVid.com%5D.mp3",
      name: "Perfect",
      artist: " Ed Sheeran"
    },
    {
      // tslint:disable-next-line: max-line-length
      url:
        "https://ia801609.us.archive.org/16/items/nusratcollection_20170414_0953/Man%20Atkiya%20Beparwah%20De%20Naal%20Nusrat%20Fateh%20Ali%20Khan.mp3",
      name: "Man Atkeya Beparwah",
      artist: "Nusrat Fateh Ali Khan"
    },
    {
      url:
        "https://ia801503.us.archive.org/15/items/TheBeatlesPennyLane_201805/The%20Beatles%20-%20Penny%20Lane.mp3",
      name: "Penny Lane",
      artist: "The Beatles"
    }
  ];

  getFiles() {
    return of(this.files);
  }
}

The

getFiles

method above basically mocks an HTTP request by returning an

Observable

with a hardcoded

files

object.

Stitching All Together

So far you have written code for services and created the UI of the application. Now you will stitch both of them together by implementing

PlayerComponent

The audio player UI controller

To help you control your audio player user interface, you will implement a controller responsible for the following things:

fetching all the media files
adding the playback feature in the app

You will implement the following methods:

```
constructor
```
: creates an instance of Player Component, then it will grab all the media files from the cloud service and finally it will start listening to state updates from
```
AudioService
```
via
```
getState
```
method
```
playStream
```
: it will subscribe to AudioService.playStream to start playing an audio file for the first time
```
play
```
: it will restart the audio playback
```
pause
```
: it will pause the audio playback
```
stop
```
: it will stop the audio playback
```
openFile
```
: it will grab the audio file, set it as the current file and then play it using the
```
playStream
```
method
```
next
```
: it will play the next track from the audio playlist
```
previous
```
: it will play the previous track from the audio playlist
```
isFirstPlaying
```
: it will check if the first track is playing or not
```
isLastPlaying
```
: it will check if the last track is playing or not
```
onSliderChangeEnd
```
: it will fire when the user uses the slider and
```
seekTo
```
that part of the music

First, you will need to import required files and create

files

state

, and

currentFile

properties as shown:

// src/app/pages/player/player.component.ts
import { Component } from "@angular/core";
import { AudioService } from "../../services/audio.service";
import { CloudService } from "../../services/cloud.service";
import { StreamState } from "../../interfaces/stream-state";

// ... @Component declaration ...

export class PlayerComponent {
  files: Array<any> = [];
  state: StreamState;
  currentFile: any = {};
}

constructor

The constructor will create an instance of

PlayerComponent

and fetch the media files and then assign them to

this.files

property. It will also subscribe to state changes and assign it to

this.state

property.

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  constructor(
    public audioService: AudioService,
    public cloudService: CloudService
  ) {
    // get media files
    cloudService.getFiles().subscribe(files => {
      this.files = files;
    });

    // listen to stream state
    this.audioService.getState().subscribe(state => {
      this.state = state;
    });
  }
}

playStream

Method

Then, the

playstream

method can fire the

playStream

method of your

AudioService

. This method on the service returns an observable that you will use to subscribe and start listening to media events like

canplay

playing

, etc. However, you don't really need those values or events because you can read them using the

stateChange

subject. This method is used to start observable and audio playback.

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...\
  playStream(url) {
    this.audioService.playStream(url).subscribe(events => {
      // listening for fun here
    });
  }
}

openFile

Method

Whenever the user clicks on a media file, the

openFile

method will be fired. Then, this method will fire the

playStream

method with the

URL

of the

file

chosen.

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  openFile(file, index) {
    this.currentFile = { index, file };
    this.audioService.stop();
    this.playStream(file.url);
  }
}

pause

Method

Once the

playStream

method is fired, the media playback is initiated. As such, your users might want to pause the playback. For that, you will implement the

pause

method as follows:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  pause() {
    this.audioService.pause();
  }
}

play

Method

It's also true that users might want to start playing the media again. For that, you will add the following:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  play() {
    this.audioService.play();
  }
}

stop

Method

Then, to stop the media, you will add the following method:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  stop() {
    this.audioService.stop();
  }
}

The

next

Method

Also, to let your users move to the next music, you will define the following method:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  next() {
    const index = this.currentFile.index + 1;
    const file = this.files[index];
    this.openFile(file, index);
  }
}

The

previous

Method

Similarly, you will need to provide a method to play the previous track:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  previous() {
    const index = this.currentFile.index - 1;
    const file = this.files[index];
    this.openFile(file, index);
  }
}

The

isFirstPlaying

and

isLastPlaying

Methods

Then, you will need two helper methods to check if the music being played is the first or the last track from the playlist. You use these methods to disable and enable the UI buttons:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  isFirstPlaying() {
    return this.currentFile.index === 0;
  }

  isLastPlaying() {
    return this.currentFile.index === this.files.length - 1;
  }
}

The

onSliderChangeEnd

Methods

Also, you will want to enable your users to do seek operations. So, when the seek operation ends, Angular will fire the

onSliderChangeEnd

method and, in it, you can fetch the time selected by the user and seekTo that time:

// src/app/pages/player/player.component.ts
// ... import statements and @Component declaration ...
export class PlayerComponent {
  // ...constructor and other methods ...
  onSliderChangeEnd(change) {
    this.audioService.seekTo(change.value);
  }
}

Building and running the audio player

After implementing the application, you can run it via @angular/cli:

npm start

The above command will spin up a web server at

http://localhost:4200/

Authentication with Auth0

To develop a secure app, you are going to rely on Auth0 to handle the authentication of your users. As such, you can sign up for a free Auth0 account here. Then, you will need to set up an Auth0 Application to represent your mobile app.

Installing dependencies

To secure your Angular app with Auth0, you will have to install

auth0-js

via npm:

npm install --save auth0-js

Set up an Auth0 application

Go to your Auth0 Dashboard and click the "create a new application" button.
Name your new app (e.g. "Angular Audio Player"), select "Single Page Application" as its type, and click the "Create" button.
In the Settings tab of your new Auth0 app, add
```
http://localhost:4200
```
in the Allowed Callback URLs.
Add
```
http://localhost:4200
```
to both the Allowed Web Origins and Allowed Logout URLs.
Click the "Save Changes" button.

Configuring Auth0

Now you are going to add Auth0 Configuration to the

environment.ts

file under

src/environment

directory:

// src/environment/environment.ts
export const environment = {
  production: false,
  auth0: {
    clientID: "[YOUR_AUTH0_CLIENT_ID]",
    domain: "[YOUR_AUTH0_DOMAIN]",
    redirectUri: "http://localhost:4200",
    logoutUrl: "http://localhost:4200"
  }
};

This list explains what these values mean:

```
clientID
```
: the Client Id property available in your Auth0 Application.
```
domain
```
: your Auth0 Domain (e.g.
```
your-domain.auth0.com
```
```
redirectUri
```
: the URL where the user will be redirected after login. You can use the same URL as your callback URL here
```
logoutUrl
```
: the URL that you want your user to direct when he/she log out.

Auth service

After creating your Auth0 account and defining the Auth0 config in the environment file, you will need to define an authentication service in your Angular app. To do so, you will use

@angular/cli

ng generate service services/auth

This command will generate service in a file called

auth.service.ts

under

./src/services

. Now, replace the contents of this file with:

// src/app/services/auth.service.ts
import { Injectable } from "@angular/core";
import * as auth0 from "auth0-js";
import { environment } from "../../environments/environment";
import { Observable, BehaviorSubject, bindNodeCallback, of } from "rxjs";
import { Router } from "@angular/router";

@Injectable({
  providedIn: "root"
})
export class AuthService {
  auth0 = new auth0.WebAuth({
    clientID: environment.auth0.clientID,
    domain: environment.auth0.domain,
    responseType: "token id_token",
    redirectUri: environment.auth0.redirectUri,
    scope: "openid profile email"
  });

  // Track whether or not to renew token
  private _authFlag = "isLoggedIn";
  private _userProfileFlag = "userProfile";

  // Store authentication data
  // Create stream for token
  token$: Observable<string>;
  // Create stream for user profile data
  userProfile$ = new BehaviorSubject<any>(null);

  // Authentication Navigation
  onAuthSuccessUrl = "/";
  onAuthFailureUrl = "/";
  logoutUrl = environment.auth0.logoutUrl;

  // Create observable of Auth0 parseHash method to gather auth results
  parseHash$ = bindNodeCallback(this.auth0.parseHash.bind(this.auth0));
  // Create observable of Auth0 checkSession method to
  // verify authorization server session and renew tokens
  checkSession$ = bindNodeCallback(this.auth0.checkSession.bind(this.auth0));

  constructor(private router: Router) {
    const userProfile = localStorage.getItem(this._userProfileFlag);
    if (userProfile) {
      this.userProfile$.next(JSON.parse(userProfile));
    }
  }

  login = () => this.auth0.authorize();

  handleLoginCallback = () => {
    if (window.location.hash && !this.authenticated) {
      this.parseHash$().subscribe({
        next: authResult => {
          this._setAuth(authResult);
          window.location.hash = "";
          this.router.navigate([this.onAuthSuccessUrl]);
        },
        error: err => this._handleError(err)
      });
    }
  };

  private _setAuth = authResult => {
    // Save authentication data and update login status subject
    // Observable of token
    this.token$ = of(authResult.accessToken);

    const userProfile = authResult.idTokenPayload;
    // Emit value for user data subject
    this.userProfile$.next(userProfile);
    // save userProfile in localStorage
    localStorage.setItem(this._userProfileFlag, JSON.stringify(userProfile));

    // Set flag in local storage stating this app is logged in
    localStorage.setItem(this._authFlag, JSON.stringify(true));
  };

  get authenticated(): boolean {
    return JSON.parse(localStorage.getItem(this._authFlag));
  }

  renewAuth() {
    if (this.authenticated) {
      this.checkSession$({}).subscribe({
        next: authResult => this._setAuth(authResult),
        error: err => {
          localStorage.removeItem(this._authFlag);
          localStorage.removeItem(this._userProfileFlag);
          this.router.navigate([this.onAuthFailureUrl]);
        }
      });
    }
  }

  logout = () => {
    // Set authentication status flag in local storage to false
    localStorage.setItem(this._authFlag, JSON.stringify(false));
    // remove the userProfile data
    localStorage.removeItem(this._userProfileFlag);

    // This does a refresh and redirects back to the homepage
    // Make sure you have the logout URL in your Auth0
    // Dashboard Application settings in Allowed Logout URLs
    this.auth0.logout({
      returnTo: this.logoutUrl,
      clientID: environment.auth0.clientID
    });
  };

  // Utility functions

  private _handleError = err => {
    if (err.error_description) {
      console.error(`Error: ${err.error_description}`);
    } else {
      console.error(`Error: ${JSON.stringify(err)}`);
    }
  };
}

To better understand how the code above works, take a look into the following explanation:

```
auth0
```
: is an instance of
```
auth0-WebAuth
```
, which you will use for the authentication
```
_authFlag && _userProfileFlag
```
: are the
```
localStorage
```
keys for storing authentication and user profile data
```
token$
```
: an
```
Observable
```
which emits access token
```
userProfile$
```
: this
```
BehaviorSubject
```
creates a stream for the profile data
```
onAuthSuccessUrl && onAuthFailureUrl
```
: the URLs which Auth0 will redirect to after success and failure of authentication respectively
```
logoutUrl
```
: the URL where the user is redirected after log out
```
parseHash$
```
: an
```
Observable
```
which parse the hash and gives you back the auth result
```
checkSession$
```
: an
```
Observable
```
use to check the session and then renew the token if it is required

Now, take a look at the methods of the service above:

```
constructor
```
: In the constructor, you are going to check if there is any user information stored in
```
localStorage
```
. If yes, then you will emit it via
```
userProfile$
```
BehaviorSubject
```
login()
```
: In the login method, you authorize the user
```
handleLoginCallback()
```
: After authentication, this method is going to be fired. It uses
```
parseHash$
```
Observable to parse the auth result and then it sets the authentication state using
```
this._setAuth
```
method and finally redirect to
```
onAuthSuccessUrl
```
```
_setAuth()
```
: takes
```
authResult
```
from parsed Auth data and initializes
```
token$
```
. sets the Auth State in
```
localStorage
```
along with
```
userProfile
```
data
```
authenticated()
```
: is used to check if the user is authenticated or not using
```
localStorage
```
flag
```
renewAuth()
```
: checks if the user is authenticated or not and then check session if it's valid or not and set's auth state respectively
```
logout()
```
: it logs out the user by removing auth state and user data from
```
localStorage
```
. It also calls the
```
auth0.logout
```
method which redirects the user to given
```
logoutUrl
```

Auth guard

Now that you have created AuthService. You can create

AuthGuard

, which allows you to secure routes of the application. Use Angular Cli to generate the guard as follows:

ng generate guard guards/auth

This command will generate the

auth.guard.ts

file under

/src/app/guards

directory. Update the content of the file with the following:

// src/app/guards/auth.guard.ts
import { Injectable } from "@angular/core";
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { AuthService } from "../services/auth.service";
import { Router } from "@angular/router";

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.authenticated) {
      return true;
    } else {
      this.router.navigate(["/"]);
      return false;
    }
  }
}

It basically checks if the user is logged in or not. If the user is logged in, it allows the user to access the given route otherwise redirect the user to

route.

Updating the UI

Now that you have created the

AuthService

and

AuthGuard

, you can use them to add authentication to the player.

Profile page

First, you are going to create an extra page for the player. You are going to add user profile information on that page. You will use

@angular/cli

ng g component pages/profile --module app

Open the

profile.component.ts

file in

pages/profile

directory and add the following content:

// src/app/pages/profile/profile.component.ts
import { Component, OnInit } from "@angular/core";
import { AuthService } from "src/app/services/auth.service";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"]
})
export class ProfileComponent implements OnInit {
  userProfile;
  constructor(authService: AuthService) {
    authService.userProfile$.subscribe(profile => {
      this.userProfile = profile;
    });
  }

  ngOnInit() {}
}

Now open the

profile.component.html

add the following content:

<!-- src/app/pages/profile/profile.component.html -->
<div class="container">
    <mat-toolbar color="primary" class="main-toolbar">
      <mat-icon class="back-btn" routerLink="/">arrow_back</mat-icon>
      <span>Audio Player - Profile</span>
      <span class="spacer"></span>
    </mat-toolbar>
    <mat-card class="profile-card">
        <img mat-card-image [src]="userProfile?.picture"/>
        <mat-card-content>
            <mat-card-title>{{ userProfile?.name }}</mat-card-title>
        </mat-card-content>
      </mat-card>
</div>

Finally, open the

profile.component.scss

and add the following content:

// src/app/pages/profile/profile.component.scss
.back-btn {
  margin-right: 5px;
  cursor: pointer;
}

.profile-card {
  margin: 20px;
  max-width: 400px;
}

User can access this component at

/profile

URL.

You have to add this route to

router

config in the

app-routing.module.ts

file as follows:

// src/app/app-routing.module.ts
// ... imports statements
const routes: Routes = [
  { path: "", component: PlayerComponent },
  { path: "profile", component: ProfileComponent },
  { path: "**", redirectTo: "" }
];

// ... AppRoutingModule class

Updating player component

You also have to update the player component by adding the Authentication UI and also link to the Profile page. You are going to update

player.component.html

by adding the

<mat-toolbar>

in the header as follows:

<!-- src/app/pages/player/player.component.html -->
<mat-toolbar color="primary" class="main-toolbar">
  <span>Audio Player</span>
  <span class="spacer"></span>
  <span class="toolbar-btn" *ngIf="!auth.authenticated" (click)="auth.login()">LOGIN </span>
  <span class="toolbar-btn" *ngIf="auth.authenticated" (click)="auth.logout()">LOGOUT</span>
  <span class="toolbar-btn" *ngIf="auth.authenticated" routerLink="/profile">PROFILE</span>
</mat-toolbar>

Along with Toolbar, you have to hide the playlist if user is not logged in. You can simply add

*ngIf="auth.authenticated"

to the playlist as follows:

<!-- src/app/pages/player/player.component.html -->
<mat-list color="primary" *ngIf="auth.authenticated">
  <h3 mat-subheader>Songs</h3>
  <mat-list-item *ngFor="let file of files; let i = index" (click)="openFile(file, i)">
    <mat-icon color="primary" mat-list-icon>music_note</mat-icon>
    <h4 mat-line>{{ file.name }}</h4>
    <h5 mat-line>by {{ file.artist }}</h5>
    <mat-icon color="primary" *ngIf="currentFile.index === i && !state?.error">volume_up</mat-icon>
    <h6 *ngIf="currentFile.index === i && state?.error">ERROR</h6>
    <mat-divider></mat-divider>
  </mat-list-item>
</mat-list>

Also, you have to inject the AuthService inside

PlayerComponent

as follows:

// src/app/pages/player/player.component.ts
// ... import statements and @Component Decorator
constructor(public audioService: AudioService,
  public cloudService: CloudService,
  public auth: AuthService) {
 // ... constructor code
}

// ... rest of the methods

Updating

AppComponent

Finally, you have to update the

app.component.ts

file to handle authentication as follows:

// src/app/app.component.ts
import { Component } from "@angular/core";
import { AuthService } from "./services/auth.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  constructor(public auth: AuthService) {
    auth.renewAuth();
    auth.handleLoginCallback();
  }
}

Running

You can run the application using

@angular/cli

npm start

“Adding authentication to an Angular app is simple and secure using Auth0 with RxJS!”
Tweet This

Conclusion

In this article, you created an audio player app with Angular. You used RxJS to develop audio playback features and handle state management. Beyond that, you also used Auth0 to handle user authentication in your app. With this, you have finished developing the application with static audio content.

I hope you enjoyed this article. Again, you can find the final code in this GitHub repository. See you next time!

About the author

Indermohan Singh

Mobile Developer

Indian expat living and working in Vienna, Austria. Besides programming, I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.View profile

Building an Audio Player app with Angular and RxJS

Introduction

Prerequisites

Scaffolding the app

Running the application

Installing project dependencies

Developing the Audio Player UI Using Angular Material

Audio player HTML

Styling the audio player

Updating the router

Creating a Service to Manage the Audio Playback

Creating playback Observable

Adding the playback methods

Managing Playback State Using RxJS

Creating StreamState interface

Creating a default state

Emitting the state changes

Resetting the state

Reading the state

Updating streamObservable

Reading the Music Files

Stitching All Together

The audio player UI controller

constructor

playStream Method

openFile Method

pause Method

play Method

stop Method

The next Method

The previous Method

The isFirstPlaying and isLastPlaying Methods

The onSliderChangeEnd Methods

Building and running the audio player

Authentication with Auth0

Installing dependencies

Set up an Auth0 application

Configuring Auth0

Auth service

Auth guard

Updating the UI

Profile page

Updating player component

Updating AppComponent

Running

Conclusion

Indermohan Singh

Updating
`streamObservable`

`constructor`

`playStream`
Method

`openFile`
Method

`pause`
Method

`play`
Method

`stop`
Method

The
`next`
Method

The
`previous`
Method

The
`isFirstPlaying`
and
`isLastPlaying`
Methods

The
`onSliderChangeEnd`
Methods

Updating
`AppComponent`