DOC-20230508-WA000.pdf

A PROJECT REPORT ON
SPOTIFY CLONE
SUBMITTED TO THE SAVITRIBAI PHULE PUNE UNIVERSITY, PUNE

IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR
THE AWARD OF THE DEGREE
BACHELOR OF ENGINEERING
In
COMPUTER ENGINEERING
Of
SAVITRIBAI PHULE PUNE UNIVERSITY
By
❖ TEJAS DESHMUKH Exam Seat No: S190234239
❖ VAISHNAVI DHINGE Exam Seat No: S190234241
❖ YASH DHOMSE Exam Seat No: S190234242
❖ ANJALI DHOTE Exam Seat No: S190234244
❖ PARTH DONGARE Exam Seat No: S190234226
Under the guidance of

Prof. P.P. GAIKWAD
DEPARTMENT OF COMPUTER ENGINEERING

SINHGAD COLLEGE OF ENGINEERING, PUNE-41
Accredited by NAAC
2021-22
Sinhgad Technical Education Society,
Sinhgad College of Engineering , Pune -41
Department of Computer Engineering
DATE :
CERTIFICATE
This is to certify that the project report entitled
“SPOTIFY CLONE”
Submitted by
TEJAS DESHMUKH Exam Seat No: S190234239
is a bonafide work carried out by him under the supervision of Prof. P.P. GAIKWAD and it is approved for the
partial fulfilment of the requirements of Savitribai Phule Pune University, Pune for the award of the degree of
Bachelor of Engineering (Computer Engineering) during the year 2021-22.
Prof. P.P. Gaikwad Prof. M.P Wankhade

Guide Head
Department of Computer Engineering Department of Computer Engineering
Dr. S.D. Lokhande

Principal
Sinhgad College of Engineering

Sinhgad College of Engineering , Pune-41
DATE :
CERTIFICATE
“SPOTIFY CLONE”
Submitted by
VAISHNAVI DHINGE Exam Seat No: S190234241
is a bonafide work carried out by her under the supervision of Prof. P.P. GAIKWAD and it is approved for the
Bachelor of Engineering (Computer Engineering) during the year 2021-22
Prof. P.P. Gaikwad Prof. M.P Wankhade

Guide Head
Dr. S.D. Lokhande

Principal
DATE :
CERTIFICATE
“SPOTIFY CLONE”
Submitted by
YASH DHOMSE Exam Seat No: S190234242
is a bonafide work carried out by him under the supervision of Prof. P.P. GAIKWAD and it is approved for the
Prof. P. P. GAIKWAD Prof. M.P Wankhade

Guide Head
Dr. S.D. Lokhande

Principal

Sinhgad College of Engineering , Pune-41
DATE :
CERTIFICATE
“SPOTIFY CLONE”
Submitted by
ANJALI DHOTE Exam Seat No: S190234244
is a bonafide work carried out by her under the supervision of Prof. P.P. GAIKWAD and it is approved for the
Prof. P.P. GAIKWAD Prof. M.P Wankhade

Guide Head
Dr. S.D. Lokhande

Principal
DATE :
CERTIFICATE
“SPOTIFY CLONE”
Submitted by
PARTH DONGARE Exam Seat No: S190234226
is a bonafide work carried out by him/her under the supervision of Prof. P.P. GAIKWAD and it is approved for
the partial fulfilment of the requirements of Savitribai Phule Pune University , Pune for the award of the degree
of Bachelor of Engineering (Computer Engineering) during the year 2021-22
Prof. P.P. GAIKWAD Prof. M.P Wankhade

Guide Head
Dr. S.D. Lokhande

Principal
INDEX
Sr. Content Pg.

No No.
.
1. Abstract 8
2. Introduction 9
3. Work Carried Out 11
4. Conclusion 21
5. Reference 22
ABSTRACT
On many of the online music platforms, we get to listen the songs with lots of Ads or we have to buy
subscription or premium of that particular music platform to avoid continuous Ads between the song. Which
becomes costlier for normal people.
So to improvise this we builded a free music platform without Ads which everyone can enjoy at their pace
with their favourite songs/playlist.
INTRODUCTION
We have created a platform named SPOTIFY CLONE using HTML, CSS, JAVASCRIPT.
Our platform Spotify clone is a digital music, podcast, and video service that gives you access to millions of
songs and other content from creators all over the world.
Basic functions such as playing music are totally free, but you can also choose to upgrade to Spotify Premium.
This platform is available across a range of devices, including computers, phones, tablets, speakers, TVs, and
cars, and you can easily transition from one to another with Spotify Connect.
HTML:
HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS
and JavaScript. HTML stands for HyperText Markup Language. "Markup language" means that, rather than
using a programming language to perform functions, HTML uses tags to identify different types of content
and the purposes they each serve to the webpage. Markup languages work in the same way as you just did
when you labelled those content types, except they use code to do it -- specifically, they use HTML tags,
also known as "elements." These tags have pretty intuitive names: Header tags, paragraph tags, image tags,
and so on.
JAVASCRIPT:
JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g.,
having complex animations, clickable buttons, popup menus, etc.). There are also more advanced server-
side versions of JavaScript such as Node.js, which allow you to add more functionality to a website than
downloading files (such as real time collaboration between multiple computers). Inside a host environment
(for example, a web browser), JavaScript can be connected to the objects of its environment to provide
programmatic control over them.
JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language
elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety
of purposes by supplementing it with additional objects.
CSS:
CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a
website should actually appear on the frontend of the page.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document
written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes
how elements should be rendered on screen, on paper, in speech, or on other media.
There are three types of CSS which are given below:
Inline CSS.
Internal or Embedded CSS.
External CSS.
FEATURES
Spotify provides users with recommendations to find new artists, songs, and albums through ready made and
personalized playlists. Spotify operates through Spotify Free, which is based on free ad revenue.
The geographic scope of this analysis is to reach global music streaming market.
Listen Offline:
Users will use the offline option to stream the album and listen without using the internet. In the sector, this is
the most common element.
Easy To Use:
The software is user-friendly from login to listening to music. With the various features, users can enjoy
listening to their favorite songs with ease.
Large Music Catalogue:
Users would be spoilt for options of millions of songs from diverse genres. The advanced software provides
diverse music options for the consumers.
Audio Quality:
Spotify has a variety of audio quality choices to suit your computer, schedule, and tastes. The "normal" default
Spotify streaming quality on your device is 160 kbps (kilobits per second), with each "bit" effectively being a
"piece" of the music. It typically sounds good, and lets you enjoy the song with decent music. Stream Music
List:
Users can explore their favourite playlist on any of mobile platforms, i.e. Android or iOS as per their
convenience.
Shuffle Music List:
Users can easily shuffle their favourite songs list to enjoy any of the songs randomly.
Access of playlist/songs:
It gives you instant access to its vast online library of music and podcasts, allowing you to listen to any content
of your choice at any time. Audio Quality:
Spotify has a variety of audio quality choices to suit your computer, schedule, and tastes. The "normal" default
Spotify streaming quality on your device is 160 kbps (kilobits per second), with each "bit" effectively being a
"piece" of the music. It typically sounds good, and lets you enjoy the song with decent music.
WORK CARRIED OUT
Spotify
Clone
HTML CSS JS
 Basic JavaScript feature like

if-else and
 The structure of the webpage document.getElementById
is created with the help of to play and pause our music.
HTML.  Other functions like
onclick(), play(), pause() and
getElementById()` to get the
current status of music and
make changes accordingly.
 CSS will beautify our design

by giving aground and play
pause button image.
 The overall structure will be
designed by giving
background image, padding,
margin, etc.
Explanation of our Project: -
 Our Project code is created in VS Code Editor and run
with the help of Go Live server.
 Our code is created with the help of HTML, CSS and
JavaScript.
 It opens up in Opera.
 The main page of the portal opens up with the song
playlist.
 The structure of the portal is done with the help of
HTML.
 Where we can select the songs by clicking on the play
button, which is designed by CSS.
 No. of songs are added in the playlist along with the
time span of the songs with the help of JavaScript.
 Through CSS margin, layout, background theme,
blocks, etc are assembled properly on the portal.
 The songs are played and paused with the help of play
button.
 Songs can be changed with forward and previous
button.
Program Code: -
HTML Code: -
<!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>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</div>
<img alt="1">
</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">

<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>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/26504e4a1f.js" crossorigin="anonymous"></script>
</body>
</html>
JS Code:-
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('songItem'));
let songs = [
{songName: "Warriyo - Mortals [NCS Release]", filePath: "songs/1.mp3", coverPath: "covers/1.jpg"},
{songName: "Cielo - Huma-Huma", filePath: "songs/2.mp3", coverPath: "covers/2.jpg"},
{songName: "DEAF KEV - Invincible [NCS Release]-320k", filePath: "songs/3.mp3", coverPath:
"covers/3.jpg"},
{songName: "Different Heaven & EH!DE - My Heart [NCS Release]", filePath: "songs/4.mp3", coverPath:
"covers/4.jpg"},
{songName: "Janji-Heroes-Tonight-feat-Johnning-NCS-Release", filePath: "songs/5.mp3", coverPath:
"covers/5.jpg"},
{songName: "Rabba - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "covers/6.jpg"},
{songName: "Sakhiyaan - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "covers/7.jpg"},
{songName: "Bhula Dena - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "covers/8.jpg"},
{songName: "Tumhari Kasam - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "covers/9.jpg"},
{songName: "Na Jaana - Salam-e-Ishq", filePath: "songs/4.mp3", coverPath: "covers/10.jpg"},
]
songItems.forEach((element, i)=>{
element.getElementsByTagName("img")[0].src = 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
audioElement.addEventListener('timeupdate', ()=>{
// Update Seekbar
progress = parseInt((audioElement.currentTime/audioElement.duration)* 100);
myProgressBar.value = progress;
})
myProgressBar.addEventListener('change', ()=>{
audioElement.currentTime = myProgressBar.value * audioElement.duration/100;
})
const makeAllPlays = ()=>{

Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{
element.classList.remove('fa-pause-circle');
element.classList.add('fa-play-circle');
})
}
Array.from(document.getElementsByClassName('songItemPlay')).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;
})
})
document.getElementById('next').addEventListener('click', ()=>{
if(songIndex>=9){
songIndex = 0
}
else{
songIndex += 1;
}
})
document.getElementById('previous').addEventListener('click', ()=>{
if(songIndex<=0){
songIndex = 0
}
else{
songIndex -= 1;
}
})
CSS Code:-
@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;
font-weight: bolder;
font-size: 1.3rem;
}
.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('bg.jpg');
}
.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;
}
#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;
}
.songItem img{
width: 43px;
margin: 0 23px;
}
.timestamp{
margin: 0 23px;
}
.timestamp i{
cursor: pointer;
}
.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: -
CONCLUSION
This project was created by us mainly to teach ourself Web development. Since the point of this project was not
to make great UI/UX design choices, we chose to create a clone of a well-established product as to shorten our
learning time and not to focus on the wrong thing. Since we all are, already a heavy Spotify user and therefore
we thought it would be an interesting challenge to tackle.
The majority of the react components and logic was written from scratch by us. We chose not to use existing
component libraries because that forces us to both get a really deep understanding of Web and get as much
practice as we could with Web.
REFERENCE
Research papers: -
Spotify Teardown: Inside the Black Box of Streaming Music
Eriksson, M., Fleischer, R., Johansson, A., Snickars, P., Vonderau, P.
MIT Press
Ann Werner (2020) Organizing music, organizing gender: algorithmic

culture and Spotify recommendations, Popular Communication
Fleischer, Rasmus & Pelle Snickars: “Discovering Spotify—A Thematic Introduction”, Culture Unbound,
Volume 9, issue 2, 2017: 130–145. Published by Linköping
University Electronic Press: http://www.cultureunbound.ep.liu.se
Programming code of spotify clone:

https://youtu.be/ANzPM5-lwXc
Information about HTML, CSS and JS:
https://www.w3schools.com/css/
https://www.w3schools.com/js/
https://www.w3schools.com/html/
Other websites like:
www.google.com www.youtube.com
https://youtu.be/HcOc7P5BMi4

DOC-20230508-WA000.pdf

Uploaded by

Copyright:

Available Formats

You might also like

DOC-20230508-WA000.pdf

Uploaded by

Document Information

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

DOC-20230508-WA000.pdf

Uploaded by

Copyright:

Available Formats

A PROJECT REPORT ON

SUBMITTED TO THE SAVITRIBAI PHULE PUNE UNIVERSITY, PUNE

❖ TEJAS DESHMUKH Exam Seat No: S190234239

❖ VAISHNAVI DHINGE Exam Seat No: S190234241

❖ YASH DHOMSE Exam Seat No: S190234242

❖ ANJALI DHOTE Exam Seat No: S190234244

❖ PARTH DONGARE Exam Seat No: S190234226

Under the guidance of

DEPARTMENT OF COMPUTER ENGINEERING

TEJAS DESHMUKH Exam Seat No: S190234239

Prof. P.P. Gaikwad Prof. M.P Wankhade

Dr. S.D. Lokhande

Sinhgad Technical Education Society,

Prof. P.P. Gaikwad Prof. M.P Wankhade

Dr. S.D. Lokhande

YASH DHOMSE Exam Seat No: S190234242

Prof. P. P. GAIKWAD Prof. M.P Wankhade

Dr. S.D. Lokhande

Sinhgad Technical Education Society,

ANJALI DHOTE Exam Seat No: S190234244

Prof. P.P. GAIKWAD Prof. M.P Wankhade

Dr. S.D. Lokhande

PARTH DONGARE Exam Seat No: S190234226

Prof. P.P. GAIKWAD Prof. M.P Wankhade

Dr. S.D. Lokhande

Sr. Content Pg.

Internal or Embedded CSS.

Shuffle Music List:

 Basic JavaScript feature like

 CSS will beautify our design

// Initialize the Variables

// Handle play/pause click

const makeAllPlays = ()=>{

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

Ann Werner (2020) Organizing music, organizing gender: algorithmic

Programming code of spotify clone:

You might also like