SPOTIFY CLONE USING HTML, CSS AND

JAVASCRIPT

Submitted by

ABHISHEK RANA

Under the guidance of

Mr. CHETAN PANDEY

GEHU LOGO

DEPARTMENT OF COMPUTER APPLICATIONS

GRAPHIC ERA HILL UNIVERSITY

Date:8-7-2023
 CERTIFICATE

This is to certify that the thesis titled “Spotify Clone” submitted by Abhishek Rana, to
Graphic Era Hill University for the award of the degree of Bachelor of Computer
Applications, is a bona fide record of the research work done by him/her under our
supervision. The contents of this project in full or in parts have not been submitted to any
other Institute or University for the award of any degree or diploma.

Place: Dehradun Name of guide:

Date: 8-7-2023 Mr. Chetan Pandey
 TABLE OF CONTENTS

ACKNOWLEDGEMENT i
ABBREVIATIONS iii
1. INTRODUCTION
1
1.1. Features………………………………….………………...................................
1.2. Objectives……………………………………………………………………......
2. REQUIREMENT ANALYSIS
3
2.1. Introduction……………………………………………………………………...
2.2. Functional Requirements………………………………………………………..

2.3. Non Functional Requirements…………………………………………………..

2.3. Technological Requirements

………………………………………………………………………

3. Development Process
3.1. Project planning……………………………………………………………………….

4. Challenges faced

4.1 White Box Testing………………………………………………………………

4.2. Black Box Testing………………………………………………………………

5. CONCLUSION AND FUTURE SCOPE

5.1. Conclusion……………………………………………………………………...

2.3. Future Scope……………………………………………………………………

A. APPENDIX
 ABBREVIATIONS

GEHU Graphic Era Hill University

HTML Hyper Text Markup Language
CSS Cascading Style Sheet
Project Report: Spotify Clone

1. Introduction:

The purpose of this project report is to provide an overview of the development and
implementation of a Spotify clone, a music streaming application similar to Spotify. This
report outlines the project's objectives, requirements, development process, technologies
used, challenges faced, and future recommendations.

2. Objectives:

The primary objectives of developing a Spotify clone are as follows:

a) Create a user-friendly music streaming platform that allows users to discover, search, and
listen to music from various genres and artists.

b) Implement features such as personalized playlists, recommendations, and user profiles.

c) Develop a robust backend infrastructure to handle user authentication, music storage, and
streaming capabilities.

d) Design an intuitive and visually appealing user interface for both web and mobile
platforms.

3. Requirements:

The requirements for the Spotify clone project can be categorized into three main areas:

a) Functional Requirements:

- User registration and login functionality.

- Browse and search for songs, albums, and artists.

- Create and manage playlists.

- Music recommendation based on user preferences.

- Audio streaming and playback capabilities.

- User profile management.

b) Non-Functional Requirements:

- Responsive and user-friendly interface.

- Fast and reliable music streaming.

- Secure user authentication and data storage.

- Scalability to handle a large number of concurrent users.

- Compatibility with major web and mobile platforms.

c) Technological Requirements:

- Programming languages: JavaScript, HTML5, CSS3.

- Frontend frameworks: React.js (web), React Native (mobile).

- Backend frameworks: Node.js, Express.js.

- Database: MongoDB.

- Audio streaming: HTML5 Audio API.

4. Development Process:

The development process for the Spotify clone project can follow an agile methodology, such
as Scrum, to ensure iterative development and regular feedback. The process can include the
following steps:

a) Project Planning:

- Define project scope, objectives, and requirements.

- Create a backlog of features and functionalities.

- Estimate development time and resources.

b) Design and Wireframing:

- Create wireframes and mockups for the user interface.

- Design the database schema and API architecture.

c) Development:

- Implement frontend components using React.js.

- Develop backend API endpoints using Node.js and Express.js.

- Integrate the frontend and backend components.

- Implement audio streaming capabilities.

d) Testing and Quality Assurance:

- Conduct unit testing for each component and functionality.

- Perform integration testing to ensure seamless interaction.

- Test on different devices and browsers for compatibility.

- Identify and fix any bugs or issues.

e) Deployment and Maintenance:

- Deploy the application on appropriate servers or cloud platforms.

- Regularly monitor and maintain the application's performance.

- Handle updates, bug fixes, and feature enhancements.

5. Challenges Faced:

During the development of the Spotify clone project, several challenges may arise, including:

a) Audio Streaming: Implementing smooth and uninterrupted audio streaming can be

technically complex.

b) Copyright and Licensing: Ensuring compliance with copyright laws and obtaining proper
licensing for music distribution.

c) Scalability: Handling a large number of concurrent users and maintaining performance

under heavy load.
d) User Experience: Designing an intuitive and seamless user interface that enhances the
overall user experience.

e) Security: Implementing secure user authentication and protecting user data from
unauthorized access.

6. Future Recommendations:

To enhance the Spotify clone application further, the following recommendations can be
considered:

a) Social Integration: Incorporate social features such as following friends, sharing playlists,
and collaborative playlist creation.

b) Offline Mode: Allow users to download songs for offline playback.

c) Podcast Support: Introduce podcast streaming and discovery features.

d) Machine Learning and AI: Utilize machine learning algorithms to improve music
recommendations and personalization.

e) Continuous Improvement: Gather user feedback and analytics to continuously improve the
application's features and performance.

7. Conclusion:

The development of a Spotify clone presents an exciting opportunity to create a music

streaming platform that replicates the core functionalities of Spotify. By following a
systematic development process, addressing challenges, and considering future
recommendations, a high-quality clone application can be developed to provide an excellent
user experience for music lovers.
 APPENDIX A
(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>Search</li>

<li>Playlist</li>

<li>Liked songs</li>

<li>About</li>
 </ul>

</nav>

<div class="container">

<div class="songList">

<h1>SPOTIFY CLONE BY ABHISHEK RANA</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>

<script src="script.js"></script>

<script src="https://kit.fontawesome.com/26504e4a1f.js"
crossorigin="anonymous"></script>

</body>

</html>
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');

h1{

color:black

body{

background-color: rgb(166, 140, 140);

*{

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;

.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;

}
JAVASCRIPT CODE:
JsearchInput = wrapper.querySelector("input"),

volume = wrapper.querySelector(".word i"),

infoText = wrapper.querySelector(".info-text"),

synonyms = wrapper.querySelector(".synonyms .list"),

removeIcon = wrapper.querySelector(".search span");

let audio;

function data(result, word){

if(result.title){

infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try

to search for another word.`;

}else{

wrapper.classList.add("active");

let definitions = result[0].meanings[0].definitions[0],

phontetics = `${result[0].meanings[0].partOfSpeech} /${result[0].phonetics[0].text}/`;

document.querySelector(".word p").innerText = result[0].word;

document.querySelector(".word span").innerText = phontetics;

document.querySelector(".meaning span").innerText = definitions.definition;

document.querySelector(".example span").innerText = definitions.example;

audio = new Audio(result[0].phonetics[0].audio);

if(definitions.synonyms[0] == undefined){

synonyms.parentElement.style.display = "none";}

else{

synonyms.parentElement.style.display = "block";

synonyms.innerHTML = "";

for (let i = 0; i < 5; i++) {

 let tag = `<span
onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[i]},</span>`;

tag = i == 4 ? tag = `<span

onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[4]}</span>` : tag;

synonyms.insertAdjacentHTML("beforeend", tag);

function search(word){

fetchApi(word);

searchInput.value = word;

function fetchApi(word){

wrapper.classList.remove("active");

infoText.style.color = "#000";

infoText.innerHTML = `Searching the meaning of <span>"${word}"</span>`;

let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;

fetch(url).then(response => response.json()).then(result => data(result, word)).catch(() =>{

infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try

to search for another word.`;

});

searchInput.addEventListener("keyup", e =>{

let word = e.target.value.replace(/\s+/g, ' ');

if(e.key == "Enter" && word){

fetchApi(word);

}
});

volume.addEventListener("click", ()=>{

volume.style.color = "#4D59FB";

audio.play();

setTimeout(() =>{

volume.style.color = "#999";

}, 800);

});

removeIcon.addEventListener("click", ()=>{

searchInput.value = "";

searchInput.focus();

wrapper.classList.remove("active");

infoText.style.color = "#9A9A9A";

infoText.innerHTML = "Type any existing word and press enter to get meaning, example,
synonyms, etc.";

});
ACKNOWLEDGEMENT

I completed the task of finishing this project thanks to my sincere efforts. On this project, I
have worked hard. The gracious assistance and support of many people, however, were
necessary for it to succeed.
My teacher, Mr. Chetan Pandey, has provided me with invaluable advice that has helped me
succeed in all phases of my project work, and I am very grateful for that. I want to thank my
lab mates and say how much I appreciate them. To the individuals who volunteered to lend
me their skills in building my idea.
I would also like to express my gratitude for the vital role played by the employees in the
mechanical laboratory, who granted me permission to use the lab apparatus as well as the
machine, to create the drawing, and to utilize all the other tools required in the lab.

Abhishek Rana
Roll no-2121035.