Streaming Audio Player app develop by Angular

This is the angular live project on audio player for website and mobile.

Shibaji Debnath

Streaming Audio Player app develop by Angular

If you want to making a realtime angular application. I give A Streaming Audio Player application tutorial. I think you will be very enjoy this tutorials.

Introduction

This app develop with JavaScript technology. here you can manage JavaScript Audio object and Angular Material using here for UI(User Interface). From ui we can managed Audio States.

Prerequisites

When you will be start any angular project first you need NodeJS Environment in your system. After then you need Angular Cli(Command Line Interface).

npm install -g @angular/cli

If you are using Linux or Mac OS System then you will be write sudo before the command.

Application Project Creation:

Now we need to create a Project Scaffolding.

ng new AudioProject

After then getting Two questions.

  1. Would you like to add Angular routing? (y/N): You can input N (no) as you are going to use Angular Routing in the app.
  2. Which stylesheet format would you like to use? (Use arrow keys): Select SCSS from the options given.

Running The Project

First need to go project folder cd AudioProject using this command. Then we will be run our basic application npm start using this command. After then you will get default interface on your browser using http://localhost:4200 this URL address.

Installing Angular Material UI

If project works fine. then we need to install angular material dependancy in our project.

ng add @angular/material

after this command you will be get these questions.

  1. Choose a pre-built theme name, or “custom” for a custom theme: Choose Indigo/Pink
  2. Set up browser animations for Angular Material? (Y/n): you can input y (yes) again because you will need animation.

Here we need another dependency  moment.js to manipulate dates and times. Install it via npm:

npm install --save moment

Audio Player UI creates by Angular Material

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

First need to be Add Material Modules in app.module.ts. Follow The Procedure first we need another module called material.module.ts. Use this commend

ng generate module material --flat

–flat flag is important for non directory module creation. then write the code:

Go to SRC folder and then open app folder and Write this codes in

metarial.module.ts

app.component.html

app.component.scss

After writing this codes we need to be create AudioService class using angular command

ng generate service services/audio

Here we are creating HtmlAudio object and Manipulate with RXJS classes and functions. See The codes.

Here we need moment js. This is a third party library for Time Format support. so it need to be install from npm server.

npm install moment --save

audio.service.ts

Finally we need Cloud Audio list. So we need CloudService class. So we will be use this angular command.

ng generate service services/cloud

cloud.service.ts

After writing all these codes. open assets folder there put image1.jpg named picture. Then Finally Run the the development server using

npm start

You can view live demo: https://shibajidebnath.com/radio/

Screen Shot

Shibaji's Personal Radio

30% Off

Session Offer

Will be expaired On

Call Now