Printminiproject

CERTIFICATE
V.B.S. PURVANCHAL UNIVERSITY

(Session 2021-24)
This is to certify that project entitled "SPOTF-CLONE" submitted

by "GAURAV SINGH" student of BCA 3rd Year examination of VEER
BAHADUR SINGH PURVANCHAL UNIVERSITY during the academic
year 2023-24. It is original work carried out under the supervision and
guidance by DR. VIKASH CHAURASIYA under goes for the project.
Date: / /2024
Head of Department
(Prof. Noopur Goel)
Internal Examiner External Examiner
ACKNOWLEDGEMENT
I would like to express my profound gratitude to Prof.

NOOPUR GOEL, HEAD OF DEPARTMENT of COMPUTER
APPLICATION of V.B.S. PURAVNCHAL UNIVERSITY for their
contributions to the completion of my project titled “GAURAV
SINGH”.
I would like to express my special thanks to our mentor

Dr. VIKASH CHAURSIYA for his time and efforts he provided
throughout the semester. Your useful advice and suggestions
were really helpful to me during the project’s completion. In
this aspect, I am eternally grateful to you. I am also thankful
to my colleagues for continuously inspiring us to complete
this project.
Last but not least I express my deep sense of gratitude to

my parents who have given me a plenteous of moral support
and without whose invigoration and understanding it would
not have been virtually possible for me to achieve this
success.
I would like to acknowledge that this project was

completed entirely by me and my team and not by someone
else.
Gaurav Singh
BCA Vth semester
2158044
DECLARATION
I hereby declare that we have successfully designed and implemented the
project on "SPOTIFY-CLONE.
This project is under V.B.S.P.U, Jaunpur and in the guidance of PROF.
NOOPUR GOEL is partial fulfillment of the requirement for the award of the
degree of Bachelor of Computer Applications and submitted to the institution
is an authentic record of my own work carried out during the period 05 October
2023 to 04 January 2024. I also cited the reference about the text(s)
figures(s)/tables(s) from where they have been taken.
The matter presented in this project report has not been submitted
elsewhere for the award of any other degree or diploma from any institutions.
Date: ..../..../2024 Signature of the candidate

This is to certify that the above statement by the candidate is correct to the
best of my knowledge.
Date: ..../..../2024 Signature of the Research supervisor
The Viva-voce examination of GAURAV SINGH (BCA) student has been held
on.............................
Signature of External Examiner Signature of Head of the Department
CONTENT:
➢ Abstract
➢ Introduction
➢ Analysis
➢ System Design and Architecture
➢ Hardware Requirments
➢ Objective
➢ System Requirment
➢ Code/Program
➢ Output
➢ Reference
➢ Conclusion
ABSTRACT
Spotify is one of the Swedish brands engaged in music

streaming services. The famous brand Spotify is a music
streaming service that is very complete and provides
connections between musicians and fans. So the researchers
aim to find out and explain how much factor analysis of the
factors that influence Spotify's purchasing decisions. The
variables used in this study were product quality, image, price
, promotion. The research method used is quantitative
research methods used are causal. Data analysis methods
used in this study are descriptive, analytical methods and
multiple linear regression analysis. Sampling was done by
non-probability sampling method with a sample of 100
respondents and the population is not known with certainty. .
Independent consisting of product quality promotion , brand
image price concurrent promotion in the same or
simultaneous effect of the decision to purchase music
streaming services significantly to Spotify.
INTRODUCTION
Spotify –a peer-assisted music streaming service –has gained
world wide popularity in the past few years. Spotify provides
millions of users instant access to over 20 million tracks. Until
now, little has been published about the user behaviour in
Spotify., we conduct an empirical study of user behaviour in
1
Spotify by analyse a larger dataset. User behaviour can be
fundamentally different in music streaming and video
streaming services, because unlike watching videos, listening
to music usually does not require constant attention from
users. Such knowledge is crucial for improving the system
design and operation. In particular, the explosively increasing
adoption of smartphones and tablets urges the
understanding of the usage pattern of music streaming
services on mobile platforms. Our dataset was collected by
Spotify between 2010 and 2011, which covers users in
Sweden, UK, and Spain. We study both the system dynamics
and individual user behaviour in Spotify. For system
dynamics, we investigate the arrival patterns of user sessions,
playbacks, and daily variations of session length. For
individual users, we examine the session switching patterns
on multiple devices, temporal patterns of user appearances,
and correlations of successive sessions. Our findings are not
only key for improving system design and operation of
Spotify, but also provide valuable insights to understand user
behaviour in general music streaming systems.
ANALYSIS:-
The first form of application analysis is a very high level,

abstract view of the application environment. This level of
analysis looks at the application in the context of the overall
IT organization. System information is collected at a very high
2
level. The key here is to understand which applications exist,
how they interact, and the identified value of the desired
function. With this type of analysis, organizations can manage
overall migration strategies and identify key applications that
are good candidates for Web service enablement,
architecture, or platforming versus replacing the applications
with COTS applications or Oracle Fusion Middleware
products. Data structures, program code, and technical
characteristics are not analysed here. This type of tool can
also help to redocument existing client/server assets. The
second type of application analysis is microanalysis. This
examines applications at the program level. You can use this
level of analysis to understand things such as program logic or
candidate business rules for enablement, or business rule
transformation. This process will also reveal things such as
code complexity, data exchange schemas, and specific
interaction within a screen flow.
SYSTEM DRSIGN and ARCHITECTURE:
An application architecture describes the patterns and

techniques used to design and build an application. The
architecture gives you a roadmap and best practices to
follow when building an application, so that you end up with
a well-structured app. Software design patterns can help you
to build an application. as part of an application architecture,
there will be both front-end and back-end services. Front-
end development is concerned with the user experience of
the app, while back-end development focuses on providing
access to the data, services, and other existing systems that
make the app work.
3
HARDWARE REQUIREMENTS
• Intel P4 1.5GHz or above

• 512MB RAM
• 80GB HDD Minimum
4
OBJECTIVE:
➢ Mission is 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.
➢ Spotify satisfies this feature by being an interactive

and up-to-date platform that its users can depend on.
➢ The primary undertaking of Spotify is to provide

medium and boost dissemination of content to the
users. It actually links the artists to the consumers of
their work, something that tremendously encourages
sharing.
➢ To ensure that Spotify reaches out to as many users

as possible, the management adopted a strategic
approach that captures the needs of every one at the
global level.
➢ Spotify’s vision statement emphasizes how

influential the company is in matters related to digital
content exchanges and how it enriches this.
5
SYSTEM REQUIRMENT:
Software requirement Specification: A set of

programs associated with the operation of a
computer is called software. Software is the part
of the computer system, which enables the user
to interact with several physical hardware devices.
The minimum software requirement specifications
for developing this project are as follows:
Operating System: Windows 2007, OS X 10.13 or

more.
Presentation layer: Java Database, My SQL
Presentation: Power Point Documentation
Tools: MS Office
CODES OF PROJECT:
6
<!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="newlogo.png" alt="Spotify"> Spotify</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div class="container">
<div class="songList">
<h1 style="text-decoration:
underline;">Top Rated Indian song-Devotional
and Bollywood... </h1>
<div class="songItemContainer">
<div class="songItem">
7
<img alt="1">
<span
class="songName">Mere ghar Ram aaye
hai</span>
<span
class="songlistplay"><span
class="timestamp">03:34 <i id="0" class="far
songItemPlay fa-play-circle"></i>
</span></span>
</div>
<img alt="1">
<span
class="songName">Let me Love You</span>
<span
</span></span>
</div>
<img alt="1">
<span
<span
</span></span>
</div>
<img alt="1">
<span
8
<span
</span></span>
</div>
<img alt="1">
<span
<span
</span></span>
</div>
<img alt="1">
<span
<span
</span></span>
</div>
<img alt="1">
<span
<span
9
</span></span>
</div>
<img alt="1">
<span
<span
</span></span>
</div>
<img alt="1">
<span
<span
</span></span>
</div>
<img alt="1">
<span
<span
</span></span>
</div>
</div>
10
</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">

<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">Play your favourite-
music</span>
</div>
</div>
<script src="script.js"></script>
<script
src="https://kit.fontawesome.com/26504e4a1f.j
s" crossorigin="anonymous"></script>
</body>
</html>
//OUTPUT SAMPLE:
11
@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;
}
12
*{
margin: 0;
padding: 0;
}
nav{
font-family: 'Ubuntu', sans-serif;
position: sticky;
top: 0px;
}
nav ul{
display: flex;
align-items: center;
list-style-type: none;
height: 65px;
background-color: black;
color: white;
font-weight: 700;
}
nav ul li{
padding: 0 12px;
}
.brand img{
width: 44px;
padding: 0 8px;
}
.brand {
display: flex;
font-weight: bolder;
font-size: 1.3rem;
13
}
.container{
min-height: 72vh;
color: white;
font-family: 'Varela Round', sans-serif;
display: flex;
margin: 23px auto;
width: 70%;
border-radius: 12px;
padding: 34px;
background-image: url('newbg.avif');
}
.bottom{
position: sticky;
bottom: 0;
height: 130px;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
}
.icons{
margin-top: 14px;
}
.icons i{
cursor: pointer;
}
14
#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;
font-style:inherit;
font-variant: unset;
}
.songItem img{
width: 43px;
margin: 0 23px;
}
.timestamp{
margin: 0 23px;
}
.timestamp i{
cursor: pointer;
15
}
.songInfo{
position: absolute;
left: 10vw;
font-family: 'Varela Round', sans-serif;
}
.songInfo img{
opacity: 0;
transition: opacity 0.4s ease-in;
}
@media only screen and (max-width: 1100px) {

body {
background-color: red;
}
}
// OUTPUT SAMPLE:
16
console.log("Welcome to Spotify");
// Initialize the Variables

let songIndex = 0;
let audioElement = new
Audio('songs/ram.mp3');
let masterPlay =
document.getElementById('masterPlay');
let myProgressBar =
document.getElementById('myProgressBar');
let gif = document.getElementById('gif');
let masterSongName =
document.getElementById('masterSongName');
17
let songItems =
Array.from(document.getElementsByClassName('s
ongItem'));
let songs = [
{songName: "Mere ghar Ram aaye hai by T-
series", filePath: "songs/1.mp3", coverPath:
"covers/meregharram.jpg"},
{songName: "Ram Siya Ram by Sachet
tandon.....", filePath: "songs/2.mp3",
coverPath: "covers/ramsiyaram.jpg"},
{songName: "Most listen of Jubin-
Nautiyal.....", filePath: "songs/3.mp3",
coverPath: "covers/nautiyal.jpg"},
{songName: "Most listen Song of Darshan-
Rawal.", filePath: "songs/4.mp3", coverPath:
"covers/darshanrawal.jpg"},
{songName: "Best Song of Hansharaj-
Raghuvanshi", filePath: "songs/5.mp3",
coverPath: "covers/hansaraj.jpg"},
{songName: "Most listen Song of Arijit-
Singh..", filePath: "songs/6.mp3", coverPath:
"covers/arijit.jpg"},
{songName: "Most listen Song of Tuksi-
Kumar...", filePath: "songs/7.mp3",
coverPath: "covers/tulsikr.jpg"},
{songName: "Best Song of Sachet-
Parampara.....", filePath: "songs/8.mp3",
coverPath: "covers/sachetparam.jpg"},
{songName: "Most listen Song of Honey-
Singh...", filePath: "songs/9.mp3",
coverPath: "covers/honey.jpg"},
18
{songName: "Most listen Song of Jass-
manak lofi", filePath: "songs/10.mp3",
coverPath: "covers/jass.jpg"},
]
songItems.forEach((element, i)=>{
element.getElementsByTagName("img")[0].sr
c = 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');
}
})
// Listen to Events
19
audioElement.addEventListener('timeupdate',
()=>{
// Update Seekbar
progress =
parseInt((audioElement.currentTime/audioEleme
nt.duration)* 100);
myProgressBar.value = progress;
})
myProgressBar.addEventListener('change',
()=>{
audioElement.currentTime =
myProgressBar.value *
audioElement.duration/100;
})
const makeAllPlays = ()=>{

Array.from(document.getElementsByClassNam
e('songItemPlay')).forEach((element)=>{
element.classList.remove('fa-pause-
circle');
element.classList.add('fa-play-
circle');
})
}
Array.from(document.getElementsByClassName('s
ongItemPlay')).forEach((element)=>{
element.addEventListener('click', (e)=>{
makeAllPlays();
songIndex = parseInt(e.target.id);
e.target.classList.remove('fa-play-
circle');
20
e.target.classList.add('fa-pause-
circle');
audioElement.src =
`songs/${songIndex+1}.mp3`;
masterSongName.innerText =
songs[songIndex].songName;
audioElement.currentTime = 0;
circle');
circle');
})
})
document.getElementById('next').addEventListe
ner('click', ()=>{
if(songIndex>=9){
songIndex = 0
}
else{
songIndex += 1;
}
audioElement.src =
circle');
circle');
21
})
document.getElementById('previous').addEventL
istener('click', ()=>{
if(songIndex<=0){
songIndex = 0
}
else{
songIndex -= 1;
}
audioElement.src =
circle');
circle');
})
//OUTPUT SAMPLE:
22
CONCLUSION:
In the rapidly changing economy of the Internet, Spotify

stands out as a leading innovator in the field of music
streaming. Starting out in a large field of competitors, Spotify
rose quickly to lead the industry in music streaming, and
become the service of choice for millions of users.
23
➢ This was achieved through a userfocused business model
that placed value on the attention of millions of users over
the economic value of the music it was providing, or the
monetary profits that might be gained. It was this shift away
from a profit driven business model that allowed Spotify to
grow a network economy and gain value as a business to
advertisers and music artists alike.
➢ By recognizing the value of the network, and the power

that could be leveraged through focusing the network
attention, Spotify was able to achieve success and attract a
greater library of music to offer the users, which in turn
increased the network and the power of Spotify.
➢ However, Spotify’s network of users exist within an ever -

changing digital world where technology advances at a great
rate, and competitors arise on a regular basis. To remain the
top competitor in the market, Spotify must constantly
develop their products and innovate their services to respond
to the advancing needs of the audience.
24
REFERENCES
• Class Lectures
• Project Supervisor
• Apna College on Youtube Channel
• Code with Harry Channel
• Scribd website for project notes
https://www.scribd.com/document/628041861/Sp
otify-clone
• Font
https://fontawesome.com/icons
25

Printminiproject

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Printminiproject

Uploaded by

Copyright:

Available Formats

CERTIFICATE

V.B.S. PURVANCHAL UNIVERSITY

This is to certify that project entitled "SPOTF-CLONE" submitted

I would like to express my profound gratitude to Prof.

I would like to express my special thanks to our mentor

Last but not least I express my deep sense of gratitude to

I would like to acknowledge that this project was

Date: ..../..../2024 Signature of the candidate

Date: ..../..../2024 Signature of the Research supervisor

➢ System Design and Architecture

Spotify is one of the Swedish brands engaged in music

The first form of application analysis is a very high level,

SYSTEM DRSIGN and ARCHITECTURE:

An application architecture describes the patterns and

• Intel P4 1.5GHz or above

➢ Mission is to unlock the potential of human

➢ Spotify satisfies this feature by being an interactive

➢ The primary undertaking of Spotify is to provide

➢ To ensure that Spotify reaches out to as many users

➢ Spotify’s vision statement emphasizes how

Software requirement Specification: A set of

Operating System: Windows 2007, OS X 10.13 or

Presentation layer: Java Database, My SQL

Presentation: Power Point Documentation

@media only screen and (max-width: 1100px) {

// Initialize the Variables

// Handle play/pause click

const makeAllPlays = ()=>{

In the rapidly changing economy of the Internet, Spotify

➢ By recognizing the value of the network, and the power

➢ However, Spotify’s network of users exist within an ever -

You might also like