Minor Project Report

MINOR PROJECT REPORT
SPOTIFY CLONE
SUBMITTED BY:
SIDHARTH KUMAR(03355202719)
KUMAR ASHUTOSH MANGALAM(02055202719)
DEEPAK KUMAR(04355202719)
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING
BHAGWAN MAHAVEER COLLEGE OF ENGINEERING AND MANAGEMENT

JAGDISPUR,SONEPAT
AFFLIATED TO GGSIPU DWARKA, DELHI
Guru Gobind Singh Indraprastha University
CERTIFICATE
Certified that this project report “SPOTIFY CLONE “ is the work of Sidharth
Kumar,Deepak Kumar and Kumar Ashutosh manglam who carried out the
minor project work under my supervision.
Shruti Ahuza
Assistant Professor
CSE, BMCEM
Submitted to the Viva voce Examination held on _____________________
INTERNAL EXAMINER EXTERNAL EXAMINER

DECLARATION
We SIDHARTH KUMAR (03355202719), KUMAR ASHUTOSH MANGLAM (02055202719), DEEPAK

KUMAR (04355202719), of Fourth Year B.Tech., in the Department of Computer Science and
Engineering from BMCEM hereby declare that the work presented in this report entitled “SPOTIFY
CLONE is the outcome of my own work, is bonafide and correct to the best of my knowledge and this
work has been carried out taking care of Engineering Ethics. The work presented does not infringe any
patented work and has not been submitted to any other University or anywhere else for the award of
any degree or any professional diploma.
SIDHARTH KUMAR (03355202719)

KUMAR ASHUTOSH MANGLAM (02055202719)
DEEPAK KUMAR (04355202719)
ACKNOWLEDGEMENT
We would like to express our deep gratitude to our guide Ms. SHRUTI MAM for her valuable guidance,
faculty of computer science and engineering, MVSIT and timely suggestions during the entire duration
of our dissertation work, without which this work would not have been possible. We would also like to
convey our deep regards to all other faculty members of MVSIT, who have best. owed their great effort
and guidance at appropriate times without which it would have been very difficult on our part to finish
this work. Finally, we would also like to thank our friends for their advice and pointing out our
mistakes, parents, and classmates for their encouragement throughout our project period. At last but
not the least, we thank everyone for supporting us directly or indirectly in completing this project
successfully
ABSTRACT
The objective of this project is to design online Music web application with user interface which will
enable them to browse, search, get song recommendations and download the song items of their
choice. The motivation of this project comes from my desire to learn the increasingly growing field of
PHP(Hypertext Preprocessor) database designing, website designing and their growing
popularity by taking up this project.
If the site is hard to use and easy to forget, it just doesn’t matter what technologies was used to create
it. Unfortunately, this truth makes many inexperienced programmers underestimate the importantce
of the way the invisible part of a site is implemented-the code, the database,and so on. The visual part
of the site gets visitors interested to begin with, but its functionality makes them come back. A web
site can sometimes be implemented very quickly based on certain initial requirements, but if not
properly architected, it can become difficult, if not impossible, to change.
Media Usage growing Day-by-day rapidly and people are easily accessing the internet for various
purposes. Performance is also a major thrust area in the web application which is one of the main
reasons why users get attracted to it. Growing user needs should be taken in to concern with new
features to be included.
CONTENTS
Declaration
Acknowledgement
Abstract
CHAPTERS
CHAPTERS 1. -INTRODUCTION
1.1 Background
1.2 Objective
1.3 Purpose, Scope and Applicability
1.3.1 Purpose
1.3.2 Scope
1.3.3 Applicability
1.4 Achievements
1.5 Organization of Reports
Chapter 2: System Analysis

2.1. Existing System
2.2 Proposed System
2.3 Requirement Analysis
2.4 Software and Hardware Requirements
2.5 Justification of selection of Technology
Chapter 3: System Design

3.1 Basic Modules
3.2 Data Design
3.2.1 Schema Design
3.2.2 Data Integrity and Constraints
3.3 Procedural Design
3.3.1 Use case diagram
3.4 User Interface Design
Chapter 4: Implementing and Testing

4.1 Implementation Approaches
4.2 Coding Details and code Efficiency
4.2.1 Code Efficiency
4.3 Testing Approach
4.3.1 Unit Testing
4.3.2 Integrated Testing
4.3.3 Beta testing
5.CODING DETAILS
Chapter 6: Conclusion and Future Work

6.1 Conclusion
6.1.1 Significance of the system
6.2 Limitation of the System
6.3 Future Scope of the project
Chapter 7: Reference
CHAPTER 1 INTRODUCTION
With increasing daemand of imformation and data. Computer Technology is the field which is
developing rapidly. Technology which is in demand today might get redundant in future. So, it
necessary to provide the latest and most modern IT solutions to various businesses and other
institutions.
The objective of this project is to implement online Music web application with user interface. The
motivation of this project comes from my desire to learn the increasingly growing field of php server
database designing, website designing and their growing popularity by taking up this project.
The word design in the context of a web Application can mean many things. Its most popular usage
probably refers to the visual and user interface(UI) design of website.
This project covers the following implementation:
1) An online product catalog that can be brosed: The work starts with adding many new product
catalog features which includes displaying categories, product details.
2) Searching the Catalog: For the visual part, a text box is used in which the visitor can enter one
or more words to search through the product catalog. In Online music website, the words
entered by visitors are searched for in the songs named and descriptions.
3) Handling customer Accounts: in customer account system, details such as credit card numbers
are stored in a database so that customers don’t have to retype this information each time they
place an order. Customers can log in via a login page or dialog box to get access to secured
areas of the website. Once logged in the web Application remembers the customer logs
out(either manually via a Log out button or automatically, if the session times out or a server
error occurs).
All secures pages in a web application need to check whether customer is logged in before
allowing access.
4) Making Song Recommendations: One of the most important advantages of an online Music
Website is the capability to customize the web site for each visitor based on his or her
preferences, or based on data gathered from other visitors with similar preferences. In Song
recommendations system, additional songs are suggested to an individual visitor in a clever
way.
1.1 Background
I did some literature review of the previous website that were in the market and the major
drawback of those systems were that there was unencrypted user data password, unnormalized
database, non-responsive, full of ads and so on.
So the new website will be fully responsive and proper recommendations for user to feel right way and
visit the website again and again. It will also be simple, fast and dynamic on go website for better
listening and downloading of the songs. No unwanted popups and ad will disturb the user during
listening.
1.1 Objective
The objective of the project is to implement the online music website that will allow user to
browser, search, listen and download all the songs that they want. The user interface will have all the
necessary songs, language and user settings for betterment of the user. User can create playlist , add
songs to it and remove when they need and sorting it on their own. The main aim will be implemented
a whole user friendly UI for the user.
1.2 Purpose,Scope,Applicability
1.2.1 Purpose:
The purpose of this project is to provide an automated PHP web application and to explore the
capabilities and provide a convenient website to user.
1.3.2 SCOPE
The scope of the project is as follows:
◼ The main scope is to provide the right platform to music listener out in the digital market.
◼ In future if the website is successful and user are increasing and system administrator is been
done properly we can develop the app for the user and the betterment of music listener.
1.2.2 Applicability:
◼ This project is used to listen the music .
◼ It is also used to download it
1.3 Achievements
This project has helped me in learning more similar projects and how to make the project more
creative. The more I was working on my project; I gained more knowledge and learned more
interesting features and how to design my web page more creatively. This project has helped me to
improve my programming skills and how to manage my time and consume time.
It helped me to explore more similar projects and gain more information and knowledge about
them. I’m Keen to learn more about different programming language and to work on other projects.
1.4 Organization of Report
The report divide into 4 main chapters. It gives a brief introduction of the project covered.
Chapter 1 gives the information about the background and objectives of the project. It also specifies
the future scope of the project.
Chapter 2 gives us a brief knowledge of the existing system and the proposed system. It also provide us
with information of the software requirements. Justification of the technology has also been provide.
Chapter 3 Provides us with Module diagram , ER Diagram and other UML diagrams. It also provides us
with the data dictionary of the database.
Chapter 4 provides us with the test cases and their results.
Chaptet 5 includes the images of the website
Chapter 6 gives us the conclusion of the project and the future work to be done.
Chapter 2
System Analysis
2.1 Existing System

No system was being used properlyby the administrator. The administrator used inefficient way to
store the record the information of their music listener. The administrator didn’t have any efficient
way to access database easily to store the music listener details.
Some of the negative expects of the existing system are as follows:

◼ Course of action is time consuming
◼ Songs searches are not that accurate
◼ Technique are most complicated for the required application. Proper technique are not
exposed, so the functioning is not intrigued
2.2 Proposed System

In the web-based music website anyone interested in listening can access the website very
easily by just sitting in the comfort wherever he/she is confortable and download the song he/she
wishes. The listener can search for song based on the name of the artist, album,song or the name of
the song itself. Even if the user misspells the songs, forgets the album title or doesn’t know the song,
artist options will be given so that he/she can get what he/she wants.
Online Music Website will be administrated by the admin or someone who is capable of doing it
Therefore there would be two different classes for user login and the admin login on the website. One
is the use visiting the website to listen and download and the song and the other admin who will
maintaining the whole system.
2.3 Requirements Analysis
The basic requirement of my project is to provide online music and store database of the music
listener. The user must be able to look songs and albums online. They must be able to download Songs.
User must login to the web-system to look songs and album online. They must be able to download
Songs. User must login to the web-system to look and search the songs and listen it, otherwise the user
will not be able to listen and downloading the song.
The admin can check the database of his/her Music Listener. He will be able to check all the
details of the music listener that has download the song.
2.4 Software and Hardware Requirements

For Server:
Hardware Requirements:
◼ 512 MB RAM & above
◼ 3.4 GHz & above
◼ 60 GB Hard disk & above
◼ Internet Connection
Software Requirement:
◼ Operating System
◼ Visual Studio IDE
◼ Java script
◼ XAMPP
For User:
Hardware Requirements:
◼ 128 MB RAM & above
◼ 2.0 GHz & above
◼ 60 GB hard disk & above
◼ Internet connection
Software Requirements:
◼ Operating system
◼ Web browser
2.6 Justification of selection of technology

◼ HTML
◼ CSS
◼ JAVASCRIPT
◼ PHP
◼ BOOTSTRAP
HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. I will list down some of the key
advantages of learning HTML:
• Create Web site - You can create a website or customize an existing web
template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional web
designer, HTML and CSS designing is a must skill.
• Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
After creating web page using HTML coding, we need to style them to make them more attractive
to users. CSS(Cascading Style Sheets) is used for this work.
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 or XML (including XML dialects such
as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML
and JavaScript.[2]
CSS is designed to enable the separation of content and presentation, including layout, colors,
and fonts.[3] 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; and
enable 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.[4]
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.[5]
In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG,
and XUL.
After HTML and CSS we need JavaScript to program the behaviour of web pages.
JavaScript was initially created to “make web pages alive”.
JavaSCRIOT often abbreviated as JS, is a programming language that is one of the core technologies of
the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on
the client side for webpage behavior, often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users' devices.
JavaScript is a high-level, often just-in-time compiled language that conforms to
the ECMAScript standard.[10] It has dynamic typing, prototype-based object-orientation, and first-class
functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming
styles. It has application programming interfaces (APIs) for working with text, dates, regular
expressions, standard data structures, and the Document Object Model (DOM).
The ECMAScript standard does not include any input/output (I/O), such as networking, storage,
or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for
I/O.
JavaScript engines were originally used only in web browsers, but are now core components of
some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two
languages are distinct and differ greatly in design.
In backend we use PHP. PHP is an open-source, interpreted, and object-oriented scripting

language that can be executed at the server-side. PHP is well suited for web development.
Therefore, it is used to develop web applications (an application that executes on the server
and generates the dynamic page).
o PHP stands for Hypertext Preprocessor.

o PHP is an interpreted language, i.e., there is no need for compilation.
o PHP is faster than other scripting languages, for example, ASP and JSP.
o PHP is a server-side scripting language, which is used to manage the dynamic content of
the website.
o PHP can be embedded into HTML.
o PHP is an object-oriented language.
o PHP is an open-source scripting language.
CHAPTER 3 SYSTEM DESIGN
3.1 Basic Modules
Here, we have all different modules and functionality. So, let see each and every module
and the integrity of the modules.
◼ User Module
◼ Admin Module
If we combine the entire above listed module then obly our half of the system gets ready.
User module
In this module the user can register them self to the website, users can login, users can
stream songs and user can play and listen song.
3.2 Data design
In this data design we will see the how we organize the data, managing the data, and
manipulating of the data.
3.2.1 Schema Design
E-R Diagram
3.2.2 Data Integrity and Constraints
Now we will see and discuss the structure of database and how we manage all the
data. For database we can use any server as per the developer or the client requirement.
Mostly it Depends on the developer because developer know which database server is more
feasible for the client. PHP ensure it.
3.3 Procedural Design
3.3.1 Use case Diagram
3.4. User Interface Design
Home page
After minimising the screen

LOGIN AND SIGNUP PAGE
CHAPTER 4 Implementation and Testing
4.1 Implementation Approaches

Agile is a methodology is a collection of software development methodology
which works on an iterative and incremental method building the software from the very
initiation of the project development instead of building all the software at once. Agile discovers
what the customer and how to build the code and change things along the way.
Agile works by breaking down the project into smaller chunks and then continuously delivering
them into in short two weeks cycles called iterations.
In agile, we have implemented project incrementally, at every stage customer
requirement and implemented. Frequently changing the project modules according to the client
requirements. Once the requirements gathers the project accordingly changes and project is
tested which is visible by the clients. If it is approved by customer then it will proceed with the
next module.
4.2 Coding details and code Efficiency
4.2.1 Code Efficiency
Code efficiency is a board term is used to depict the reliability, speed and
programming methodology used in developing codes for application. Code efficiency is directly
linked with algorithmic efficiency and the speed of runtime execution for software. It is the key
element in ensuring high performance. The goal of code efficiency is to reduce resources
consumption and completion time as much as possible with minimum risk to the business or
operating environment. The software product quality can be accessed and evaluated with the
help of the efficiency of the code used.
4.3 Testing Approach
4.3.1 Unit testing
This software is made of many units. Each unit refers to some aspects. Where
individual units to be tested to find whether they have implemented the design correctly or not.
Unit testing may involve designing and usage of stubs/drivers to execute units as they may be
executed alone. Where unit testing is also known as COMPONENT TESTING.
4.3.2 Integrated Testing

Integration involves testing of many units by combining them together to form a sub
module, as the case may be. If the integrated parts cannot create an executable an their own,
designing of stubs/drivers may be needed for their executed independently, it may be done by
the testers. Integration testing ensures that the units are working correctly when tested
individually are also working correctly when brought together. Integration testing helps in
identifying if there are any issues of parameters passing as different units are integrating with
each other. Test case are defined by referring to low level design. Integration testing refers to
detailed design or low-level testing.
4.3.3 Beta Testing
Basically, in any aspects Beta testing represents a business pilot where testing is
actually conducted by the customer in productive/semi-productive environment. It is done at
the selected customer locations by representatives from the customer side: Tester/Developers
may be appointed to help the customer in testing the application, and recording the problems,
if any. Beta testing is extensively used as parallel testing to give confidence to the user that the
software really works as per established existing system at customer’s place.
5. CODING
welcome.php
<!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">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media.css">

<title>Music Website</title>
</head>
<body>
<header>
<div class="menu_side">
<h6 id="menu_list_active_button" ><i class="bi bi-music-note-list"></i></h6>

<h1>Playlist</h1>
<div class="playlist">
<h4 class="active"><span></span><i class="bi bi-music-note-beamed"></i> Playlist</h4>
<h4><span></span><i class="bi bi-music-note-beamed"></i> Last Listening</h4>
<h4><span></span><i class="bi bi-music-note-beamed"></i> Recommended</h4>

</div>
<div class="menu_song">
<li class="songItem">
<span>01</span>
<img src="img/1.jpg" alt="">

<h5>On My Way <br>
<div class="subtitle">Alan Walker</div>

</h5>
<i class="bi playListPlay bi-play-circle-fill" id="1"></i>
</li>
<span>02</span>
<h5>On My Way <br>
</h5>
</li>
<span>03</span>
<h5>On My Way <br>

</h5>

</li>
<span>04</span>
<h5>On My Way <br>

</h5>
</li>
<span>05</span>

<h5>On My Way <br>
</h5>

</li>
<span>06</span>
<h5>On My Way <br>

</h5>

</li>
<span>07</span>
<h5>On My Way <br>
</h5>
</li>
</div>
</div>
<div class="song_side">
<nav>
<ul>
<li>Discover <span></span></li>
<li>MY LIBRARY</li>
<li>RADIO</li>
</ul>
<div class="search">
<i class="bi bi-search"></i>
<input type="text" placeholder="Search Music...">

<div class="search_results">

</div>
</div>
<div class="user">
<img src="img/KDS CODER.png" alt="">

</div>
</nav>
<h1>Alen Walker-Fade</h1>
<p>You were the shadow to my light did you feel us Another start you fade <br> Away afraid our aim is
out of sight Wanna see us Alive</p>

<div class="buttons">
<button>PLAY</button>
<button>FOLLOW</button>
</div>
</div>
<div class="popular_song">
<div class="h4">
<h4>Popular Song</h4>
<div class="btn_s">
<i class="bi bi-arrow-left-short" id="pop_song_left"></i>
<i class="bi bi-arrow-right-short" id="pop_song_right"></i>
</div>
</div>
<div class="pop_song">
<div class="img_play">
</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>
</h5>
</li>

</div>
<h5>On My Way<br>
</h5>
</li>

</div>
<h5>On My Way<br>
</h5>
</li>

</div>
<h5>On My Way<br>
</h5>
</li>

</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>

</h5>
</li>

</div>
<h5>On My Way<br>

</h5>
</li>

</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>

</h5>
</li>
</div>
<h5>On My Way<br>
</h5>
</li>
</div>
</div>
<div class="popular_artists">
<div class="h4">
<h4>Popular Artists</h4>
<div class="btn_s">
<i class="bi bi-arrow-left-short" id="pop_art_left"></i>
<i class="bi bi-arrow-right-short" id="pop_art_right"></i>

</div>
</div>
<div class="item Artists_bx">

<li>
<a href="arjit.html"><img src="img/arjit.jpg" alt=""></a>
</li>
<li>
<img src="img/alan.jpg" alt="">
</li>
<li>
<img src="img/justin-bieber-lede.jpg" alt="">
</li>
<li>
<img src="img/guru.jpg" alt="">
</li>
<li>
<img src="img/honey.jpg" alt="">
</li>
<li>
<img src="img/neha.jpg" alt="">
</li>
<li>
<img src="img/jubin Nautiyal.jpg" alt="">
</li>
<li>
<img src="img/Diljit_Dosanjh.jpg" alt="">
</li>
<li>
<img src="img/dhvani.jpg" alt="">
</li>
<li>
<img src="img/atif.jpg" alt="">
</li>
<li>
<img src="img/akhil.jpg" alt="">
</li>
<li>
<img src="img/alan.jpg" alt="">
</li>
<li>
<img src="img/guru.jpg" alt="">
</li>
</div>
</div>
</div>
<div class="master_play">
<div class="wave" id="wave">
<div class="wave1"></div>
</div>
<img src="img/20.jpg" alt="" id="poster_master_play">
<h5 id="title"> Vande mataram <div class="subtitle">Bankim Chandra</div>

</h5>
<div class="icon">
<i class="bi shuffle bi-music-note-beamed">next</i>
<i class="bi bi-skip-start-fill" id="back"></i>
<i class="bi bi-play-fill" id="masterPlay"></i>
<i class="bi bi-skip-end-fill" id="next"></i>

<a href="" download id="download_music"><i class="bi bi-cloud-arrow-down-fill"></i></a>
</div>
<span id="currentStart">0:00</span>
<div class="bar">
<input type="range" id="seek" min="0" max="100">

<div class="bar2" id="bar2"></div>
<div class="dot"></div>
</div>
<span id="currentEnd">0:30</span>
<div class="vol">
<i class="bi bi-volume-up-fill" id="vol_icon"></i>
<input type="range" min="0" max="100" id="vol">
<div class="vol_bar"></div>
<div class="dot" id="vol_dot"></div>
</div>
</div>
</header>
<script src="app.js"></script>
<script>
let menu_list_active_button = document.getElementById('menu_list_active_button');
let menu_side = document.getElementsByClassName('menu_side')[0];
let song_side = document.getElementsByClassName('song_side')[0];
let xm = window.matchMedia("(max-width: 930px)");
menu_list_active_button.addEventListener('click', () => {
if (xm.matches) {
menu_side.style.transform = "unset";
menu_list_active_button.style.opacity = 0;
})
song_side.addEventListener('click', () => {
if (xm.matches) {
menu_side.style.transform = "translateX(-100%)";
menu_list_active_button.style.opacity = 1;
}
})
</script>
</body>
</html>
STYLE.CSS
/* Google Font "poppins" */
@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,
400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
body {
font-family: 'Poppins', sans-serif;
width: 100%;
height: 100vh;
background: #121213;
display: grid;
place-items: center;
}
header {
position: relative;
width: 85%;
height: 95%;
/* border: 1px solid #fff; */

display: flex;
flex-wrap: wrap;
overflow: hidden;
}
header .menu_side,
.song_side {
width: 25%;
height: 90%;
box-shadow: 5px 0px 2px #090f1f;
color: #fff;
header .song_side {
width: 75%;
background: #0b1320;
header .menu_side h6 {
display: none;
header .master_play {
width: 100%;
height: 10%;

}
font-size: 20px;
margin: 15px 0px 0px 20px;

font-weight: 500;
header .menu_side .playlist {

header .menu_side .playlist h4 {
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
color: #4c5262;
cursor: pointer;
display: flex;
align-items: center;
transition: .3s linear;
}
header .menu_side .playlist h4:hover {
color: #fff;
header .menu_side .playlist h4 span {

position: relative;
margin-right: 35px;
}
header .menu_side .playlist h4 span::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
border: 2px solid #4c5262;

border-radius: 50%;
top: -4px;
header .menu_side .playlist h4:hover span::before {
border: 2px solid #fff;

}
header .menu_side .playlist h4 .bi {
display: none;
}
header .menu_side .playlist .active {
color: #36e2ec;
}
header .menu_side .playlist .active span {
display: none;
}
header .menu_side .playlist .active .bi {
display: flex;
margin-right: 20px;
header .menu_side .menu_song {

width: 100%;
height: 420px;
margin-top: 40px;
overflow: auto;
}
header .menu_side .menu_song::-webkit-scrollbar {
display: none;
header .menu_side .menu_song li {

list-style-type: none;
position: relative;
padding: 5px 0px 5px 20px;
display: flex;
margin-bottom: 10px;
cursor: pointer;
}
header .menu_side .menu_song li:hover {
background: rgb(105, 105, 105, .1);
header .menu_side .menu_song li span {
font-size: 12px;
font-weight: 600;
color: #4c5262;
header .menu_side .menu_song li img {

width: 32px;
height: 32px;
margin-left: 25px;
}
header .menu_side .menu_song li h5 {
font-size: 11px;
margin-left: 15px;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
header .menu_side .menu_song li h5 .subtitle {
font-size: 9px;
color: #4c5262;
}
header .menu_side .menu_song li .bi {

position: absolute;
right: 15px;
display: flex;
padding: 0px 20px;
}
header .master_play .wave {

width: 30px;
height: 30px;
display: flex;
align-items: flex-end;
margin-right: 10px;
header .master_play .wave .wave1 {
width: 3px;
height: 10px;
background: #36e2ec;
margin-right: 3px;
border-radius: 10px 10px 0px 0px;
animation: unset;
{
header .master_play .wave .wave1:nth-child(2) {
height: 13px;
margin-right: 3.5px;
animation-delay: .4s;
height: 8px;
}
/* javascript classes */
header .master_play .active1 .wave1 {
animation: wave .5s linear infinite;
}
header .master_play .active1 .wave1:nth-child(2) {
}
}
@keyframes wave {
0% {
height: 10px;
}
50% {
height: 15px;
100% {
height: 10px;
header .master_play img {
width: 35px;
height: 35px;
}
header .master_play h5 {
width: 130px;
margin-left: 15px;
color: #fff;
line-height: 17px;
overflow: hidden;
font-size: 13px;
header .master_play h5 .subtitle {
font-size: 11px;
color: #4c5262;
width: 100%;
overflow: hidden;
}
header .master_play .icon {

font-size: 20px;
color: #fff;
outline: none;
display: flex;
}
header .master_play .icon .bi {
cursor: pointer;
outline: none;
header .master_play .icon .shuffle {
font-size: 17px;
margin-right: 10px;
width: 17.5px;
overflow: hidden;
display: flex;
}
header .master_play .icon #download_music {
text-decoration: none;
color: #fff;
font-size: 20px;
margin-left: 10px;
}
header .master_play .icon .bi:nth-child(3) {
border: 1px solid rgb(105, 105, 105, .1);
border-radius: 50%;
margin: 0px 5px;
header .master_play span {
color: #fff;
width: 32px;
font-size: 11px;
font-weight: 400;
}
header .master_play #currentStart {

}
header .master_play .bar {
position: relative;
width: 43%;
height: 2px;
background: rgb(105, 105, 170, .1);

}
header .master_play .bar .bar2 {

position: absolute;
width: 0%;
height: 100%;
top: 0;
transition: 1s linear;
header .master_play .bar .dot {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
left: 0%;
top: -1.5px;
}
header .master_play .bar .dot::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #36e2ec;
border-radius: 50%;
left: -7px;
top: -6.5px;
box-shadow: inset 0px 0px 3px #36e2ec;
header .master_play .bar input {

position: absolute;
width: 100%;
top: -7px;
left: 0;
cursor: pointer;
z-index: 99999999999999999999999999999999999999999;
/* transition: 3s linear; */
opacity: 0;
}
header .master_play .vol {
position: relative;
width: 100px;
height: 2px;
background: rgb(105, 105, 170, .1);
margin-left: 50px;
}
header .master_play .vol .bi {
position: absolute;
color: #fff;
font-size: 25px;
top: -17px;
left: -30px;
header .master_play .vol input {

position: absolute;
width: 100%;
top: -6px;
left: 0;
cursor: pointer;
z-index: 99999999999999999999999999;
opacity: 0;
header .master_play .vol .vol_bar {
position: absolute;
width: 100%;
height: 100%;
top: 0;
transition: 1s linear
}
header .master_play .vol .dot {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
left: 100%;
top: -1.5px;
}
header .master_play .vol .dot::before {

content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
left: -7px;
top: -6.5px;
}
Header .song_side {
z-index: 2;
}
header .song_side::before {
content: '';
position: absolute;
width: 100%;
height: 300px;
background: url('bg.png');
z-index: -1;
header .song_side nav {
width: 90%;
height: 10%;

margin: auto;
display: flex;
justify-content: space-between;
}
header .song_side nav ul {

display: flex;
header .song_side nav ul li {
list-style: none;
position: relative;
font-size: 13px;
color: #4c5262;
margin-right: 25px;
cursor: pointer;
header .song_side nav ul li:hover {
color: #fff;
}
header .song_side nav ul li:nth-child(1) {
color: #fff;
header .song_side nav ul li span {
position: absolute;
width: 100%;
height: 2.5px;
bottom: -5px;
left: 0;
border-radius: 20px;
}
header .song_side nav .search {
position: relative;
width: 40%;
padding: 1px 10px;
color: gray;
}
header .song_side nav .search::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(184, 184, 184, .1);

backdrop-filter: blur(5px);
z-index: -1;
}
header .song_side nav .search .search_results {
position: absolute;
width: 100%;
height: 200px;

margin-top: 10px;
overflow: auto;
}
header .song_side nav .search .search_results::-webkit-scrollbar {
display: none;
header .song_side nav .search .search_results .card {
width: 100%;
min-height: 45px;
display: flex;
background: rgb(184, 184, 184, .1);
margin-bottom: 5px;
display: none;
header .song_side nav .search .search_results .card img {

width: 35px;
height: 35px;
border-radius: 5px;
header .song_side nav .search .search_results .card .content {
width: 80%;
height: 100%;
padding: 0;
font-size: 13px;
font-weight: 600;
color: #fff;
}
header .song_side nav .search .search_results .card .content .subtitle {
font-size: 11px;
color: #a4a8b4;
font-weight: 500;
}
header .song_side nav .search .bi {
font-size: 13px;

header .song_side nav .search input {
background: none;
border: none;
outline: none;
padding: 0px 10px;
color: #fff;
font-size: 12px;
header .song_side nav .user {
position: relative;
width: 30px;
height: 30px;

border-radius: 50%;
header .song_side nav .user img {

width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 2px 2px 8px #121213;
header .song_side .content {
width: 90%;
height: 30%;

margin: auto;
padding-top: 20px;
header .song_side .content h1 {

font-size: 25px;
font-weight: 600;
}
header .song_side .content p {
font-size: 11px;
font-weight: 400;
color: #4c5262;
margin: 5px;
}
header .song_side .content .buttons {
margin-top: 15px;}
header .song_side .content .buttons button {
width: 130px;
height: 30px;

outline: none;
background: #5adae0;
color: #fff;
cursor: pointer;

}
header .song_side .content .buttons button:hover {
background: none;
color: #36e2ec;
header .song_side .content .buttons button:nth-child(2) {

background: none;
color: #36e2ec;
}
header .song_side .content .buttons button:nth-child(2):hover {
color: #fff;
header .song_side .popular_song {
width: 90%;
height: auto;
margin: auto;
margin-top: 15px;

}
header .song_side .popular_song .h4 {

display: flex;
}
header .song_side .popular_song .h4 .bi {
color: #a4a8b4;
cursor: pointer;
}
header .song_side .popular_song .h4 .bi:hover {
color: #fff;
}
header .song_side .popular_song .pop_song {
width: 100%;
height: 150px;
margin-top: 15px;
display: flex;

overflow: auto;
scroll-behavior: smooth;
}
header .song_side .popular_song .pop_song::-webkit-scrollbar {
display: none;
}
header .song_side .popular_song .pop_song li {
min-width: 100px;
height: 140px;
margin-right: 10px;
header .song_side .popular_song .pop_song li:hover {
background: rgb(105, 105, 170, .1);

}
header .song_side .popular_song .pop_song li .img_play {
position: relative;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
header .song_side .popular_song .pop_song li .img_play img {

width: 100%;
height: 100%;
}
header .song_side .popular_song .pop_song li .img_play .bi {
position: absolute;
font-size: 20px;
cursor: pointer;
opacity: 0;
}
header .song_side .popular_song .pop_song li:hover .img_play .bi {
opacity: 1;
header .song_side .popular_song .pop_song li h5 {

line-height: 15px;
font-size: 10px;
width: 100px;
overflow: hidden;
}
header .song_side .popular_song .pop_song li h5 .subtitle {
font-size: 9px;
overflow: hidden;
color: #4c5262;
header .song_side .popular_artists {

width: 90%;
height: auto;
margin: auto;
margin-top: 15px;
}
header .song_side .popular_artists .h4 {
display: flex;
}
header .song_side .popular_artists .h4 .bi {

color: #a4a8b4;
cursor: pointer;

}
header .song_side .popular_artists .h4 .bi:hover {
color: #fff;
}
header .song_side .popular_artists .item {
width: 100%;
height: auto;
margin-top: 15px;
display: flex;

overflow: auto;
}
header .song_side .popular_artists .item::-webkit-scrollbar {
display: none;
}
header .song_side .popular_artists .item li {
position: relative;
min-width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
cursor: pointer;
}
header .song_side .popular_artists .item li img {
width: 100%;
height: 100%;
border-radius: 50%;
}
/* login style */
header .left_bx1,
.right_bx1 {
position: relative;
width: 65%;
height: 100%;

display: flex;
header .left_bx1 {
width: 35%;
background: #fff;
header .left_bx1 .content {
width: 75%;
height: auto;
border: 1px solid #000;
padding: 25px 20px;
background: #fff;
}
header .left_bx1 .content .card{
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
margin-top: 20px;
header .left_bx1 .content .card label{
font-size: 14px;
}
header .left_bx1 .content .card input{
width: 100%;
padding: 6px 10px;
border: 1px solid rgb(154, 154, 154);

background: rgb(238, 238, 238);
margin-top: 5px;
}
@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,
400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
width: 100%;
height: 100vh;
display: grid;
place-items: center;
header {
position: relative;
width: 85%;
height: 95%;

display: flex;
flex-wrap: wrap;
overflow: hidden;
}
header .menu_side,
.song_side {
width: 25%;
height: 90%;
color: #fff;
}
header .song_side {
width: 75%;
}
width: 100%;
height: 10%;
}
font-size: 20px;

font-weight: 500;
header .menu_side .playlist {

}
header .menu_side .playlist h4 {
font-size: 14px;
font-weight: 400;
color: #4c5262;
cursor: pointer;
display: flex;
header .menu_side .playlist h4:hover {

color: #fff;
header .menu_side .playlist h4 span {

position: relative;
margin-right: 35px;
header .menu_side .playlist h4 span::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
border: 2px solid #4c5262;
border-radius: 50%;
top: -4px;

}
header .menu_side .playlist h4:hover span::before {
border: 2px solid #fff;
}
header .menu_side .playlist h4 .bi {
display: none;
}
header .menu_side .playlist .active {
color: #36e2ec;
}
header .menu_side .playlist .active span {
display: none;
}
header .menu_side .playlist .active .bi {
display: flex;
margin-right: 20px;
header .menu_side .menu_song {
width: 100%;
height: 420px;
margin-top: 40px;
overflow: auto;
header .menu_side .menu_song::-webkit-scrollbar {

display: none;
header .menu_side .menu_song li {

position: relative;
display: flex;
margin-bottom: 10px;
cursor: pointer;
header .menu_side .menu_song li:hover {

background: rgb(105, 105, 105, .1);
}
header .menu_side .menu_song li span {
font-size: 12px;
font-weight: 600;
color: #4c5262;
}
header .menu_side .menu_song li img {

width: 32px;
height: 32px;
margin-left: 25px;
}
header .menu_side .menu_song li h5 {
font-size: 11px;
margin-left: 15px;
width: 170px;
overflow: hidden;
}
header .menu_side .menu_song li h5 .subtitle {
font-size: 9px;
color: #4c5262;
}
header .menu_side .menu_song li .bi {
position: absolute;
right: 15px;
display: flex;
padding: 0px 20px;
width: 30px;
height: 30px;
display: flex;
align-items: flex-end;
margin-right: 10px;
}
width: 3px;
height: 10px;
margin-right: 3px;
animation: unset;
}
height: 13px;
margin-right: 3.5px;
}
height: 8px;
/* javascript classes */
header .master_play .active1 .wave1 {
animation: wave .5s linear infinite;
}
}
}
@keyframes wave {
0% {
height: 10px;
50% {
height: 15px;
}
100% {
height: 10px;
}
}
header .master_play img {

width: 35px;
height: 35px;
header .master_play h5 {
width: 130px;

margin-left: 15px;
color: #fff;
line-height: 17px;
overflow: hidden;
font-size: 13px;
}
header .master_play h5 .subtitle {
font-size: 11px;
color: #4c5262;
width: 100%;
overflow: hidden;
}
font-size: 20px;
color: #fff;
outline: none;
display: flex;
header .master_play .icon .bi {
cursor: pointer;
outline: none;
}
header .master_play .icon .shuffle {
font-size: 17px;
margin-right: 10px;
width: 17.5px;
overflow: hidden;
display: flex;
header .master_play .icon #download_music {
color: #fff;
font-size: 20px;
margin-left: 10px;
}
header .master_play .icon .bi:nth-child(3) {

border: 1px solid rgb(105, 105, 105, .1);
border-radius: 50%;
margin: 0px 5px;

}
header .master_play span {
color: #fff;
width: 32px;
font-size: 11px;
font-weight: 400;
header .master_play #currentStart {

header .master_play .bar {

position: relative;
width: 43%;
height: 2px;
background: rgb(105, 105, 170, .1);
header .master_play .bar .bar2 {
position: absolute;
width: 0%;
height: 100%;
top: 0;
}
header .master_play .bar .dot {

position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
left: 0%;
top: -1.5px;
}
header .master_play .bar .dot::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
left: -7px;
top: -6.5px;

}
header .master_play .bar input {
position: absolute;
width: 100%;
top: -7px;
left: 0;
cursor: pointer;
z-index: 99999999999999999999999999999999999999999;
/* transition: 3s linear; */
opacity: 0;
header .master_play .vol {
position: relative;
width: 100px;
height: 2px;
background: rgb(105, 105, 170, .1);
margin-left: 50px;
header .master_play .vol .bi {

position: absolute;
color: #fff;
font-size: 25px;
top: -17px;
left: -30px;
}
header .master_play .vol input {
position: absolute;
width: 100%;
top: -6px;
left: 0;
cursor: pointer;
z-index: 99999999999999999999999999;
opacity: 0;
}
header .master_play .vol .vol_bar {
position: absolute;
width: 100%;
height: 100%;
top: 0;
transition: 1s linear
header .master_play .vol .dot {

position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
left: 100%;
top: -1.5px;
header .master_play .vol .dot::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
left: -7px;
top: -6.5px;
header .song_side {
z-index: 2;
}
content: '';
position: absolute;
width: 100%;
height: 300px;
background: url('bg.png');
z-index: -1;
}
header .song_side nav {
width: 90%;
height: 10%;
margin: auto;
display: flex;
}
header .song_side nav ul {
display: flex;
}
list-style: none;
position: relative;
font-size: 13px;
color: #4c5262;
margin-right: 25px;
cursor: pointer;
}
header .song_side nav ul li:hover {
color: #fff;
header .song_side nav ul li:nth-child(1) {

color: #fff;
}
header .song_side nav ul li span {
position: absolute;
width: 100%;
height: 2.5px;
bottom: -5px;
left: 0;
}
position: relative;
width: 40%;
padding: 1px 10px;

color: gray;
header .song_side nav .search::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(184, 184, 184, .1);
backdrop-filter: blur(5px);
z-index: -1;
header .song_side nav .search .search_results {

position: absolute;
width: 100%;
height: 200px;
margin-top: 10px;
overflow: auto;
}
header .song_side nav .search .search_results::-webkit-scrollbar {
display: none;
}
header .song_side nav .search .search_results .card {

width: 100%;
min-height: 45px;
display: flex;
background: rgb(184, 184, 184, .1);

margin-bottom: 5px;
display: none;}
header .song_side nav .search .search_results .card img {
width: 35px;
height: 35px;
border-radius: 5px;
}
header .song_side nav .search .search_results .card .content {
width: 80%;
height: 100%;
padding: 0;
font-size: 13px;
font-weight: 600;
color: #fff;
}
header .song_side nav .search .search_results .card .content .subtitle {
font-size: 11px;
color: #a4a8b4;
font-weight: 500;
}
header .song_side nav .search .bi {
font-size: 13px;
header .song_side nav .search input {
background: none;
border: none;
outline: none;
padding: 0px 10px;
color: #fff;
font-size: 12px;
}
header .song_side nav .user {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
}
header .song_side nav .user img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 2px 2px 8px #121213;
}
width: 90%;
height: 30%;
margin: auto;
padding-top: 20px;
}
header .song_side .content h1 {
font-size: 25px;
font-weight: 600;}
header .song_side .content p {
font-size: 11px;
font-weight: 400;
color: #4c5262;
margin: 5px;
}
header .song_side .content .buttons {
margin-top: 15px;
header .song_side .content .buttons button {
width: 130px;
height: 30px;
outline: none;
color: #fff;
cursor: pointer;
header .song_side .content .buttons button:hover {

background: none;
color: #36e2ec;
}
header .song_side .content .buttons button:nth-child(2) {
background: none;
color: #36e2ec;
header .song_side .content .buttons button:nth-child(2):hover {
color: #fff;
width: 90%;
height: auto;
margin: auto;
margin-top: 15px;
}
header .song_side .popular_song .h4 {
display: flex;
header .song_side .popular_song .h4 .bi {

color: #a4a8b4;
cursor: pointer;
header .song_side .popular_song .h4 .bi:hover {
color: #fff;
}
header .song_side .popular_song .pop_song {
width: 100%;
height: 150px;
margin-top: 15px;
display: flex;
overflow: auto;
}
header .song_side .popular_song .pop_song::-webkit-scrollbar {
display: none;
}
header .song_side .popular_song .pop_song li {
min-width: 100px;
height: 140px;
margin-right: 10px;

}
header .song_side .popular_song .pop_song li:hover {
background: rgb(105, 105, 170, .1);
header .song_side .popular_song .pop_song li .img_play {
position: relative;
width: 100px;
height: 100px;
display: flex;
}
header .song_side .popular_song .pop_song li .img_play img {
width: 100%;
height: 100%;
}
header .song_side .popular_song .pop_song li .img_play .bi {
position: absolute;
font-size: 20px;
cursor: pointer;

opacity: 0;
}
header .song_side .popular_song .pop_song li:hover .img_play .bi {
opacity: 1;
}
header .song_side .popular_song .pop_song li h5 {

line-height: 15px;
font-size: 10px;
width: 100px;
overflow: hidden;
}
header .song_side .popular_song .pop_song li h5 .subtitle {

font-size: 9px;
overflow: hidden;
color: #4c5262;
header .song_side .popular_artists {
width: 90%;
height: auto;

margin: auto;
margin-top: 15px;
}
header .song_side .popular_artists .h4 {
display: flex;
header .song_side .popular_artists .h4 .bi {

color: #a4a8b4;
cursor: pointer;
header .song_side .popular_artists .h4 .bi:hover {
color: #fff;
}
header .song_side .popular_artists .item {
width: 100%;
height: auto;
margin-top: 15px;
display: flex;
overflow: auto;
}
header .song_side .popular_artists .item::-webkit-scrollbar {
display: none;
}
header .song_side .popular_artists .item li {
position: relative;
min-width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
cursor: pointer;
header .song_side .popular_artists .item li img {
width: 100%;
height: 100%;
border-radius: 50%;
/* login style */
header .left_bx1,
.right_bx1 {
position: relative;
width: 65%;
height: 100%;

display: flex;
header .left_bx1 {
width: 35%;
background: #fff;
/* box-shadow: 5px 0px 2px #090f1f; */
}
header .left_bx1 .content {
width: 75%;
height: auto;
border: none;
padding: 25px 20px;
background: #fff;
}
header .left_bx1 .content .card{

width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
margin-top: 20px;
}
header .left_bx1 .content .card label{
font-size: 14px;
header .left_bx1 .content .card input{
width: 100%;
padding: 6px 10px;

border: 1px solid rgb(154, 154, 154);
background: rgb(238, 238, 238);
margin-top: 5px;
}
header .left_bx1 .content .submit{
margin-top: 30px;
padding: 8px 20px;
color: #fff;
width: 100%;
cursor: pointer;
header .left_bx1 .content .check{
display: flex;
margin-top: 10px;
}
header .left_bx1 .content .check span{
margin-left: 5px;
font-size: 13px;
}
header .left_bx1 .content p{
margin-top: 90px;
text-align: center;
font-size: 13px;
}
header .left_bx1 .content p a{

color: #5adae0;
font-weight: bold;
}
header .right_bx1 h3{
position: absolute;
color: #000;
right: 0;
bottom: 20px;
padding: 3px 10px;
font-size: 13px;
}
APP.JS
const music = new Audio('audio/1.mp3');
// music.play();
const songs = [{
id: '1',
songName: ` On My Way <br>
<div class="subtitle">Alan Walker</div>`,
poster: "img/1.jpg"
},
{
id: '2',
songName: ` Alan Walker-Fade <br>

poster: "img/2.jpg"
},
id: "3",
songName: `Cartoon - On & On <br><div class="subtitle"> Daniel Levi</div>`,
poster: "img/3.jpg",
},
id: "4",
songName: `Warriyo - Mortals <br><div class="subtitle">Mortals</div>`,
},
{
id: "5",
songName: Èrtugrul Gazi <br><div class="subtitle">Ertugrul</div>`,
},
{
id: "6",
songName: Èlectronic Music <br><div class="subtitle">Electro</div>`,
},
id: "7",
songName: Àgar Tum Sath Ho <br><div class="subtitle">Tamashaa</div>`,
},
{
id: "8",
songName: `Suna Hai <br><div class="subtitle">Neha Kakker</div>`,

},
{
id: "9",
songName: `Dilber <br><div class="subtitle">Satyameva Jayate</div>`,
},
id: "10",
songName: `Duniya <br><div class="subtitle">Luka Chuppi</div>`,
},
{
id: "11",
songName: `Lagdi Lahore Di <br><div class="subtitle">Street Dancer 3D</div>`,

},
id: "12",
songName: `Putt Jatt Da <br><div class="subtitle">Putt Jatt Da</div>`,
},
{
id: "13",
songName: `Baarishein <br><div class="subtitle">Atif Aslam</div>`,
},
{
id: "14",
songName: `Vaaste <br><div class="subtitle">Dhvani Bhanushali</div>`,
},
id: "15",
songName: `Lut Gaye <br><div class="subtitle">Jubin Nautiyal</div>`,
},
{
id: "16",
songName: `Tu Meri Jindgi Hai Tu <br><div class="subtitle">Jubin Nautiyal</div>`,

},
{
id: "17",
songName: ` Batao Yaad Hai Tumko Wo Jab Dil Ko Churaya Tha <br><div class="subtitle"> Rahat Fateh Ali Khan</div>`,
},
id: "18",
songName: `Mere Dhol Judaiyan<br><div class="subtitle">Ali Sethi Seha Gill</div>`,
},
{
id: "19",
songName: Èh Munde Pagal Ne Saare <br><div class="subtitle">Ap Dhillon, Gurinder Gill, Shinda Kahlon</div>`,
},
id: "20",
songName: `Dunny 82K <br><div class="subtitle">Ap Dhillon, Gurinder Gill, Shinda Kahlon</div>`,
}
]
Array.from(document.getElementsByClassName('songItem')).forEach((e, i) => {
e.getElementsByTagName('img')[0].src = songs[i].poster;
e.getElementsByTagName('h5')[0].innerHTML = songs[i].songName;
});
// search data start
let search_results = document.getElementsByClassName('search_results')[0];
songs.forEach(element => {
const {id, songName, poster} = element;
// console.log(poster);
let card = document.createElement('a');
card.classList.add('card');
card.href = "#" + id;

card.innerHTML = `
<img src="${poster}" alt="">
${songName}
</div> `;
search_results.appendChild(card);
});
let input = document.getElementsByTagName('input')[0];
input.addEventListener('keyup', ()=>{
let input_value = input.value.toUpperCase();
let items = search_results.getElementsByTagName('a');
for (let index = 0; index < items.length; index++) {

let as = items[index].getElementsByClassName('content')[0];
let text_value = as.textContent || as.innerHTML;
if (text_value.toUpperCase().indexOf(input_value) > -1) {
items[index].style.display = "flex";
} else {
items[index].style.display = "none";
}
if (input.value == 0) {
search_results.style.display = "none";
} else {
search_results.style.display =
}
})
// search data end
let masterPlay = document.getElementById('masterPlay');

let wave = document.getElementById('wave');
masterPlay.addEventListener('click', () => {
if (music.paused || music.currentTime <= 0) {
music.play();
wave.classList.add('active1');
masterPlay.classList.remove('bi-play-fill');
masterPlay.classList.add('bi-pause-fill');
} else {
music.pause();
wave.classList.remove('active1');
masterPlay.classList.add('bi-play-fill');
masterPlay.classList.remove('bi-pause-fill');
}
});
const makeAllplays = () => {
Array.from(document.getElementsByClassName('playListPlay')).forEach((el) => {
el.classList.add('bi-play-circle-fill');
el.classList.remove('bi-pause-circle-fill');
})
}
const makeAllBackground = () => {
Array.from(document.getElementsByClassName('songItem')).forEach((el) => {
el.style.background = 'rgb(105, 105, 105, .0)';
})
}
let index = 0;
let poster_master_play = document.getElementById('poster_master_play');
let download_music = document.getElementById('download_music');
let title = document.getElementById('title');

Array.from(document.getElementsByClassName('playListPlay')).forEach((e) => {
e.addEventListener('click', (el) => {

index = el.target.id;
// console.log(index);
music.src = àudio/${index}.mp3`;
poster_master_play.src = ìmg/${index}.jpg`;
music.play();
download_music.href = àudio/${index}.mp3`;
let songTitles = songs.filter((els) => {

return els.id == index;
});
songTitles.forEach(elss => {
let { songName } = elss;

title.innerHTML = songName;
download_music.setAttribute('download', songName);
});
makeAllBackground();
Array.from(document.getElementsByClassName('songItem'))[index - 1].style.background = "rgb(105, 105, 105, .1)";
makeAllplays();
el.target.classList.remove('bi-play-circle-fill');
el.target.classList.add('bi-pause-circle-fill');
});
})
let currentStart = document.getElementById('currentStart');

let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');

let dot = document.getElementsByClassName('dot')[0];
music.addEventListener('timeupdate', () => {
let music_curr = music.currentTime;
let music_dur = music.duration;
let min1 = Math.floor(music_dur / 60);
let sec1 = Math.floor(music_dur % 60);

// console.log(min1);
if (sec1 < 10) {
sec1 = `0${sec1}`;
}
currentEnd.innerText = `${min1}:${sec1}`;
let min2 = Math.floor(music_curr / 60);

let sec2 = Math.floor(music_curr % 60);
if (sec2 < 10) {
sec2 = `0${sec2}`;
}
currentStart.innerText = `${min2}:${sec2}`;
let progressBar = parseInt((music_curr / music_dur) * 100);

seek.value = progressBar;
// console.log(seek.value);
let seekbar = seek.value;

bar2.style.width = `${seekbar}%`;
dot.style.left = `${seekbar}%`;
});
seek.addEventListener('change', () => {
music.currentTime = seek.value * music.duration / 100;
});
let vol_icon = document.getElementById('vol_icon');
let vol = document.getElementById('vol');
let vol_bar = document.getElementsByClassName('vol_bar')[0];
let vol_dot = document.getElementById('vol_dot');

vol.addEventListener('change', () => {
if (vol.value == 0) {
vol_icon.classList.remove('bi-volume-up-fill');
vol_icon.classList.remove('bi-volume-down-fill');
vol_icon.classList.add('bi-volume-off-fill');
}
if (vol.value > 0) {
vol_icon.classList.add('bi-volume-down-fill');
vol_icon.classList.remove('bi-volume-off-fill');
vol_icon.classList.add('bi-volume-up-fill');
}
let vol_a = vol.value;
vol_bar.style.width = `${vol_a}%`;
vol_dot.style.left = `${vol_a}%`;
music.volume = vol_a / 100;
});
let back = document.getElementById('back');
let next = document.getElementById('next');
back.addEventListener('click', () => {
index -= 1;
if (index < 1) {
index = Array.from(document.getElementsByClassName('songItem')).length;
}
music.play();

});
});
makeAllplays();
})
next.addEventListener('click', () => {
index++;
if (index > Array.from(document.getElementsByClassName('songItem')).length) {
index = 1;
music.play();

});
});
makeAllplays();
});
let pop_song_left = document.getElementById('pop_song_left');
let pop_song_right = document.getElementById('pop_song_right');
let pop_song = document.getElementsByClassName('pop_song')[0];

pop_song_right.addEventListener('click', () => {
pop_song.scrollLeft += 330;
});
pop_song_left.addEventListener('click', () => {
pop_song.scrollLeft -= 330;
});
let pop_art_left = document.getElementById('pop_art_left');
let pop_art_right = document.getElementById('pop_art_right');
let Artists_bx = document.getElementsByClassName('Artists_bx')[0];

pop_art_right.addEventListener('click', () => {
Artists_bx.scrollLeft += 330;
});
pop_art_left.addEventListener('click', () => {
Artists_bx.scrollLeft -= 330;
});
let shuffle = document.getElementsByClassName('shuffle')[0];
shuffle.addEventListener('click', ()=>{
let a = shuffle.innerHTML;
switch (a) {
case "next":
shuffle.classList.add('bi-arrow-repeat');
shuffle.classList.remove('bi-music-note-beamed');
shuffle.classList.remove('bi-shuffle');
shuffle.innerHTML = 'repeat';
break
case "repeat":
shuffle.classList.remove('bi-arrow-repeat');
shuffle.classList.add('bi-shuffle');
shuffle.innerHTML = 'random';
break;
case "random":
shuffle.classList.add('bi-music-note-beamed');
shuffle.innerHTML = 'next';
break;
});
const next_music = () => {
if (index == songs.length) {
index = 1
} else {
index++;
}
music.play();
});
});
makeAllplays();
}
const repeat_music = () => {
index;
music.play();

});

});
makeAllplays();
}
const random_music = () => {
index = 1
} else {
index = Math.floor((Math.random() * songs.length) + 1);

}
music.play();
});

});
makeAllplays();
}
music.addEventListener('ended', ()=>{
let b = shuffle.innerHTML;
switch (b) {
case 'repeat':
repeat_music();
break;
case 'next':
next_music();
break;
case 'random':
random_music();
break;
})
Signup.php
<?php
session_start();
include('db_connect.php');
$msg = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$user_name = $_POST['user_name'];
$user_email = $_POST['user_email'];
$user_password = $_POST['user_password'];
$user_re_password = $_POST['user_re_password'];
if (!empty($user_name) && !empty($user_email) && !empty($user_password) && !is_numeric($user_name)) {
if ($user_password === $user_re_password) {
$query = "insert into user (user, email, password) VALUES ('$user_name', '$user_email', '$user_password')";
mysqli_query($con, $query);
header("Location: index.php");
} else {
$msg = "Password Not Match";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>

<title>Music Website Sign Up </title>
</head>
<body>
<header>
<div class="left_bx1">
<form method="post">
<h3>Sign Up</h3>
<div class="card">
<label for="name">Name</label>
<input type="text" name="user_name" placeholder="Enter Your Username..." required>
</div>
<div class="card">
<label for="email">Email</label>
<input type="email" name="user_email" placeholder="Enter Your Email..." required>
</div>
<div class="card">
<label for="password">Password</label>
<input type="password" name="user_password" placeholder="Enter Your Password..." required>

</div>
<div class="card">
<label for="re-password">Re-Password</label>
<input type="password" name="user_re_password" placeholder="Enter Your Re-Password..." required>

</div>
<input type="submit" value="Sign Up" class="submit">

<div class="check">
<input type="checkbox" name="" id=""><span>Remeber Me.</span>
</div>
<p>You have a account? <a href="index.php">Login</a></p>

</form>
</div>
</div>
<div class="right_bx1">
<img src="login_png.jpg" alt="">


<?php
echo ('<h3>'.$msg.'</h3>');
?>
</div>
</header>
</body>
</html>
MEDIA.CSS
@media screen and (max-width: 1200px) {
header {
width: 95%;
header .menu_side,
.song_side {
width: 30%;
}
header .song_side {
width: 70%;
}
height: 18%;
}
display: none;
header .menu_side {
z-index: 999;
width: 40%;
position: absolute;
transform: translateX(-100%);
}
header .song_side {
width: 100%;
}
position: absolute;
bottom: 0;
}
position: absolute;
right: -40px;
bottom: 10px;
width: 40px;
height: 40px;

display: flex;
font-size: 18px;
cursor: pointer;
z-index: 999999999999;
color: #fff;
header {
width: 100%;
height: 100vh;

font-size: 11px;
margin-right: 10px;
}
width: auto;
}
header .menu_side {
width: 60%;
}
z-index: 999999999999999999999999999;
}
position: absolute;
top: -46px;
right: 30%;
header .master_play .icon::before {
content: '';
position: absolute;
width: 200px;
height: 180px;
z-index: -1;
border-radius: 50% 50% 0% 0%;
left: -20%;
box-shadow: 0px -11px 20px -17px #000;

}
position: absolute;
top: -90px;
width: 40px;
height: 40px;
right: 40%;

width: 8px;
}

display: flex;
width: 150px;
margin-right: 5px;

right: 44%;
}
header .menu_side {
width: 70%;
}
margin-top: 40px;
}
font-size: 10px;
margin-right: 7px;

width: 140px;

margin-top: 60px;

right: 45%;
header .menu_side {
width: 80%;
INDEX.PHP
<?php
session_start();
include('db_connect.php');
$msg = false;
if (isset($_POST['user_name'])) {
$user_name = $_POST['user_name'];
$user_password = $_POST['user_password'];
$query = "select * from user where user = '".$user_name."' AND password = '".$user_password."' limit 1";
$result = mysqli_query($con, $query);

if (mysqli_num_rows($result)==1) {
header('Location: welcome.php');
} else {
$msg = "Inccorect Password";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>

<title>Music Website Login </title>
</head>
<body>
<header>
<div class="left_bx1">
<form method="post">
<h3>Login</h3>
<div class="card">
<label for="name">Name</label>
<input type="text" name="user_name" placeholder="Enter Your Username..." required>
</div>
<div class="card">
<label for="password">Password</label>
<input type="password" name="user_password" placeholder="Enter Your Username..." required>

</div>
<input type="submit" value="Login" class="submit">
<div class="check">
<input type="checkbox" name="" id=""><span>Remeber Me.</span>

</div>
<p>Dont't have a account yet? <a href="signup.php">Sing Up</a></p>

</form>
</div>
</div>
<div class="right_bx1">
<img src="login_png.jpg" alt="">


<?php
echo ('<h3>'.$msg.'</h3>');
?>
</div>
</header>
</body>
</html>
DB COONECT PHP
<?php
$server_name = "localhost";
$user_name = 'root';
$user_pass = '';
$database_name = "music_user";
$con = mysqli_connect($server_name, $user_name, $user_pass, $database_name);
if (!$con) {
die ('Connection Failed' . mysql_error());
// else {
// echo ('Database Succesfully Connected');
// }
?>
Arjit.php
<!DOCTYPE html>
<html lang="en">
<head>

<title>Music Website</title>
<style>
background: url('arjit_bg.png');
</style>
</head>
<body>
<header>
<div class="menu_side">
<h1>Playlist</h1>
<div class="playlist">
<h4 class="active"><span></span><i class="bi bi-music-note-beamed"></i> Playlist</h4>
<h4><span></span><i class="bi bi-music-note-beamed"></i> Last Listening</h4>
<h4><span></span><i class="bi bi-music-note-beamed"></i> Recommended</h4>
</div>
<div class="menu_song">
<span>01</span>

<h5>On My Way <br>
</h5>
</li>
<span>02</span>
<h5>On My Way <br>
</h5>

</li>
<span>03</span>

<h5>On My Way <br>

</h5>
</li>
<span>04</span>

<h5>On My Way <br>
</h5>
</li>
<span>05</span>
<h5>On My Way <br>
</h5>
</li>
<span>06</span>

<h5>On My Way <br>
</h5>
</li>
<span>07</span>
<h5>On My Way <br>
</h5>

</li>
<span>08</span>

<h5>On My Way <br>

</h5>
</li>
</div>
</div>
<div class="song_side">
<nav>
<ul>
<li>Discover <span></span></li>
<li>MY LIBRARY</li>
<li>RADIO</li>
</ul>
<div class="search">
<i class="bi bi-search"></i>
<input type="text" placeholder="Search Music...">
</div>
<div class="user">
<img src="img/KDS CODER.png" alt="">
</div>
</nav>
<h1>Arjit Singh</h1>
<p>You were the shadow to my light did you feel us Another start you fade <br> Away afraid our aim is out of sight Wanna see us
Alive</p>
<div class="buttons">
<button>PLAY</button>
<button>FOLLOW</button>
</div>
</div>
<div class="popular_song">
<div class="h4">
<h4>Popular Song</h4>
<div class="btn_s">
<i class="bi bi-arrow-left-short" id="pop_song_left"></i>

<i class="bi bi-arrow-right-short" id="pop_song_right"></i>
</div>
</div>
<div class="pop_song">
</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>

</h5>
</li>

</div>
<h5>On My Way<br>

</h5>
</li>

</div>
<h5>On My Way<br>
</h5>
</li>
</div>
<h5>On My Way<br>

</h5>
</li>

</div>
<h5>On My Way<br>

</h5>
</li>
</div>
<h5>On My Way<br>
</h5>
</li>
</div>
</div>
<div class="popular_artists">
<div class="h4">
<h4>Popular Artists</h4>
<div class="btn_s">
<i class="bi bi-arrow-left-short" id="pop_art_left"></i>
<i class="bi bi-arrow-right-short" id="pop_art_right"></i>

</div>
</div>
<div class="item Artists_bx">
<li>
<img src="img/arjit.jpg" alt="">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</div>
</div>
</div>
<div class="master_play">
<div class="wave" id="wave">
</div>
<img src="img/20.jpg" alt="" id="poster_master_play">

<h5 id="title">
Vande mataram
<div class="subtitle">Bankim Chandra</div>

</h5>
<div class="icon">
<i class="bi shuffle bi-music-note-beamed">next</i>
<i class="bi bi-skip-start-fill" id="back"></i>

<i class="bi bi-play-fill" id="masterPlay"></i>
<i class="bi bi-skip-end-fill" id="next"></i>
<a href="" download id="download_music"><i class="bi bi-cloud-arrow-down-fill" ></i></a>
</div>
<span id="currentStart">0:00</span>
<div class="bar">
<input type="range" id="seek" min="0" max="100">
<div class="bar2" id="bar2"></div>
<div class="dot"></div>
</div>
<span id="currentEnd">0:30</span>
<div class="vol">
<i class="bi bi-volume-up-fill" id="vol_icon"></i>
<input type="range" min="0" max="100" id="vol">
<div class="vol_bar"></div>
<div class="dot" id="vol_dot"></div>
</div>
</div>
</header>
<script src="arjit.js"></script>
</body>
</html>
arjit.js
const music = new Audio('audio/1.mp3');
// music.play();
const songs = [{
id: '1',
songName: ` Arjit 123 <br>

poster: "img/arjit/1.jpg"
},
{
id: '2',
songName: ` Alan Walker-Fade <br>

poster: "img/arjit/2.jpg"
},
id: "3",
songName: `Cartoon - On & On <br><div class="subtitle"> Daniel Levi</div>`,
poster: "img/arjit/3.jpg",
},
id: "4",
songName: `Warriyo - Mortals <br><div class="subtitle">Mortals</div>`,

},
{
id: "5",
songName: Èrtugrul Gazi <br><div class="subtitle">Ertugrul</div>`,
},
id: "6",
songName: Èlectronic Music <br><div class="subtitle">Electro</div>`,
},
id: "7",
songName: Àgar Tum Sath Ho <br><div class="subtitle">Tamashaa</div>`,

},
id: "8",
songName: `Suna Hai <br><div class="subtitle">Neha Kakker</div>`,
},
id: "9",
songName: `Dilber <br><div class="subtitle">Satyameva Jayate</div>`,

},
{
id: "10",
songName: `Duniya <br><div class="subtitle">Luka Chuppi</div>`,

},
id: "11",
songName: `Lagdi Lahore Di <br><div class="subtitle">Street Dancer 3D</div>`,
},
id: "12",
songName: `Putt Jatt Da <br><div class="subtitle">Putt Jatt Da</div>`,

},
{
id: "13",
songName: `Baarishein <br><div class="subtitle">Atif Aslam</div>`,
},
id: "14",
songName: `Vaaste <br><div class="subtitle">Dhvani Bhanushali</div>`,
},
id: "15",
songName: `Lut Gaye <br><div class="subtitle">Jubin Nautiyal</div>`,

}
Array.from(document.getElementsByClassName('songItem')).forEach((e, i) => {
e.getElementsByTagName('img')[0].src = songs[i].poster;
e.getElementsByTagName('h5')[0].innerHTML = songs[i].songName;
});
let masterPlay = document.getElementById('masterPlay');
let wave = document.getElementById('wave');
masterPlay.addEventListener('click', () => {
if (music.paused || music.currentTime <= 0) {
music.play();
} else {
music.pause();
wave.classList.remove('active1');
masterPlay.classList.add('bi-play-fill');
masterPlay.classList.remove('bi-pause-fill');
});
const makeAllplays = () => {
Array.from(document.getElementsByClassName('playListPlay')).forEach((el) => {
el.classList.add('bi-play-circle-fill');
el.classList.remove('bi-pause-circle-fill');
})
}
const makeAllBackground = () => {
Array.from(document.getElementsByClassName('songItem')).forEach((el) => {
el.style.background = 'rgb(105, 105, 105, .0)';

})
let index = 0;
let poster_master_play = document.getElementById('poster_master_play');
let download_music = document.getElementById('download_music');
let title = document.getElementById('title');
Array.from(document.getElementsByClassName('playListPlay')).forEach((e) => {
e.addEventListener('click', (el) => {
index = el.target.id;
// console.log(index);
poster_master_play.src = ìmg/arjit/${index}.jpg`;
music.play();
download_music.href = àudio/arjit/${index}.mp3`;
});

});
makeAllplays();
});
})
let currentStart = document.getElementById('currentStart');

let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');

let dot = document.getElementsByClassName('dot')[0];
music.addEventListener('timeupdate', () => {
let music_curr = music.currentTime;

let music_dur = music.duration;
let min1 = Math.floor(music_dur / 60);
let sec1 = Math.floor(music_dur % 60);

// console.log(min1);
if (sec1 < 10) {
sec1 = `0${sec1}`;
currentEnd.innerText = `${min1}:${sec1}`;
let min2 = Math.floor(music_curr / 60);

let sec2 = Math.floor(music_curr % 60);
if (sec2 < 10) {
sec2 = `0${sec2}`;
}
currentStart.innerText = `${min2}:${sec2}`;
let progressBar = parseInt((music_curr / music_dur) * 100);
seek.value = progressBar;
// console.log(seek.value);
let seekbar = seek.value;

bar2.style.width = `${seekbar}%`;
dot.style.left = `${seekbar}%`;
});
seek.addEventListener('change', () => {
music.currentTime = seek.value * music.duration / 100;

});
let vol_icon = document.getElementById('vol_icon');
let vol = document.getElementById('vol');
let vol_bar = document.getElementsByClassName('vol_bar')[0];

let vol_dot = document.getElementById('vol_dot');
vol.addEventListener('change', () => {
if (vol.value == 0) {
vol_icon.classList.add('bi-volume-off-fill');
}
vol_icon.classList.add('bi-volume-down-fill');
}
vol_icon.classList.add('bi-volume-up-fill');
let vol_a = vol.value;
vol_bar.style.width = `${vol_a}%`;
vol_dot.style.left = `${vol_a}%`;
music.volume = vol_a / 100;

});
let back = document.getElementById('back');
let next = document.getElementById('next');
back.addEventListener('click', () => {
index -= 1;
if (index < 1) {
index = Array.from(document.getElementsByClassName('songItem')).length;
music.src = àudio/arjit/${index}.mp3`;
music.play();

});

});
makeAllplays();
})
next.addEventListener('click', () => {
index++;
if (index > Array.from(document.getElementsByClassName('songItem')).length) {

index = 1;
music.src = àudio/arjit/${index}.mp3`;
music.play();

});

});
makeAllplays();
}
let pop_song_left = document.getElementById('pop_song_left');
let pop_song_right = document.getElementById('pop_song_right');

let pop_song = document.getElementsByClassName('pop_song')[0];
pop_song_right.addEventListener('click', () => {
pop_song.scrollLeft += 330;
});
pop_song_left.addEventListener('click', () => {
pop_song.scrollLeft -= 330;
});
let pop_art_left = document.getElementById('pop_art_left');
let pop_art_right = document.getElementById('pop_art_right');
let Artists_bx = document.getElementsByClassName('Artists_bx')[0];

pop_art_right.addEventListener('click', () => {
Artists_bx.scrollLeft += 330;
});
pop_art_left.addEventListener('click', () => {
Artists_bx.scrollLeft -= 330;
});
let shuffle = document.getElementsByClassName('shuffle')[0];
shuffle.addEventListener('click', ()=>{
let a = shuffle.innerHTML;
switch (a) {
case "next":
shuffle.classList.add('bi-arrow-repeat');
shuffle.innerHTML = 'repeat';
break
case "repeat":
shuffle.classList.add('bi-shuffle');
shuffle.innerHTML = 'random';
break;
case "random":
shuffle.classList.add('bi-music-note-beamed');
shuffle.innerHTML = 'next';
break;
}
});
const next_music = () => {
index = 1
} else {
index++;
music.play();
});
});
makeAllplays();
const repeat_music = () => {

index;
music.play();

});
});
makeAllplays();
}
const random_music = () => {
index = 1
} else {
index = Math.floor((Math.random() * songs.length) + 1);

}
music.play();

});
});
makeAllplays();
}
music.addEventListener('ended', ()=>{
let b = shuffle.innerHTML;
switch (b) {
case 'repeat':
repeat_music();
break;
case 'next':
next_music();
break;
case 'random':
random_music();
break;
})
XAMPP CONTROL PANNEL
◼ Start Apache & MySql

◼ After that go to browser and search local host /dashboard
◼ Go to phpMyAdmin create database.

◼ After creating database if anyone login and signup the user get the details of login or sign up
details like that.
OUTPUT/RESULT
LIMITATIONS OF THE SYSTEMS-:
◼ Internet Reliance – The one flaw with the internet is it is not everywhere yet, especially in many
developing countries. If your internet goes down or you happen to be in an area that has not
been connected yet you will not be able to access your web app.
◼ Security – There is no denying that your data is less secure when it is in cloud, especially when
the users from all over the world are accesing the same server hosted by a third party. Although
there are ways to reduce your risk, email encryption and SSL Enforecement for secure HTTPS
access are just two examples.
◼ Reduced speed- A web app will probably be slower than an application hosted on your
company server. You need to decide if a slight reduction in speed is worth the worldwide
access.
◼ Browser Support- Unfortunately, we do not all use one version of a browser because we are
given a choice. This means you will have to make sure your web app is supported across
various bowsers and for various screen sizes.\
Future Scope of the project
The future scope of this project is very broad Few of them are:
◼ This can be implemented in application also.
◼ In future artist can created/add their songs by themselves.
◼ The user can make their own group.
◼ User can listen to other playlists
◼ Users can share their playlist with different users on the web.
◼ We can create podcasts and publish it.
◼ Two-step Verification
◼ Email Verification Security.
REFERENCE
1. https://www.w3schools.com/html/html_intro.asp
2. https://www.hindawi.com/journals/cin/2020/3062706/
3. https://en.wikipedia.org/wiki/HTML
4. https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS
5. https://en.wikipedia.org/wiki/CSS
6. www.google.com
7. www.youtube.com
8. www.php
9. Various other sites.

Minor Project Report

Uploaded by

Copyright:

Available Formats

You might also like

Minor Project Report

Uploaded by

Document Information

Original Description:

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

Minor Project Report

Uploaded by

Copyright:

Available Formats

MINOR PROJECT REPORT

BHAGWAN MAHAVEER COLLEGE OF ENGINEERING AND MANAGEMENT

Submitted to the Viva voce Examination held on _____________________

INTERNAL EXAMINER EXTERNAL EXAMINER

We SIDHARTH KUMAR (03355202719), KUMAR ASHUTOSH MANGLAM (02055202719), DEEPAK

SIDHARTH KUMAR (03355202719)

Chapter 2: System Analysis

Chapter 3: System Design

Chapter 4: Implementing and Testing

Chapter 6: Conclusion and Future Work

1.4 Organization of Report

Chapter 4 provides us with the test cases and their results.

Chaptet 5 includes the images of the website

2.1 Existing System

Some of the negative expects of the existing system are as follows:

2.2 Proposed System

2.4 Software and Hardware Requirements

2.6 Justification of selection of technology

In backend we use PHP. PHP is an open-source, interpreted, and object-oriented scripting

o PHP stands for Hypertext Preprocessor.

CHAPTER 3 SYSTEM DESIGN

3.1 Basic Modules

3.2.1 Schema Design

After minimising the screen

4.1 Implementation Approaches

4.3.2 Integrated Testing

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="media.css">

<h6 id="menu_list_active_button" ><i class="bi bi-music-note-list"></i></h6>

<h4><span></span><i class="bi bi-music-note-beamed"></i> Last Listening</h4>

<h4><span></span><i class="bi bi-music-note-beamed"></i> Recommended</h4>

<img src="img/1.jpg" alt="">

<div class="subtitle">Alan Walker</div>

<i class="bi playListPlay bi-play-circle-fill" id="1"></i>

<h5>On My Way <br>

<div class="subtitle">Alan Walker</div>

<img src="img/2.jpg" alt="">

<h5>On My Way <br>

<i class="bi playListPlay bi-play-circle-fill" id="3"></i>

<h5>On My Way <br>

<div class="subtitle">Alan Walker</div>

<i class="bi playListPlay bi-play-circle-fill" id="4"></i>

<img src="img/2.jpg" alt="">

<i class="bi playListPlay bi-play-circle-fill" id="5"></i>

<img src="img/2.jpg" alt="">

<h5>On My Way <br>

<div class="subtitle">Alan Walker</div>

<i class="bi playListPlay bi-play-circle-fill" id="6"></i>

<h5>On My Way <br>

<div class="subtitle">Alan Walker</div>

<i class="bi bi-search"></i>

<input type="text" placeholder="Search Music...">

<!-- <a href="" class="card">

<img src="img/1.jpg" alt="">

<div class="subtitle">Alan Walker</div>

<img src="img/KDS CODER.png" alt="">