“Spotify Clone using Web Development”

By
Shreya Srivastava (1900100100155)

Submitted to the Department of Computer Science in partial

fulfillments of the requirements

for the degree of Bachelor of Technology

In
Computer Science & Engineering

United Institute of Engineering and Research

Dr. A.P.J. Abdul Kalam Technical University, Lucknow
December,2022-23
 TABLE OF CONTENT:

TOPIC PAGE NO.

STUDENT DECLARATION 4
CERTIFICATE

 ACKNOWLEDGEMENT 2 2

INTRODUCTION 3

OBJECTIVE 4

SYSTEM REQUIREMENTS 8

ABOUT THE PROJECT 13

RESULT 14
CERTIFICATE
 STUDENT DECLARATION
CERTIFICATE

I SHREYA SRIVASTAVA, a student of Bachelor of Technology of

batch : 2019-2023 with specialization in Computer Science and
Engineering from United College of Engineering and Research,
Allahabad hereby declare that my summer training report submitted
on the topic – “WEB DEVELOPMENT USING HTML AND
CSS” in the outcome of my own work and United College of
Engineering & Research, Allahabad (010), is correct and to do the
best of my knowledge and this work has been carried out taking care
of engineering ethics. I further declare that the work reported in this
record that has not been submitted anywhere else and is not copied
from anywhere.

Shreya Srivastava

1900100100155

BTECH, CSE

UCER, ALLAHABAD
 ACKNOWLEDGEMENT

I would like to express my special thanks of gratitude to my tutor MR. ROHIT

KAMBOJ, who gave me the golden opportunity to do this wonderful training
on the topic “WEB DEVELOPMENT USING HTML AND CSS”, which
also helped me in doing a lot of research and I came to know about so many
new things.

Last but not the least, I would also like to thank my parents and friends who
helped me a lot in finalizing this project and training within the limited time
frame. So, with due regards, I express my gratitude to them.
 INTRODUCTION
This report based on “Spotify Clone using HTML, CSS and
JavaScript” is a Web Development project that visually clones the
Spotify app and displays your Top Artists list, using the official
Spotify's Web API to log in. A Spotify Clone page displays the
artist’s name with the songs they composed. The songs by the artist
will be displayed with a number of listeners and you can add the
songs to the required playlists and hear it.

Spotify clone script enables users to share their favorite songs, tracks
on social channels with their friends and family hassle-free. The goal
of this project is to build a web - based application that mimic the
appearances and also some of the basic functionalities of a popular
music-streaming platform – Spotify. Spotify clone app is a music
streaming app which provides a free platform to listen music legally
without downloading it. A Spotify clone software is the secret to join
the lucrative audio listening market and obtaining an edge. It has 320
million active users including 150 paid subscribers.

Next Big Technology’s Spotify Clone App will always have the
opportunity to get inbuilt ads due to the potential for a huge userbase.
Generate revenue easily with those ads displaying on your app. Few
features need to be let access to the users with subscriptions, which
will let you earn revenue. Features like offline access and download
to the device should be given as prime access to the app.

6
 OBJECTIVE
The main objective of this project is to build a website that mimic the
appearances and also some of the basic functionalities of a popular
music streaming platform – Spotify by using their learned skills,
knowledge and abilities to develop web sites for the internet. Apply
basic design principles to present ideas, information, products, and
services on websites and basic programming principles to the
construction of web – based application.

Cards and Carousels are very common design patterns that Spotify
uses to display its content. The usage of cards and carousels is both
visually stimulating for the user while also not taking up too much
space on a page. Users can explore their favorite playlist on any of the
mobile platforms, i.e., Android or iOS as per their convenience.

6
 SYSTEM REQUIREMENTS

Hardware Requirements:

 Processor PENTIUM 4 or above

 Minimum 64 MB DDR SDRAM
 4GB or more hard disk space

Software Requirements:

 Windows 8 or above
 Visual Studio Code editor
 Memory 2 GB minimum, 4 GB recommended

6
 ABOUT THE PROJECT

This project based on “Spotify Clone using HTML, CSS and

JavaScript” is a Web Development project that visually clones the
Spotify app and displays your Top Artists list, using the official
Spotify's Web API to log in. A Spotify Clone page displays the
artist’s name with the songs they composed. The songs by the artist
will be displayed with a number of listeners and you can add the
songs to the required playlists and hear it.

Spotify clone script enables users to share their favorite songs, tracks
on social channels with their friends and family hassle-free. The goal
of this project is to build a web - based application that mimic the
appearances and also some of the basic functionalities of a popular
music-streaming platform – Spotify. Spotify clone app is a music
streaming app which provides a free platform to listen music legally
without downloading it. A Spotify clone software is the secret to join
the lucrative audio listening market and obtaining an edge.

SPOTIFY CLONE FEATURES:

 STREAM MUSIC LIST: Users can explore their favorite playlist on

any of the mobile platforms, i.e., Android or iOS as per their
convenience.
 ADVANCE ADMIN PANEL: Admin can manage the whole app
and music streaming portal through an effective admin panel provided
to them.
 ADMINISTRATE SUBSCRIPTION PLAN: Admin is facilitated
with a black-end panel through which they can easily manage their
users and their subscription plan.
 SHUFFLE MUSIC LIST: Users can easily shuffle their favorite
songs list to enjoy any of the songs randomly.
}
 UPLOAD MUSIC: Admin can upload a new playlist from the back-
end panel offered with Spotify clone for their app users.
 SOCIAL MEDIA LOGIN: Users can login in using their social
media platform or can use their login credentials to log in to the app.
 CREATING A PROFILE: Users can create and edit their own profile
through the efficient web, including uploading their profile picture
option also.
 ADD FAVORITE: Choose to share details over social media
platforms by adding single or multiple kinds of music to your favorite
list.
 SELECT PLAYLIST: Browse for new songs to make smart choices
from the available music list on the website; they can choose to play
any as per their need.

TECHNOLOGIES USED:

1. HTML:
HTML stands for Hyper Text Markup Language. It is used to design
web pages using a markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between
web pages. A markup language is used to define the text document
within the tag which defines the structure of web pages. This
language is used to annotate (make notes for the computer) text so
that a machine can understand it and manipulate text accordingly.
Most markup languages (e.g., HTML) are human-readable. The
language uses tags to define what manipulation has to be done on the
text. 

HTML is a markup language used by the browser to manipulate

text, images, and other content, in order to display it in the required
format. HTML was created by Tim Berners-Lee in 1991. The first-
ever version of HTML was HTML 1.0, but the first standard version
was HTML 2.0, published in 1995 .

}
 Elements and Tags: HTML uses
predefined tags and elements which tell the browser how to properly
display the content. Remember to include closing tags. If omitted,
the browser applies the effect of the opening tag until the end of the
page.
HTML page structure: The basic structure of an HTML page is
laid out below. It contains the essential building-block elements (i.e.
doctype declaration, HTML, head, title, and body elements) upon
which all web pages are created.
<!DOCTYPE html>: This is the document type declaration (not
technically a tag). It declares a document as being an HTML
document. The doctype declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements
are contained within it.
<head>: The head tag contains the “behind the scenes” elements for
a webpage. Elements within the head aren’t visible on the front-end
of a webpage. HTML elements used inside the <head> element
include: 
 <style>-This html tag allows us to insert styling into our webpages
and make them appealing to look at with the help of CSS.
 <title>-The title is what is displayed on the top of your browser
when you visit a website and contains title of the webpage that you
are viewing.
 <base>-It specifies the base URL for all relative URLs in a
document.

}
 <noscript>– Defines a section of HTML that is inserted when the
scripting has been turned off in the user’s browser.
 <script>-This tag is used to add functionality in the website with the
help of JavaScript.
 <meta>-This tag encloses the meta data of the website that must be
loaded every time the website is visited. For eg: - the metadata
charset allows you to use the standard UTF-8 encoding in your
website. This in turn allows the users to view your webpage in the
language of their choice. It is a self-closing tag.
 <link>– The ‘link’ tag is used to tie together HTML, CSS and
JavaScript. It is self-closing.
<body>: The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser will
show on the front-end.
An HTML document can be created using any text editor. Save the
text file using .html or .htm. Once saved as an HTML document, the
file can be opened as a webpage in the browser.

FEATURES OF HTML: 
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language .

ADVANTAGES: 
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.

DISADVANTAGES: 
 HTML can only create static web pages. For dynamic web pages,
other languages have to be used.
 A large amount of code has to be written to create a simple web
page.
 The security feature is not good .
}
2. CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply
designed language intended to simplify the process of making web
pages presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent of the
HTML that makes up each web page. It describes how a webpage
should look. It prescribes colours, fonts, spacing, and much more. In
short, you can make your website look however you want. CSS lets
developers and designers define how it behaves, including how
elements are positioned in the browser.
While html uses tags, CSS uses rulesets. CSS is easy to learn and
understand, but it provides powerful control over the presentation of
an HTML document.

CSS VERSIONS RELEASE YEARS:

ADVANTAGES:
 CSS saves time: You can write CSS once and reuse the same sheet
in multiple HTML pages.
 Easy Maintenance: To make a global change simply change the
style, and all elements in all the webpages will be updated
automatically.
}
 Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the
help of an offline cache. Using this we can view offline websites.

CSS SELECTORS: CSS selectors are used to “find” (or select)

HTML elements based on their element name, id, class, attribute,
and more.
 UNIVERSAL SELECTORS: Rather than selecting elements of a
specific type, the universal selector quite simply matches the name
of any element type.
 ELEMENT SELECTORS: The element selector selects elements
based on the element name. You can select all p elements on a page
like this (in this case, all p elements will be centre-aligned, with a red
text colour).
 DESCENDANT SELECTORS: Suppose you want to apply a style
rule to a particular element only when it lies inside a particular
element. As given in the following example, the style rule will apply
to the em element only when it lies inside the ul tag.
 ID SELECTORS: The class selectors elements with a specific class
attribute. To select elements with a specific class, write a period (.)
character, followed by the name of the class.
 GROUPING SELECTORS If you have elements with the same
style definitions, it will be better to group the selectors, to minimize
the code. To group selectors, separate each selector with a comma . 

}
3. JAVASCRIPT: JavaScript is a lightweight, cross-platform, and
interpreted compiled programming language which is also known as
the scripting language for webpages. It is well-known for the
development of web pages; many non-browser environments also
use it. JavaScript can be used for Client-side developments as well
as Server-side developments. JavaScript is both imperative and
declarative type of language. JavaScript contains a standard library
of objects, like Array, Date, and Math, and a core set of language
elements like operators, control structures, and statements. 

 Client-Side: It supplies objects to control a browser and

its Document Object Model(DOM). Like if client-side extensions
allow an application to place elements on an HTML form and
respond to user events such as mouse clicks, form input, and page
navigation. Useful libraries for the client-side
are AngularJS, ReactJS, VueJS and so many others.

 Server-Side: It supplies objects relevant to running JavaScript on a

server. Like if the server-side extensions allow an application to
communicate with a database, and provide continuity of information
from one invocation to another of the application, or perform file
manipulations on a server. The useful framework which is the most
famous these days is NodeJS.

JavaScript can be added to your HTML file in two ways:

 INTERNAL JS: We can add JavaScript directly to our HTML file

by writing the code inside the <script> tag. The <script> tag can
either be placed inside the <head> or the <body> tag according to
the requirement.

 EXTERNAL JS: We can write JavaScript code in other file having

an extension.js and then link this file inside the <head> tag of the
HTML file in which we want to add this code.

}
HISTORY OF JAVASCRIPT:
It was created in 1995 by Brendan Eich while he was an engineer at
Netscape. It was originally going to be named Live Script but was
renamed. Unlike most programming languages, the JavaScript
language has no concept of input or output. It is designed to run as a
scripting language in a host environment, and it is up to the host
environment to provide mechanisms for communicating with the
outside world. The most common host environment is the browser.

FEATURES OF JAVASCRIPT:

According to a recent survey conducted by Stack Overflow,

JavaScript is the most popular language on earth. 
With advances in browser technology and JavaScript having moved
into the server with Node.js and other frameworks, JavaScript is
capable of so much more. Here are a few things that we can do with
JavaScript: 
 JavaScript was created in the first place for DOM
manipulation. Earlier websites were mostly static, after JS was
created dynamic Web sites were made .
 Functions in JS are objects. They may have properties and
methods just like another object. They can be passed as
arguments in other functions.
 Can handle date and time.
 Performs Form Validation although the forms are created using
HTML.
 No compiler is needed.

APPLICATIONS OF JAVASCRIPT: 

 WEB DEVELOPMENT: Adding interactivity and behavior to

static sites JavaScript was invented to do this in 1995. By using
AngularJS that can be achieved so easily.
 WEB APPLICATIONS: With technology, browsers have
improved to the extent that a language was required to create
}
 robust web applications. When we explore a map in Google
Maps then we only need to click and drag the mouse. All
detailed view is just a click away, and this is possible only
because of JavaScript. It uses Application Programming
Interfaces (APIs) that provide extra power to the code. The
Electron and React is helpful in this department.
 SERVER APPLICATIONS: With the help of Node.js,
JavaScript made its way from client to server and node.js is the
most powerful on the server-side.
 GAMES: Not only in websites, but JavaScript also helps in
creating games for leisure. The combination of JavaScript and
HTML 5 makes JavaScript popular in game development as
well. It provides the EaseJS library which provides solutions for
working with rich graphics.
 SMARTWATCHES: JavaScript is being used in all possible
devices and applications. It provides a library PebbleJS which is
used in smartwatch applications. This framework works for
applications that require the internet for its functioning.
 ART: Artists and designers can create whatever they want
using JavaScript to draw on HTML 5 canvas, and make the
sound more effective also can be used p5.js library.
 MACHINE LEARNING: This JavaScript ml5.js library can
be used in web development by using machine learning.
 MOBILE APPLICATONS: JavaScript can also be used to
build an application for non-web contexts. The features and
uses of JavaScript make it a powerful tool for creating mobile
applications. This is a Framework for building web and mobile
apps using JavaScript. Using React Native, we can build mobile
applications for different operating systems. We do not require
to write code for different systems. Write once use it anywhere!

LIMITATIONS OF JAVASCRIPT:

}
  Security risks: JavaScript can be used to fetch data using
AJAX or by manipulating tags that load data such as <img>,
<object>, <script>. These attacks are called cross site script
attacks. They inject JS that is not the part of the site into the
visitor’s browser thus fetching the details. 

 Performance: JavaScript does not provide the same level of

performance as offered by many traditional languages as a
complex program written in JavaScript would be comparatively
slow. But as JavaScript is used to perform simple tasks in a
browser, so performance is not considered a big restriction in its
use.
 Complexity: To master a scripting language, programmers
must have a thorough knowledge of all the programming
concepts, core language objects, client and server-side objects
otherwise it would be difficult for them to write advanced
scripts using JavaScript.
 Weak error handling and type checking facilities: It is
weakly typed language as there is no need to specify the data
type of the variable. So wrong type checking is not performed
by compile.

SPOTIFY PREMIUM REVIEWS:

Offers special features such as updates, offline connectivity etc., for

a certain price. Users can pay to use these premium features if they
feel that these features are worth the price they pay.
For their annual membership, Spotify gets the discount back, but the
discount is not as deep as it used to be. A year of Spotify premium is
down 30 percent to Rs. 999 for people, and if you paid for the same
over 12 months, it would help you save Rs. 429. Spotify has
previously discounted its monthly membership to Rs. 699.

}
IN-APP ADVERTISEMENTS: As you are observing a massive
traffic on your App, then you can use ads on your App. Spotify
doesn’t come in mind when you hear about wasting your marketing
dollars. And still, you might think of radio as a very conventional
marketing tool. You might also dream of saving any of your bucks
on YouTube for online marketing.

}
}
 RESULT

In this Spotify Clone app, we will be able to see the Spotify logo on
the top left corner followed by a Home and About option as well. In
this web-based application, we can create our own playlist, shuffle
different songs in it, modify it as per our convenience, add songs,
remove songs and also change the order of its playing. We can see
the duration of all the songs which we have in our playlist, with a
play and pause button and we have the forward and backward button
as well to change the song or listen the same song again.

Our service is premium, free of cost so many people from different

background can enjoy the music equally. Their will be a premium
version of our web service which will be accessible for a small
}
monthly fee. By spending their hard-earned cash, the customer
would be able to enjoy add-free content and also the ability to skip
songs from their automatically generated playlist. We will also have
some promotion functions for music producers where they could
spend more money to promote their songs in the home page of our
site and to higher preference on the suggestion tabs of our users.

The project will have the following outcomes:

 A music streaming platform for music and music lovers across the
country.
 An easy to use and interactive web and android presence.
 Complete discographies of artists including their upcoming music
albums, tours and live performance.
 A social hub for music lovers and a platform for artists and fans.
 A showcase for up-and-coming music talents.

SPOTIFY CLONE APP VALUE:

}
SPOTIFY EARNINGS:

SPOTIFY COMPETITORS:

}
 CONCLUSION

We started with the data exploration where we got a feeling for the
dataset in the form of storing songs, checked about various issues and
learned which features are important. During this process we used
HTML, CSS and JAVASCRIPT for creating the Spotify Clone web-
based application. Afterwards we started training with 3 different
web development technologies, picked all of them and applied cross
validation on it. Then we discussed how random the Spotify Clone
works, took a look at the importance it assigns to the different features
and tuned its performance through optimizing it’s hyperparameter
features. Lastly, we looked at its confusion matrix and computed the
model’s precision, recall and programming tool. There is no question
that an app like Spotify is a profitable business idea and the
possibility of profitability only gets better with the steady growth
predicted for the music streaming industry. If you would like to create
a Spotify like app, all you need to do is get in touch with an app
development company that specializes in clones of Spotify. They will
take care to understand your requirements and not only create the app
but also customize it according to your requirements, so you can set a
stream of revenue to play into your bank account without any
interruptions!

}
 FUTURE SCOPE

Of course, there is still room for improvement, like doing a more

extensive feature engineering, by comparing and plotting the features
against each other and identifying and removing the noisy features.
Web Development needs more experts who can work with
technologies. It can be used for artificial intelligence, pattern
recognition, image recognition, speech recognition, predictive
Analytics, Virtual reality, Internet of Things (IoT) etc. The scope of
Web Development only keeps increasing. This model can be used in
railways, airlines navies to predict the survival of the passengers
before hands and many maintain their security accordingly. Web
development is constantly evolving with advancements in technology.
Though we may not be able to see this on a daily basis, it’s easy for us
to look back and see how things have been transformed. But seeing
the fast-paced nature of this industry and, of course, the competition,
it’s important to stay updated with the latest technology and tools to
always stay at your best.

}
 REFERENCE

 https://omninos.com/spotify-clone-app/ (Access on 5th

December 2022)
 https://morioh.com/p/fc01d8763bde (Access on 9th December
2022)
 https://webrockmedia.com (Access on 14th December 2022)
 https://www.coursehero.com (Access on 20th December 2022)