Categories

Tuesday, October 4, 2022
+919814419350 therichposts@gmail.com
Angular 8Angular 9Angular7MaterialAngular

How to run audio file in Angular 9 application?

How to run audio file in Angular 9 application?
7.61K

Hello to all, welcome on therichpost.com. In this post, I will tell you, How to run audio file in Angular 9 application?

Post Working:

I am implementing audio player into my angular 9 application with this anyone can listen the music on my angular 9 application.
Angular audio player
Angular audio player

Here is the working code snippet and commands, please use carefully:

1. Here are the basics commands you need run to play audio into your Angular 9 application:

ng add @angular/material

npm i @angular/common

npm i @angular/core

npm install ngx-audio-player --save

2. After run the above commands, you have to add below code into your app.module.ts file:

// Import library module
import { NgxAudioPlayerModule } from 'ngx-audio-player';
 
@NgModule({
  imports: [
    // ...
    NgxAudioPlayerModule
  ]
})

3. Now you have to add below code into your app.component.ts file:

// Material Style Basic Audio Player Title and Audio URL
   msbapTitle = 'Audio Title';
   msbapAudioUrl = 'Online MP3 File URL';   
   msbapDisplayTitle = true; 

4. Now you have to add below code into your app.component.html file:

<mat-basic-audio-player [audioUrl]="msbapAudioUrl" [title]="msbapTitle" [autoPlay]="false" muted="muted"
    [displayTitle]="msbapDisplayTitle" [displayVolumeControls]="true" >
</mat-basic-audio-player>

This is it and if you have any kind of query then please comment on below comment section.

Note:

We can also make playlist with this and that I will tell you in my next post.

Jassa

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.