PROJECT REPORT

WEB BASED MUSIC PLAYER IN ANGULARJS WITH NODEJS

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE AWARD

OF THE DEGREE OF

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE ENIGNEERING

Shivam Kumar Mishra

MAU16UCS026

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

MAHARARAJA AGRASEN INSTITUE OF TECHNOLOGY

MAHARAJA AGRASEN UNIVERSITY
HIMACHAL PRADESH
 DECLARATION

I hereby declare that the project work entitled “Web Based Music Player in AngularJs with
NodeJs” is an authentic record of my own work carried out at Maharaja Agrasen Institute of
Technology, MAU, HP during my VIIth Semester as a part of Project Submission for the award of the
degree B.Tech in Computer Science & Engineering by Maharaja Agrasen Institute of Technology,
Maharaja Agrasen University, Himachal Pradesh, under the guidance of Er. Amit Verma, during
July 2019 to November, 2019.

Shivam Kumar Mishra

MAU16UCS026

Date: 2nd November, 2019

Certified that the above statement made by the student is correct to the best of our knowledge and
belief.

Er. Amit Verma

Asst. Prof CSE
Faculty Coordinator

i
 ACKNOWLEDGEMENT

I take this opportunity to express my sincere gratitude to my parents and people who have been
helpful in the successful completion of industrial training and this project. I would like to show my
greatest appreciation to the highly esteemed and devoted technical staff, supervisors of the
Maharaja Agrasen University, MAU, HP. I am highly indebted to them for their tremendous
support and help during the completion of my training and project.

I am grateful to Er. Amit Verma of CSE Department.and Er. Sushil Bansal, HOD of CSE
Department of Maharaja Agrasen Institute of Technology who granted me the permission for
industrial training. I would like to thank to all those people who directly or indirectly helped and
guided me to complete my project, including the instructors and technical officers of Maharaja
Agrasen University and various sections.

SHIVAM KUMAR MISHRA

MAU16UCS026

ii
 LIST OF CONTENTS

List of Contents…………………………………………………………………………...iii

List of Figures………………………………………………………………………….….v

1.0. Summary………………………………………………………………………….…..1

2.0. Work………………………………………………………………….…….………....3

3.0. Introduction…………………………………………………………………….……..4

4.0. Hardware & Software Requirements …………………………...…………….……..5

4.1. Hardware Requirements………………………………….…….…………….5

4.2. Software Requirements...............................................................................5

4.3. Operating System………………………………….………….…….………..5

4.4. Technologies Used…………………………………………………………...5

5.0. System Requirement Analysis……………………………...……………….…….…6

5.1. System Requirement Analysis………………………………………….…...6

6.0. Technology Overview…………….………………………………. ….……….…….8

6.1. AngularJs……………………………………………………………….…....8

6.2. NodeJs................................................................................................…...10

6.3. AngularJs SoundManager2 …………………………………………….…...21

6.4. Directives ………….………....……………………………………………..21

iii
7.0. System Design …….……………………………………….………………………..24

7.1. UI Hierarchy Diagram ………………………….………….……………….24

7.2. Flow Chart ………………………………….……………….……………...25

8.0. How the project works ………………………………………………………….…..26

8.1. Working Principle …………………………………………………………..27

9.0. Feasibility of Project …...…………….……….…….………….…………………..28

9.1. Technical Feasibility …...…………….…………….…………. ….….…...28

9.2. Operational Feasibility…...………………...………………….…….……..29

9.3. Economic Feasibility …. ….………………….……………….……….......30

10.0. Web Application Testing ……………………………………….………...……….31

10.1. Functionality Testing……………………………………………….……..31

10.2 Usability Testing……………………………………….….……………….31

10.3 Interface Testing……………………………………….….……………….31

10.4 Capability Testing………………………………………………………….31

10.5 Performance Testing ………………………………………………………32

10.6 Security Testing …………………………………………………...………32

11.0. Source Code…………………………………………………….………………….33

12.0. Screenshots.…………………………………………………….………………….45

13.0. Conclusion…………………...………………………………….…………………49

14.0. Bibliography………………………………………………….…….……………...51

iv
 LIST OF FIGURES

Fig.6.1: AngularJS CONCEPT………………………………………………………………9

Fig 6.2: NodeJs CONCEPT…………………………………………………………………12

Fig 7.1: UI Hierarchy Diagram……………………………………………………………...24

Fig 7.2: Flow Chart…………………….……………………………………………………25

Fig 12.1: INDEX PAGE ( HOME PAGE) …………………………………………………45

Fig 12.2: PLAYER AND CONTROLS OF PLAYER……………………………………...46

Fig 12.3: PLAY LIST AND OTHER FUNCTIONS………………………………………..47

Fig 12.4: NODE SERVER START AND RUN…………………………………………….48

v
 1.0 SUMMARY

This is a project named Web Based Music Player. This project is done using HTML, CSS,
JAVASCRIPT, ANGULARJS AND NODEJS.

This project covers:

Introduction

In this we introduce Web Based Music Player in which we can listen various types of
songs according to our Mood, Artist, Album and Language. Here we can also put any song
in our favorite list and further listening.

➢Work

The work that had been done in VIIth Semester of my B.Tech Degree.

➢Hardware and Software specification

In this section we have discussed about the configuration of software and hardware we
had used in making this project.

➢System Requirement Analysis

In this we discuss about System Requirement and System development i.e. a process of
developing software and hardware on the basis of the requirement of the end user to develop
efficient and good quality product. It is necessary to follow a procedure.

➢Technology Overview

In this we discuss about the technology used for building up the project.

1
➢System Design

In this we discuss about project design through various types of diagrams.

➢How the project works

In this we discuss the working of the project.

➢Technical Feasibility

This is concerned with specifying equipment and software that will successfully satisfy the
user requirement.

➢System Testing

System testing is very critical element of software quality assurance and represents the
ultimate reviews of specification, design and coding.

➢Source Code

Contains the source code of the project.

➢Screenshots

Images of the output screen which shows working of every module of the system

➢
Conclusion

➢
Bibliography

2
 2.0 WORK

I had done my B.Tech in CSE from Maharaja Agrasen Institute of Technology, MAU, HP. During the
period of VIIth Semester, I have learnt AngularJs and NodeJs and their implementation in various
field of Web designing and Web development.

In this period, I got the knowledge about how to design and develop programs in Angular Java script
and its connectivity. Under the guidance of the industry experts I also got to know a brief
introduction of how to embed java script code for different purposes and using this knowledge I
gained and under their guidance I made this Web Based music Player project. I have done this
project using AngularJs and NodeJs.

3
 3.0 INTRODUCTION

This is a project named Web Based Music Player which is submitted for the Summer Training,
2019.This project is done using HTML, CSS, JAVASCRIPT, ANGULARJS AND NODEJS.

If you are searching for a simple and lightweight solution to enable music on your website,
regardless of the user's internet browser, the best solution is to use a media player that is
compatible with Flash as it is normally found on most browsers.

Be careful of breaching copyright law if you are playing commercial tracks that you do not have
the rights to, as it can result in a costly lawsuit. It is possible to obtain broadcasting rights,
allowing you to play copyrighted music.

There are, however, copyright-free songs that you can use on your site without fear of legal action.
You can find out more about the free music that is available here. And if this project can help
people become more aware of their surroundings then it’d be a blessing for me.

A music player made with SoundManager 2 API for AngularJs to play music files.

SoundManager 2 brings reliable cross-platform audio to JavaScript.

Requirements: AngularJS 1.2+

Features

* Simple to use (use of directives)

* Playlist support

* Soundcloud support

* Easy to understand and extend API

4
 4.0 HARDWARE & SOFTWARE REQUIREMENT

In this step we analyzed the processing capabilities of the system and hardware requirement on
which the proposed system would be developed.

4.1 Hardware Requirements

❖For Training Purposes:

 Intel i3 Generation 3 Processor or equivalent or higher

 2 GB RAM or higher

 20 GB HDD space or higher

❖For Testing/ Execution Purposes:

 Node Server/ Web Browser/ Intel i3 Generation 3 Processor or equivalent or higher

 2 GB RAM or higher

 20 GB HDD space or higher

4.2 Software Requirements

 Microsoft Windows or Linux

 AngularJS 1.2+

 AngularJs SoundManager2
4.3 Operating Systems:

 Microsoft Windows

 Linux
4.4 Technologies Used:

 AngularJs

 NodeJs

5
 5.0 SYSTEM REQUIREMENT ANALYSIS

5.1 System Requirement Analysis

The System Requirement Specification provides a narrative description of each subsystem and
a definition of all data that flow between subsystems. The System Requirement Specification
forms the foundation for all engineering work that follows. These specifications analyse the
behaviour of the system with the external events and the functionality of the system elements.

This phase comes into picture while developing project when analysis phase is over. This step
takes care that whatever problem has been recognized is correct because the user requirements
keeps changing and for creation of successful product it’s necessary that the software deliver goods
at every level of work. For this the requirements and the problem to be solved must be thoroughly
known and then they must be worked upon.

It specifies the goals and objectives of the project, describing its context with system as a whole.
System requirement analysis bridges the gap between system level requirements engineering a
find software design. Requirement engineering activities result in the specification of software’s
operational characteristics, indicate software’s interface with other system elements, and establish
constraints that software must meet. Requirement analysis allows the software engineer to refine the
software allocation and build models of data, functional and behavioral domains that will be treated
by software.

Requirement analysis provides the software designer with a representation of information,

function, and behavior that can be translated to data, architectural, interface, and component
level designs. Finally, the requirement specification provides the developer and the customer with
the means to assess quality software is built.
• Planning
Planning is an objective of each and every activity, where we want to discover things that
belong to the project. An important task in creating a software program is extracting
the requirements or requirements analysis.
 Implementation, testing and documenting
Implementation is the part of the process engineers program the code for the project.

6
 Software testing is an integral and important phase of the software development process.
This part of the process ensures that defects are recognized as soon as possible.

Documenting the internal design of software for the purpose of future maintenance and
enhancement is done throughout development. This may also include the writing of an API,
be it external or internal

 Deployment and maintenance

Deployment starts after the code is appropriately tested, approved for release, and sold or
otherwise distributed into a production environment. This may involve installation,
customization (such as by setting parameters to the customer's values), testing, and possibly
an extended period of evaluation.
Maintaining and enhancing software to cope with newly discovered faults or requirements
can take substantial time and effort, as missed requirements may force redesign of the
software.

7
 6.0 TECHNOLOGY
OVERVIEW

The technology selected for implementing the project is AngularJs and NodeJs. The development
was done in a “windows” environment using visual studio code IDE and Node with pre-installed
and some newly installed libraries like angular-soundmanager2.
 AngularJs

 NodeJs

 Node Server

 Other Libraries (AngularJs SoundManager2)

➢ 6.1 AnguarJs

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA)
projects. It extends HTML DOM with additional attributes and makes it more responsive to user
actions. AngularJS is open source, completely free, and used by thousands of developers around
the world. It is licensed under the Apache license version 2.0.

AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your
template language and lets you extend HTML's syntax to express your application components
clearly and succinctly. Its data binding and dependency injection eliminate much of the code you
currently have to write. And it all happens within the browser, making it an ideal partner with any
server technology.
The general features of AngularJS are as follows −

 AngularJS is an efficient framework that can create Rich Internet Applications (RIA).

 AngularJS provides developers an options to write client side applications using JavaScript
in a clean Model View Controller (MVC) way.

 Applications written in AngularJS are cross-browser compliant. AngularJS automatically

handles JavaScript code suitable for each browser.

8
  AngularJS is open source, completely free, and used by thousands of developers around the
world. It is licensed under the Apache license version 2.0.

Overall, AngularJS is a framework to build large scale, high-performance, and easy to-maintain
web applications.

Fig.6.1: AngularJS CONCEPT

CORE FEATURES: -

The core features of AngularJS are as follows −

 Data-binding − It is the automatic synchronization of data between model and view

components.

 Scope − These are objects that refer to the model. They act as a glue between controller and
view.

9
  Controller − These are JavaScript functions bound to a particular scope.

 Services − AngularJS comes with several built-in services such as $http to make a XML
Http Requests. These are singleton objects which are instantiated only once in app.

 Filters − These select a subset of items from an array and returns a new array.

 Directives − Directives are markers on DOM elements such as elements, attributes, css,
and more. These can be used to create custom HTML tags that serve as new, custom widgets.
AngularJS has built-in directives such as ngBind, ngModel, etc.

 Templates − These are the rendered view with information from the controller and model.
These can be a single file (such as index.html) or multiple views in one page using partials.

 Routing − It is concept of switching views.

 Model View Whatever − MVW is a design pattern for dividing an application into
different parts called Model, View, and Controller, each with distinct responsibilities.
AngularJS does not implement MVC in the traditional sense, but rather something closer to
MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model
View Whatever.

 Deep Linking − Deep linking allows to encode the state of application in the URL so that
it can be bookmarked. The application can then be restored from the URL to the same state.

 Dependency Injection − AngularJS has a built-in dependency injection subsystem that

helps the developer to create, understand, and test the applications easily.

➢6.2 NodeJs

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable
network applications. Node.js uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient, perfect for data-intensive real-time applications that run across distributed
devices. Node.js is an open source, cross-platform runtime environment for developing server-side

10
and networking applications. Node.js applications are written in JavaScript, and can be run within
the Node.js runtime on OS X, Microsoft Windows, and Linux.

Node.js also provides a rich library of various JavaScript modules which simplifies the development
of web applications using Node.js to a great extent.

FEATURES: -

Following are some of the important features that make Node.js the first choice of software
architects.

 Asynchronous and Event Driven − All APIs of Node.js library are asynchronous, that
is, non-blocking. It essentially means a Node.js based server never waits for an API to return
data. The server moves to the next API after calling it and a notification mechanism of
Events of Node.js helps the server to get a response from the previous API call.

 Very Fast − Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very
fast in code execution.

 Single Threaded but Highly Scalable − Node.js uses a single threaded model with
event looping. Event mechanism helps the server to respond in a non-blocking way and
makes the server highly scalable as opposed to traditional servers which create limited
threads to handle requests. Node.js uses a single threaded program and the same program
can provide service to a much larger number of requests than traditional servers like Apache
HTTP Server.

 No Buffering − Node.js applications never buffer any data. These applications simply
output the data in chunks.

 License − Node.js is released under the MIT license

11
 Fig 6.2: NodeJs CONCEPT

Following are the areas where Node.js is proving itself as a perfect technology partner.

 I/O bound Applications

 Data Streaming Applications

 Data Intensive Real-time Applications (DIRT)

 JSON APIs based Applications

 Single Page Applications

12
6.3 AngularJs SoundManager2

INSTALLATION: -

Install via bower: bower install angular-soundmanager2

include required file: dist/angular-soundmanager2.js

include the angularSoundManager as a dependency for your app

angular.module('myApp', ['angularSoundManager'])

That's it -- you're done!

6.4 Directives

Required to initialize soundmanager

<sound-manager></sound-manager>

Current Playing Track status

Currently Playing: { currentPlaying.title } by { currentPlaying.artist } ({ currentPostion } / {

currentDuration })

Add Music: <button music-player add-song="song">+</button>

To add + play selected track:

<button music-player="play" add-song="song">{song.title}</button>

To play song from playlist:

<a play-from-playlist="song">{song.title}</a>

21
Remove from playlist:

<a remove-from-playlist="song" data-index="{$index}">Remove</a>

Seek Track:

<div class="seekBase" seek-track>

<div class="seekLoad" ng-style="{width : ( progress + '%' ) }"></div>
</div>
Play Track:

<button play-music>Play</button>
Play All Track:

<button play-all="songs" data-play="false">Add all</button>

Pause track:

<button pause-music>Pause</button>

Stop track:

<button stop-music>Stop</button>

Previous track:

<button prev-track>Prev Track</button>

Next Track:

<button next-track>Next Track</button>

Mute:

<button mute-music>Mute ({ mute })</button>

Repeat Track:

22
<button repeat-music>Repeat ({ repeat })</button>

Volume: Up and Down

<button music-volume data-type="increase">+</button>

<button music-volume data-type="decrease">-</button>

Clear Playlist:

<button clear-playlist>Clear Playlist</button>

23
 7.0 SYSTEM DESIGN

7.1 UI Hierarchy Diagram: -

Description: User Interface & sub module describe the module information with name &
character wise display.

Fig 7.1: UI Hierarchy Diagram

24
7.2 Flow chart

This is the blueprint of our project and the logic behind flow chat is something like that –

A flowchart is a type of diagram that represents an algorithm, workflow or process. The

flowchart shows the steps as boxes of various kinds, and their order by connecting the boxes
with arrows. This diagrammatic representation illustrates a solution model to a given problem.

Fig 7.2: Flow Chart

25
 8.0 HOW THE PROJECT WORKS

MUSIC PLALYER -

This is the main module; users can play their favorite uploaded music from this page. First, by
default, we will display the albums with album name and image. User can click on any of their
favorite albums to play the music. When user clicks on the album image, we will play the first
song of that album, by default. Users can add any number of songs to their albums to play.

UPLOAD AND MANAGE SONG-

After the user selects the album, we will check for the songs to be added in the album. If there
are no songs for the selected album, then we display the message as "No Songs has been added
in this Album". If album has songs, then we display our Shanu Music Player. From this page,
the user can change and play any songs from the list as per his/her choice. In the player, we will
display the album image and the title along with the current playing song file name. In the list,
we will also display singer name, music file name, and description of the file. User can play,
pause, and play next and previous songs of the list.

ALBUM DETAIL –

In this module, we will manage album and music information. User can add albums with
images and song details and upload songs in the album.

CRUD OPRATION -

Here, user can add album details with image. Albums are nothing but it's a favorite or play list.
First, user can create albums and add all his/her favorite songs in that album. In the database,
we have created two tables. One is Album table (as master) and another is music table (as
details).

CODE PART-

This is our main part as we will be adding all our music files to be played in this detail table.
Here, we select our album from combobox and add music details and upload to our root
26
 directory to play our songs. Users can add new songs, edit, and delete the songs. We will see
more detail in code part.

8.1 Working Principle

Working with WEBAPI Controller for CRUD

Select Controller and add an Empty Web API 2 Controller. Provide your name to the Web API
controller and click OK. Here, for our Web API Controller, we have given the name
"MusicAPIController".

As we have created Web API controller, we can see that our controller has been inherited with
ApiController. As we all know, Web API is a simple and easy way to build HTTP Services for
Browsers and Mobiles.

Web API has the following four methods as Get/Post/Put and Delete where:

• Get is to request for the data. (Select)

• Post is to create a data. (Insert)

• Put is to update the data.

• Delete is to delete data.

27
 • 9.0 FEASIBILITY of PROJECT

9.1 Technical Feasibility

A computerized system will be technically more effective than the existing manual
system. Technical feasibility deals with some facts such as: -

• Is the proposed system technically feasible?

• Can the system be upgraded if developed?

• If new technology is needed then what can be developed?

• What hardware and software will be required?

This is concerned with specifying equipment and software that will successfully satisfy
the user requirement. The technical needs of the system may include:

Front-end selection:
1. It must open with some selected touch panel button or switch.

2. Scalability and extensibility.

3. Flexibility.

4. Robustness.

5. According to the organization requirement and the culture.

28
 6. Must provide excellent reporting features
Back-end Selection:

1. Easily programmable.

2. Light Weighted.

3. Easy to install.

4. Efficient maintenance.

5. Easy to implant with the Front-end.

9.2 Operational Feasibility

It is mainly related to human organizations and political aspects. The points to be

considered are:

• What changes will be brought with the system?

• What organization structures are disturbed?

• What new techniques will be required? Do the existing device have technique?

• If not, can they be upgraded in due course of time?

The system is operationally feasible as it very easy for the End users to operate it. It only
needs basic information about operating platform. Since the system will be
computerized, it will help user him/her from getting distracted or sleepy while driving.
The system will also be user friendly. Hence, the new system is operationally feasible.

29
9.3 Economical Feasibility

Cost-benefit analysis is a frequently used method for evaluating the effectiveness of the
proposed system. It is important because management must authorize the budget of the
project. It determines how the aims of the project can be achieved with limited
resources.

The different types of costs that are incurred are as follows:

1. Manpower Cost

Taking care that there is not much manpower cost as such, the development of the
project is done. In fact, manpower is saved, as a single programmer can create the full
product on his own. Establishment of product in a car is also easy which can be done
during the assembly phase.

2. Hardware and Software Cost

The whole system is designed and developed at Python-based Technology. As the

necessary hardware and software are already available, as depicted in the technical
feasibility study, there is no such additional cost.

3. Behavioral Feasibility

The implementation of the proposed system in the vehicles doesn’t negatively affect the
current working atmosphere of the software consultants. In fact, it proves to be very
beneficial. The organization unit remains intact and the system is conflict-free! Hence
the proposed system is also economically feasible. As a whole, it has been concluded
that this system will help to have a safer level of journey. Hence the system is feasible.

30
 10.0 Web Application Testing

10.0 What is Web Application Testing?

Web application testing, a software testing technique exclusively adopted to test the applications
that are hosted on web in which the application interfaces and other functionalities are tested.

Web Application Testing - Techniques:

10.1 Functionality Testing - The below are some of the checks that are performed but not
limited to the below list:
 Verify there is no dead page or invalid redirects.

 First check all the validations on each field.

 Wrong inputs to perform negative testing.

 Verify the workflow of the system.

 Verify the data integrity.

10.2 Usability testing - To verify how the application is easy to use with.
 Test the navigation and controls.

 Content checking.

 Check for user intuition

10.3 Interface testing - Performed to verify the interface and the dataflow from one system to
other.

10.4 Compatibility testing- Compatibility testing is performed based on the context of the
application.
 Browser compatibility

31
  Operating system compatibility

 Compatible to various devices like notebook, mobile, etc.

10.5 Performance testing - Performed to verify the server response time and throughput
under various load conditions.
 Load testing - It is the simplest form of testing conducted to understand the behaviour of
the system under a specific load. Load testing will result in measuring important business
critical transactions and load on the database, application server, etc. are also monitored.

 Stress testing - It is performed to find the upper limit capacity of the system and also to
determine how the system performs if the current load goes well above the expected
maximum.

 Soak testing - Soak Testing also known as endurance testing, is performed to determine
the system parameters under continuous expected load. During soak tests the parameters
such as memory utilization is monitored to detect memory leaks or other performance
issues. The main aim is to discover the system's performance under sustained use.

 Spike testing - Spike testing is performed by increasing the number of users suddenly by
a very large amount and measuring the performance of the system. The main aim is to
determine whether the system will be able to sustain the work load.

10.6 Security testing - Performed to verify if the application is secured on web as data theft
and unauthorized access are more common issues and below are some of the techniques to verify
the security level of the system.
 Injection

 Broken Authentication and Session Management

 Cross-Site Scripting (XSS)

 Insecure Direct Object References

 Security Misconfiguration

 Sensitive Data Exposure

 Missing Function Level Access Control

 Cross-Site Request Forgery (CSRF)

 Using Components with Known Vulnerabilities.

32
 11.0 SOURCE CODE

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gaana</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css" />
<script src="../angular.js"></script>
<script src="../angular-ui-route.js"></script>
<script src="../angular-soundmanager2.js"></script>
<script src="../app.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ng-controller="MainCtrl">
<div id="main1">
<div class="whole">

<div class="main">
<div id="mySidenav1" class="sidenav1">
33
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<small>Close</small>
<img src="../image/switch.png" width="60" height="40" /> </a>
<div class="dropdown">
<button class="expand" style="color:black">Discover</button>
<div class="dropdown-content">
<a ui-sref="home"> Home</a>
<a ui-sref="hindi"> Hindi</a>
<a ui-sref="punjabi">Punjabi</a>
<a ui-sref="english">English</a>
<a ui-sref="bhojpuri">Bhojpuri</a>
<a ui-sref="gazal">Gazal</a>
<a href="#">Latest realese</a>
<a href="#">Romance</a>
<a href="#">Bhakti</a>
<a href="#">Party Special</a>
<a href="#">90s Song</a>
<a href="#">Wedding</a>
</div>
</div>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>

<div class="dropdown1">
<button onclick="myFunction1()" class="dropbtn1"
style="left:10px">Message</button>
<div id="myDropdown1" class="dropdown-content1">

34
 <p>Hi, I'm Shivam, Founder of Gaana . I have published many Songs
here. Thanks for listning....
Have a great day ;)</p>
</div>
</div>
</div>
<div id="mySidenav22" class="sidenav22">
<a href="javascript:void(0)" class="closebtn22" onclick="closeNav22()">
<small>Close</small>
<img src="../image/switch.png" width="60" height="40" />
</a>

<h3 style="text-align: center;font-size: 30px">Queue

<img src="../image/clr.png" width="30" height="30" />
</h3>
<ol set-playlist>
<li ng-repeat="song in playlist">

<a play-from-playlist data-song="{{song.id}}">{{ song.title }} :

{{song.singer}}</a>

<a remove-from-playlist="song" data-index="{{$index}}">

<b>(Remove)</b>
</a>
<span ng-if="currentPlaying.id == song.id">(current)</span>
</li>
</ol>
</div>

</div>
35
 <div class="header">

<div class="headerlogo">

<img src="../image/logo1.gif" width="210" height="100" alt="Noimage" />

<div id="main1">
<span style="font-size:30px;text-align: left; margin-left: -10px;
cursor:pointer" onclick="openNav()">
<img src="../image/switch.png" width="60" height="40" />
<small>Open</small>
</span>

</div>

</div>
<div class="headerinfo">

<font color="red" font-family="georgian" ;>

<b style="font-size: 20px">Shivam's music library</b>
</font>

</div>

<div class="headerinf">
<div class="headerwebsite"> www.iamskm.com</div>
<div class="headermail">[email protected]</div>

</div>

36
</div>

<div class="slideshow-container" style="cursor: progress;">

<div class="mySlides fade">
<div class="numbertext">1 / 3 </div>
<img src="../image/dhoni.jpg" style="width:1000px ;height: 200px;">
<div class="text">Dhoni</div>
</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>
<img src="../image/black.jpg" style="width:1000px ;height: 200px;">
<div class="text">Black Friday</div>
</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>
<img src="../image/fan.jpg" style="width:1000px ;height: 200px;">
<div class="text">Fan</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<br>

37
<div class="menu" style="text-align:center">

<div class="dropdown">

<div class="menuhome">
<a ui-sref="register">
Register
</a>
</div>

<div class="menuhome">
<a ui-sref="home"> Home</a>
</div>

<div class="menuhome">
<a ui-sref="hindi"> Hindi</a>
</div>

<div class="menuhome">
<a ui-sref="punjabi">Punjabi</a>
</div>

<div class="menuhome">
<a ui-sref="english">English</a>
</div>

<div class="menuhome">
<a ui-sref="bhojpuri">Bhojpuri</a>
</div>

<div class="menuhome">
38
 <a ui-sref="gazal">Gazal</a>
</div>

</div>

</div>

</br>
</br>

<div class="about">

<h2>Demo Songs</h2>
<br>
<ul>
<li ng-repeat="song in songs" style="padding: 2px">
<div class="button1">
<button music-player="play" add-song="song">{{ song.title }}
</button>
</div>

</li>
</ul>
</div>

<div class="playlist">
<span style="font-size:30px;text-align: right ;cursor:pointer"
onclick="openNav22()"> Playlist
<img src="../image/playlist.png" width="60" height="60" />
39
 </span>

</div>

<div class="about222">
<sound-manager></sound-manager>
<h2 style="text-align: center;color:darkorange;text-decoration-style:
solid">My_Player</h2>
<p style="color: tomato">
Currently Playing: {{ currentPlaying.title }} ({{ currentPostion }} / {{
currentDuration }})
<br>
<p style="text-align: center"> {{
<img id="myImage" onclick="changeImage()"
src="../image/smile1.png" width="40" height="40">}}</p>
</p>
<div class="seekBase" seek-track>
<div class="seekLoad" ng-style="{width : ( progress + '%' ) }"></div>
</div>
<br>
<div class="button1">
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
<button play-music>Play
<img src="../image/play.png" width="30" height="30" />
</button>

&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;

<button pause-music>Pause
40
 <img src="../image/pause.png" width="30" height="30" />
</button>

&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
<button stop-music>Stop
<img src="../image/stop.png" width="30" height="30" />
</button>

&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;
<button repeat-music>Repeat
<img src="../image/repeat.png" width="30" height="30" />
</button>
<br>

<br/>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingS
pace;&NonBreakingSpace;&NonBreakingSpace;
<button> Volume: {{ volume }} % </button>
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;

<button music-volume data-type="increase">Up

<img src="../image/Up.png" width="30" height="30" />
</button>
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
<button music-volume data-type="decrease">Down
<img src="../image/Down.png" width="30" height="30" />
</button>
&nbsp;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
<button mute-music>Mute
41
 <img src="../image/mute.png" width="30" height="30" />
</button>
<br/>
<br/>
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
<button prev-track>
<img src="../image/pre1.png" width="30" height="30" />Prev
</button>

&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;
<button next-track>
Next
<img src="../image/next1.png" width="30" height="30" />
</button>

&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;
<button clear-playlist>Clear Playlist
<img src="../image/clr.png" width="30" height="30" />
</button>
</div>
<br/>
<br/>
<br>
<br>

</div>
42
 <div class="footer">

<div class="footermiddle">
<div class="footerdetail"><a href="index.html">Home</a> | <a
href="aboutus.html">About Us</a> | <a href="enquiry.html">Enquiry</a> | <a
href="contact.html">Contact Us</a>
</div>
</div>

</div>
</div>
</div>

<ui-view></ui-view>

</body>

<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";
}
slideIndex++;
43
 if (slideIndex > slides.length) { slideIndex = 1 }

slides[slideIndex - 1].style.display = "block";

setTimeout(showSlides, 1500); // Change image every 2 seconds

}
</script>

</html>

44
 12.0 SCREENSHOTS

Fig 12.1: INDEX PAGE (HOME PAGE)

45
Fig 12.2: PLAYER AND CONTROLS OF PLAYER

46
Fig 12.3: PLAY LIST AND OTHER FUNCTIONS

47
Fig 12.4: NODE SERVER START AND RUN

48
 13.0 CONCLUSION

The project named Web Based Music Player has been studied successfully above. All the
requirements as well as working of the project along with the technology stack used has been
explained carefully keeping each and every detail in mind.

The project works completely fine and we may conclude that the project is still in its developing
stage. The project can be made better with time but right now too it works satisfactorily.

Dependencies:

1. The web application can currently only run on browser HTML5 .

2. The application requires a mandatory user based instruction.
3. The system requires a node sever.

Strengths:

1. Provides a better song listening experience to all users.

2. Fully automated system with single page application.
3. Easy design and implementation.
4. Implementing high level concepts such as java script and angular module.
5. Extensible.
6. Robust.
7. Can be used at any locale without much changes required.
8. Cost Effective.
9. Space Age Technology.
10. Efficient working and good results.
11. Customizable.

49
Limitations:

1. At a single time only one song can be played.

2. Maximum number of song and its type then complexity will increase.
3. Need to connect with node module always.
4. More verity of song can be added to this by CRUD operation.
5. Some people might find it quite irritating due to constant UI when they use.
6. The system doesn’t support any online activity recently.

Future Scope:

The future scope of the project can be as follows:

1. The application can be made more interactive and customizable.

2. The application can be trained more for better accuracy.
3. The application can be joined with other modules such some websites that have to use a
small part of music running in background hence they can use API of this.
4. The project can be used to teach angularjs and node js basic fundamentals of their
functionality.

50
 14.0 BIBLIOGRAPY

Book References:

 ANGULARJS: Easy AngularJS For Beginners, Your Step-By-Step Guide to

AngularJS Web Application Development by Felix Alvaro

 The Node Beginner Book

 Learning How to Design Web Pages: “HTML AND CSS” - DESIGN AND
BUILD WEBSITES, BY JON DUCKETT”

Website References:
 Github-
https://perminder-klair.github.io/angular-soundmanager2/dev/contributing.html

https://github.com/scottschiller/SoundManager2

 AngularJs- https://www.angularjs4u.com/demos/5-angularjs-music-player-
demos/

 NodeJs-
https://nodejs.org

 Stack OverFlow-
https://stackoverflow.com

 Other Resources
https:/www.tutorialspoint.com/
 CCN-
https://ccm.net/faq/705-playing-music-on-your-website

51