Sr.

No INDEX Page No
CHAPTER 1
1 Introduction
1.1 Background
1.2 Objective
1.3 Purpose
1.4 Scope
1.5 Applicability
CHAPTER 2
System Planning
2.1 Survey Of Technologies
2.2 Fact Finding Technique
2.3 2
Feasibility Study
2.4 Stakeholders
CHAPTER 3
3 Requirement And Analysis
3.1 Problem Definition
3.2 Requirement Specification
3.3 Planning And Scheduling
3.4 Software And Hardware Requirements
3.5 Conceptual Models
3.5.1 E-R Diagram
3.5.2 Use Case Diagram
3.5.3 Class Diagram
3.5.4 Sequence Diagram
3.5.5 Package Diagram
3.5.6 Activity Diagram
3.5.7 Deployment Diagram
3.5.8 System Flowchart

CHAPTER 4
4 System Design
4.1 Data Design
4.2 Data Integrity And Constraints
4.3 User Interface Design
4.4 Security Issues
4.5 Test Cases
CHAPTER 5
5 System Coding, Implementation and Testing
5.1 Coding Details
5.2 Code Efficiency
5.3 Testing Approach
 5.3.1 Unit Testing
5.3.2 Integrated Testing

5.4 Modifications and Improvements

CHAPTER 6
6 Conclusion And Future Work
CHAPTER 7
7 References
 Chapter-1

1. INTRODUCTION

Welcome to “Spotify Clone”. This is the first module in the series we will see
“What is Music Mania and how does it work”. Spotify Clone is a digital music,
podcast and video streaming services that gives you access to millions of songs from
artists all over the world, like other music streaming platform for e.g. Youtube Music,
Jio Savaan, Music Mania, Retro music, etc.
1.1 BACKGROUND

Sounds are all around us, from birds chirping and waves lapping against a
coastline to cars honking in traffic. But sometimes sounds are put together in
purposeful ways to create a specific atmosphere or to express ideas or emotions.
Such organized sounds are called music.

Music is a collection of coordinated sound or sounds. Making music is the

process of putting sounds and tones in an order, often combining them to create a
unified composition. People who make music creatively organize sounds for a
desired result, like a Beethoven symphony or one of Duke Ellington's jazz songs.
Music is made of sounds, vibrations, and silent moments, and it doesn't always
have to be pleasant or pretty. It can be used to convey a whole range of
experiences, environments, and emotions.

Almost every human culture has a tradition of making music. Examples of

early instruments like flutes and drums have been found dating back thousands of
years. Ancient Egyptians used music in religious ceremonies. Many other African
cultures have traditions related to drumming for important rituals. Today, rock and
pop musicians tour and perform around the world, singing the songs that made
them famous. All of these are examples of music.
1.2 OBJECTIVE

When you have completed this module you will be able to-:

Basic functions such as playing music are totally free, but you can also choose
to upgrade to Spotify Clone. Either way, you can:
 Choose what you want to listen to with Browse and Search
• Find what you’re looking for with Search, including:

1.Songs
2.Albums
3.Artists
4.Playlist
1.3 PURPOSE
The purpose of this document is to inform user Music Mania is a digital
streaming services that gives you access to millions of songs from artists all over the
world.

Our mission to unlock the potential of human creativity by giving a million

creative artists the opportunity to live off their art and billions of fans the opportunity
to enjoy and be inspired by it.

Music Mania manage and share tracks, including podcast titles, for free, or
upgrade to Music Mania Premium to access exclusive features for music including
improved sound quality and an on-demand, offline listening experience.
1.4. SCOPE
With Spotify Clone, it’s easy to find the right music or podcast for every
moment – on your phone, your computer, your tablet and more.

There are millions of tracks and episodes on Spotify Clone. So whether you’re
behind the wheel, working out, partying or relaxing, the right music or podcast is
always at your fingertips. Choose what you want to listen to, or let Spotify Clone
surprise you.

You can also browse through the collections of friends, artists, and celebrities,
or create a radio station and just sit back.
1.5 APPLICABILITY

The functions of playing music and multimedia have become essential in one
device as a smart phone since the smart phone appeared.

It is very convenient, but it contains controversial arguments about sound

quality, so many smart phone users use the music player application. By using these
music applications, people start to think about the relationship between music playing
and sound quality. However, those applications are not perfect, so it is hard to choose
a good application.

This thesis is about the advantages of the sound quality of music player
applications that are currently sold in Android Market through Right Mark Audio
Analyzer program, and plans to suggest android music player application system
design by analyzing applications by covering disadvantages of these applications.
 Chapter-2

2. System Planning
2.1.Survey of technologies

1. Front End-:

HTML
Hypertext Markup Language (HTML) is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such
as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded into the
rendered page. HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets. Tags such
as <img /> and <input /> directly introduce content into the page. Other tags such
as <p> surround and provide information about document text and may include other tags as
sub-elements. Browsers do not display the HTML tags, but use them to interpret the content
of the page.

HTML can embed programs written in a scripting language such as JavaScript, which
affects the behavior and content of web pages. Inclusion of CSS defines the look and layout
of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and
current maintainer of the CSS standards, has encouraged the use of CSS over explicit
presentational HTML since 1997.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such as HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content,

including layout, colors, and fonts. This separation can improve content accessibility, provide
more flexibility and control in the specification of presentation characteristics, enable
multiple web pages to share formatting by specifying the relevant CSS in a separate .css file
which reduces complexity and repetition in the structural content as well as enabling the .css
file to be cached to improve the page load speed between the pages that share the file and its
formatting.

Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-screen, in print,
by voice (via speech-based browser or screen reader), and on Braille-based tactile devices.
CSS also has rules for alternate formatting if the content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which
style rule applies if more than one rule matches a particular element. This cascading priority
scheme is predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Internet media type (MIME type) text/css is registered for use with CSS by RFC
2318 (March 1998). The W3C operates a free CSS validation service for CSS documents
Language used JavaScript-

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled

programming language with first-class functions. While it is most well-known as the
scripting language for Web pages, many non-browser environments also use it, such
as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based,
multi-paradigm, single-threaded, dynamic language, supporting object-oriented,
imperative, and declarative (e.g. functional programming) style.

JavaScript runs on the client side of the web, which can be used to design /
program how the web pages behave on the occurrence of an event. JavaScript is an
easy to learn and also powerful scripting language, widely used for controlling web
page behavior.

JavaScript is not "Interpreted Java". In a nutshell, JavaScript is a dynamic

scripting language supporting prototype based object construction. The basic syntax is
intentionally similar to both Java and C++ to reduce the number of new concepts
required to learn the language. Language constructs, such
as if statements, for and while loops, and switch and try ... catch blocks function the
same as in these languages (or nearly so).

JavaScript can function as both a procedural and an object oriented language.

Objects are created programmatically in JavaScript, by attaching methods and
properties to otherwise empty objects at run time, as opposed to the syntactic class
definitions common in compiled languages like C++ and Java. Once an object has been
constructed it can be used as a blueprint (or prototype) for creating similar objects.
yarn-:
Creates new projects from any create-* starter kits.

yarn create <starter-kit-package> [<args>]

This command is a shorthand that helps you do two things at once:

• Install create-<starter-kit-package> globally, or update the package to the latest

version if it already exists
• Run the executable located in the bin field of the starter kit’s package.json,
forwarding any <args> to it

For example, yarn create react-app my-app is equivalent to:

$ yarn global add create-react-app

$ create-react-app my-app

API-:

API is the acronym for Application Programming Interface, which is a software

intermediary that allows two applications to talk to each other. Each time you use an app like
Facebook, send an instant message, or check the weather on your phone, you're using an API.

A clone web application using the create-react-app. The app comsumes data from the
Spotify API and tries to mimic the UI and front-end behaviours of the official Spotify web
player as much as possible
In order to be logged in, the app must have 2 things: a refresh_key stored in cookie
and an access_key stored in memory. When there these values are present, the user is
effectively "logged in" and therefore the app will render the "logged in" version with the
user's personal info.
2.2 Fact Finding Techniques:
1.Onsite Observation’s
We observed various website for online websites for this project
for e.g.

1. https://www.apptunix.com/blog/spotify-like-app-development-guide/

2. https://www.pocket-lint.com/apps/news/spotify/139236-what-is- spotify-and-
how-does-it-work

3. https://www.youtube.com/watch?v=pnkuI8KXW_8

2. Review the existing documents

We reviewed various websites and application that people use to see website
related to Music apps and how they works.

3. Interviews
We mainly Interviewed the various owners of this business and asked how thye
feel about making websites related to their business.

The information provided by both interviewees was very important because it

helped us in the analysis of the current system and the constructs of the data flow
diagrams. In the interview some objectives are considered such as; Determining the
areas to be discovered.\
4. Questionnaire
A series of questions to be asked is called questionnaires .

1.What is Spotify Clone and how does it work?

2.Can you download music from Spotify Clone?

3.How much data does Spotify Clone use?

4..How much is Music Mania?

5.What do you get with Music Mania Free?

2.3 Feasibility Study
1. Technical Feasibility

A technical feasibility study assesses the details of how you intend to deliver a
product or service to customers. Think materials, labor, transportation, where your
business will be located, and the technology that will be necessary to bring all this
together.

2. Economical Feasibility

The degree to which the economic advantages of something to be made, done,

or achieved are greater than the economic costs .

3. Financial Feasibility
Financial feasibility focuses specifically on the financial aspects of the study. It
assesses the economic viability of a proposed venture by evaluating the startup costs,
operating expenses, cash flow and making a forecast of future performance.

4. Operational Feasibility
Operational feasibility is the measure of how well a proposed system solves the
problems, and takes advantage of the opportunities identified during scope definition
and how it satisfies the requirements identified in the requirements analysis phase of
system development.
 CHAPTER-3

3. Requirement and analysis

Problem Definition-
The biggest drawback is the low audio quality, MP3 uses the lossy
algorithm which deletes the lesser audible music content to reduce the file size, thus
compromising on the music quality, Music piracy increased to a greater extent,
Cheaper or free duplicate versions of the original music files are available
on the Internet for download .

There are some disadvantages of the existing system.

 The sound quality of the MP3 format is not as good as that of the CD , So , CD
players provide clearer audio than do MP3 players , Although MP3s can be
compressed at a higher bit rate , Most are encoded at 128 kilobits per second ,
compared with CDs , on which the listener receives sound at 196 kilobits per
second , about 50 per cent higher .

 The data is susceptible to losses due to the malware or virus attacks , The
people who used the file-sharing service , They had their computers accessed
by the hackers , MP3 players are generally more expensive than CD players .

 MP3 compression may discard as much as 90 percent of the data from the
original recording without a significant drop in sound quality , Nevertheless ,
The listeners with the exceptional hearing or high-end earphones may detect
slight differences between the MP3 file & the original uncompressed CD
recording .
 Unlike CDs , The albums on MP3s cannot be resold , When the people
purchase the song from iTunes or another online MP3 store , They are not so
much buying the song as indefinitely leasing it , This may limit the ability of
the owners of MP3 players to refresh their libraries frequently , unlike owners
of CD players , they cannot legally trade their songs for new ones .
Requirement Specification-
Spotify Clone is immediately appealing because you can access content for free
by simply signing up using an Email address or by connecting with Facebook, Gmail
Account. If you’re not keen on monthly subscription fees for Music Mania Premium,
or just want to dip your toe in and test it out, it’s out, it’s easy to get started and
there’s no commitment.

MODULES OF PROPOSE
SYSTEM-

1. Music-Streaming

The streaming method doesn’t require the downloading of the entire file.
The audio that the user requests is delivered to him in small packets to play the
music instantly.

2.Search

The entire idea of a music streaming application is to give the listeners

the opportunity to search for the type of music they want to listen to as per their
mood.
 TIME CHART Targ et Time Time Taken

SR. Topic JAN FEB MARCH APRIL

NO
1 / 18 23 29 4/ 10 21 1/ 11 22 1/4 11/4
1 - -
- - - 3/ 9/ - - - - - 10/4 19/4
17/ 22 28 20 31 10 21 30
1
1 Introduction
1.1 Background

1.2 Objective

1.3 Purpose

1.4 Scope

1.5 Applicability

2 System
Planning
2.1 Survey of
Technology
2.2 Fact Find
techniques
2.3 Feasibility
Study
2.4 Stakeholder
s
3 Requiremen
t and
Analysis
3.1 Problem
Definition
3.2 Requiremen
t and
Specification
3.3 Planning and
Scheduling
3.4 Software
and
Hardware
3.5 Conceptual
Models
4 System
Design
4.1 Data
Integrity and
Constraints
4.2 User
Interface
and Design
4.3 Security
Issues
4.4 Test Cases

5.1 Coding
Details
5.2 Code
Efficiency
5.3 Testing
Approach
5.4 Modification
s and
Improvemen
ts
6 Conclusion
And Future
Work
7 References
SOFTWARE AND HARDWARE REQUIREMENT-
 Hardware Requirement
Hardware requirement for this system are as Follows:

Processor RAM Disk Space

Client side Intel P4 or 512MB 2GB

equivalent

Intel P4 or 512MB 1GB

equivalent

Server side Server 2GB As per the size

Environment of requirements
DBMS
Capable H/w

 Software Requirement
Software Requirement for this system are as follows:

FRONT END Html5,css,JS,

BACK END JS

OPERATING Windows 10
SYSTEM
Conceptual Models
ER Diagram-:
An entity-relationship diagram, or ERD, is a chart that visually represents the
relationship between database entities. ERDs model an organization’s data storage
requirements with three main components: entities, attributes, and relationships.

 ENTITIES: Entities are objects or concepts that represent important data. They are
typically nouns, e.g. custo mer, supervisor, location, or promotion.

• Strong entities: exist independently from other entity types. They always possess
one or more attributes that uniquely distinguish each occurrence of t he entity.

• Weak entities: depend on some other entity type. They don't possess unique
attributes (also known as a primary key) and have no meaning in the diagram without
depending on another entit y. This other entity is known as the owner.

• Associative entities: are entities that associate the instances of one or more entity
types. They also contain attributes that are unique to the relationship between those
entity instances.
RELATIONSHIPS
Relationships are meaningful associations between or among entities. They are
usually verbs, e.g. assign, associate, or track. A relationship provides useful
information that could not be discerned with just the entity types.

Weak relationships, or identifying relationships, are connections that exist between a

weak entity type and its owner

 ATTRIBUTES
• Attributes are characteristics of an entity, a many-to-many relationship, or a one-
toone relationship.

• Multivalve attributes are those that are capable of taking on more than one value.

• Derived attributes are attributes whose value can be calculated from Related
attribute
(ER DIAGRAM)
Use case Diagram-

USE CASE DIAGRAM is an expression of relations between the use

cases in a specific system or object and the external actors. Use Case
expresses the functions of the system and how the system functions
interact with the external actors.

Symbol and Description-:

Symbol Description

Actor specifies a role played by a user or any

other system that interacts with the subject

Use case is a list of steps, typically

defining interactions between an actor
and a system, to achieve a goal.

Draw your system's boundaries using

a rectangle that contains use cases.
Place actors outside the system's
boundaries.

An association is the relationship

between an actor and a business use
case. It indicates that an actor can use a
certain functionality of the business
system.
(USE CASE DIAGRAM)
Class Diagram-:
A class diagram is a type of static structure diagram that describes the structure of a
system by showing the system's classes, their attributes, operations (or methods), and
the relationships among objects.

The class diagram is the main building block of object-oriented modeling. It is used
both for general conceptual modeling of the systematic of the application, and for
detailed modelling translating the models into programming code. Class diagrams can
also be used for data modeling. The classes in a class diagram represent both the main
elements, interactions in the application, and the classes to be programmed.

In the diagram, classes are represented with boxes that contain three
compartments:
• The top compartment contains the name of the class. It is printed in bold and
centered, and the first letter is capitalized.

• The middle compartment contains the attributes of the class. They are left-aligned
and the first letter is lowercase.

• The bottom compartment contains the operations the class can execute. They are
also left-aligned and the first letter is lowercase.

In the design of a system, a number of classes are identified and grouped together in a
class diagram that helps to determine the static relations between them. With detailed
modeling, the classes of the conceptual design are often split into a number of
subclasses.
(CLASS DIAGRAM)
Object Diagram
An object diagram is a graph of instances, including objects and data
values. A static object diagram is an instance of a class diagram; it
shows a snapshot of the detailed state of a system at a point in time.
The use of object diagrams is fair ly limited, namely to show examples
of data structure.

(OBJECT DIAGRAM)
Sequence Diagram-
A sequence diagram shows object connections arranged in time chain. It
depicts the objects and classes implicated in the situation and the series of messages
exchange between the objects needed to carry out the functionality of the scenario.
Sequence diagrams are usually associated with use case realizations in the Logical
View of the system under improvement. Sequence diagrams are sometimes called
event diagrams or event scenarios.A sequence diagram shows,
as parallel vertical lines (lifelines), different processes or objects that
live simultaneously, and, as horizontal arrows, the messages exchanged between them,
in the order in which they occur. This allows the specification of simple runtime
scenarios in a graphical manner.

Sequence Diagram expresses the interactions of instances. It is a direct

expression of the Interaction Instance Set, which is a set of the stimuli exchanged
between the instances within a Collaboration Instance Set

Symbols and Description:

Symbol Description

Object are model element that

represent instances of a class or a
class

Message is a element that

defines a specifies kind of
communication between the
instances in an interaction
Package Diagram-:
Package diagram is used to simplify complex class diagrams, you can
group classes into packages. A package is a collection of logically
related UML elements. The diagram below is a business model in which
the classes are grouped into packages: Packages appear as rectangles
with small tabs at the top.

(PACKAGE DIAGRAM)
Deployment Diagram-:
A deployment diagram in the Unified Modeling Language models the
physical deployment of artifacts on nodes. To describe a web site, for
example, a deployment diagram would show what hardware
components exist, what software components run on each node, and
how the different pieces are connected.
Component Diagram-:
A component diagram, also known as a UML component diagram,
describes the organization and wiring of the physical components in a
system. Component diagrams are often drawn to help model implementation details
and double-check that every aspect of the system's required functions is covered by
planned development.
User interface and Design:
User interface (UI) design is the process of making interfaces in software or
computerized devices with a focus on looks or style. Designers aim to create designs
users will find easy to use and pleasurable. UI design typically refers to graphical user
interfaces but also includes others, such as voice-controlled ones.
Home page-:
 Chapter 4

System Coding, Implementation and Testing

Index.html(Main page)-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify - Your favourite music is here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="logo.png" alt="Spotify"> Spotify</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>

<div class="container">
<div class="songList">
<h1>Best of NCS - No Copyright Sounds</h1>
<div class="songItemContainer">
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="0" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="1" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="2" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="3" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="4" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="5" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="6" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="7" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="8" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
<div class="songItem">
<img alt="1">
<span class="songName">Let me Love You</span>
<span class="songlistplay"><span class="timestamp">05:34
<i id="9" class="far songItemPlay fa-play-circle"></i> </span></span>
</div>
</div>
</div>
<div class="songBanner"></div>
</div>

<div class="bottom">
<input type="range" name="range" id="myProgressBar" min="0" value="0" max="100">
<div class="icons">
<!-- fontawesome icons -->
<i class="fas fa-3x fa-step-backward" id="previous"></i>
<i class="far fa-3x fa-play-circle" id="masterPlay"></i>
<i class="fas fa-3x fa-step-forward" id="next"></i>
</div>
<div class="songInfo">
<img src="playing.gif" width="42px" alt="" id="gif">
<span id="masterSongName">Warriyo - Mortals [NCS Release]</span>
</div>
</div> 79.409-30.755zm-221.84 25.72q-34.285 0-67.561-14.873t-60.754-40.335-51.175-60.502-40.083-
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/26504e4a1f.js" crossorigin="anonymous"></script>
</body>
</html>
 CSS.STYLE
@import url('https://fonts.googleapis.com/css2?
family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?
family=Varela+Round&display=swap');
body{
background-color: antiquewhite;
}

*{
margin: 0;
padding: 0;
}

nav{
font-family: 'Ubuntu', sans-serif;
}

nav ul{
display: flex;
align-items: center;
list-style-type: none;
height: 65px;
background-color: black;
color: white;
}
nav ul li{
padding: 0 12px;
}
.brand img{
width: 44px;
padding: 0 8px;
}

.brand {
display: flex;
align-items: center;
font-weight: bolder;
font-size: 1.3rem;
}

.container{
min-height: 72vh;
background-color: black;
color: white;
font-family: 'Varela Round', sans-serif;
display: flex;
margin: 23px auto;
width: 70%;
border-radius: 12px;
padding: 34px;
background-image: url('bg.jpg');
}
.bottom{
position: sticky;
bottom: 0;
height: 130px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.icons{
margin-top: 14px;
}
.icons i{
cursor: pointer;
}

#myProgressBar{
width: 80vw;
cursor: pointer;
}
.songItemContainer{
margin-top: 74px;
}

.songItem{
height: 50px;
display: flex;
background-color: white;

color: black;
margin: 12px 0;
justify-content: space-between;
align-items: center;
border-radius: 34px;
}

.songItem img{
width: 43px;
margin: 0 23px;
border-radius: 34px;
}

.timestamp{
margin: 0 23px;
}

.timestamp i{
cursor: pointer;
}
JS.Script

console.log("Welcome to Spotify");

// Initialize the Variables

let songIndex = 0;
let audioElement = new Audio('songs/1.mp3');
let masterPlay =
document.getElementById('masterPlay');
let myProgressBar =
document.getElementById('myProgressBar');
let gif = document.getElementById('gif');
let masterSongName =
document.getElementById('masterSongName');
let songItems =
Array.from(document.getElementsByClassName('so
ngItem'));

songs[i].coverPath;
element.getElementsByClassName("songName")
[0].innerText = songs[i].songName;
})
// Handle play/pause click
masterPlay.addEventListener('click', ()=>{
if(audioElement.paused ||
audioElement.currentTime<=0){
audioElement.play();
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');
gif.style.opacity = 1;
}
else{
audioElement.pause();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
gif.style.opacity = 0;
}
})
// Listen to Events
audioElement.addEventListener('timeupdate', ()=>{
// Update Seekbar
progress =
parseInt((audioElement.currentTime/audioElement.dur
ation)* 100);
myProgressBar.value = progress;
})

myProgressBar.addEventListener('change', ()=>{
audioElement.currentTime = myProgressBar.value *
audioElement.duration/100;
})
Array.from(document.getElementsByClassName('son
gItemPlay')).forEach((element)=>{
element.addEventListener('click', (e)=>{
makeAllPlays();
songIndex = parseInt(e.target.id);
e.target.classList.remove('fa-play-circle');
e.target.classList.add('fa-pause-circle');
audioElement.src = `songs/$
{songIndex+1}.mp3`;
masterSongName.innerText =
songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
gif.style.opacity = 1;
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');
})
})

document.getElementById('next').addEventListener('cl
ick', ()=>{
if(songIndex>=9){
songIndex = 0
}
else{
songIndex += 1;
}
audioElement.src = `songs/${songIndex+1}.mp3`;
masterSongName.innerText =
songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');

})

document.getElementById('previous').addEventListen
er('click', ()=>{
if(songIndex<=0){
songIndex = 0
}
else{
songIndex -= 1;
}
audioElement.src = `songs/${songIndex+1}.mp3`;
masterSongName.innerText =
songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');
})
TESTING:
Sr. No. TEST STEPS OR INPUT TEST EXCEPTED ACTUAL PASS/
CONDITION PROCEDURE DATA RESULT OUTPUT FAIL

1 Check Add product Admin Guitar.jsp Guitar.jsp page Pass

whether from admin Dashboard page
product is dashboard Productname:
added and it will Add product Here guitar wood guitar
properly to display in wood guitar images and Price:4569
specific user in guitar all details
category dashboard category are shown .
With all Data is
details. displayed in
proper layout

2 Check User can User User User Pass

whether one check dashboard dashboard dashboard (cart
or more products and (cart details) details)
products are click on add User check Here all the Here are all the
added in the to cart product and products are products are
cart or not button it will add the displayed in displayed
add products product in cart table which is added
in cart, user cart and go from the user
can add one back for a and the total
or more adding more amount is
products in products displayed
cart

3 Check After user After admin User get User get mail Pass
whether after has done the get payment mail from from admin
user has done payment from user admin about about delivery
payment user process user admin send delivery details
can get mail can get mail the delivery details
or not from admin details mail
about the to user.
delivery
details.
5.3 MODIFICATION AND IMPROVEMENT
Various changes were made after performing the testing, the agile methodology led
the changes to be made easily in the websites, the changes are listed below.

For increasing the security more features like encryption and OTP are added to the
website. MD5 encryptions allow storing the password in the encrypted format which allows
more security. OTP allows to check whether the user is genuine or not by sending the OTP to
the email and verifying it.
 Chapter 5

Conclusion And Future Work

The Music Mania website future work is that it will be updated directly proportional with
time. The user will have to constantly their work in order to match with trendy designs.
Well talking about future, the website will have a feature where the user add their favorite
song in playlist without contacting the web developer for it the each time. The users might
get a user panel through which they can easily update their playlist and wherever they want
which playlist share on cross platforms.

The website will be updated with many other payment options and new wallet and methods
will be added for buying the packages instead of email contact

From this i would like to conclude this topic here by thanking all my professors who have
always been there for me as my mentor and helped me out in developing of this beautiful
music website.
 CHAPTER 6

REFERENCES

References that helped us building this website:

 www.w3schools.com (For HTML, CSS and JS)

 www.tutorialspoint.com

 www.envanto.com (For website UI inspiration)

 www.carbonmade.com

 www.behance.net

 React- The Complete Guide (incl Hooks,React Router, Redux)

View publication stats