PROJECT – 1

( PROJ – CSE - 322G )

ON
Online Music Website

Submitted in partial fulfillment of the requirement for the awards of degree of

Bachelor of Technology
In
Computer Science & Engineering
(Batch: 2019-23)

Under the Supervision of: Submitted by:

Dr. Atul Kumar Name of the Student: Mohit
Mr. Sharvan Kumar Registration No.: 191270017
Associate Professor

------------------------------------------------------------------------------------------------
KIIT College of Engineering, Gurugram
(Affiliated to MDU, Rohtak, Approved by AICTE, New Delhi)
KIIT Campus, Gurugram- Sohna Road,Gurugram-122102 (Haryana)
June, 2022
 STUDENT’s DECLARATION

I,Mohit student of B. Tech (CSE)-VI Semester, Batch 2019-23 hereby declare that
this project report on, “Online Music Website”, which is being submitted in partial
fulfillment for the program in B. Tech (CSE), is the record of authentic work carried
out by me during the period from 20 May 2022 to 20 June 2022 under the guidance
of Mr. Sharvan Kumar and Dr. Atul Kumar.

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.

Signature of the Student

Name of Student : Mohit
Registration No. : 191270017

Date :
 CERTIFICATE FROM INTERNAL GUIDE

This is to certify that Mohit of CSE 6th Semester, 2019-2023, KIIT College of
Engineering, Gurugram has successfully completed the project work entitled
“Online Music Website” in partial fulfillment of requirement for the completion of
Bachelor of Technology (Computer Science and Engineering) as prescribed by the
Maharishi Dayanand University, Rohtak.

This project report is the record of authentic work carried out by him during the
period from 20 May 2022 to 20 June 2022.

He has worked under my guidance. The performance of the student is satisfactory.

Dr. Atul Kumar

Associate Professor 1st
Date:

Mr. Sharvan Kumar

Assistant professor 2nd
Date:
 ACKNOWLEDGEMENT

I have taken efforts in this project. However, it would not have been possible without
the kind support and help of many individuals. I would like to extend my sincere
thanks to all of them.

I take immense pleasure in thanking Prof. (Dr.) S. S. Agrawal, Director General

(KIIT Group of Colleges) and Prof. (Dr.) S. K. Agarwal, Principal (KCE), Prof.
(Dr.) Vikram Singh (Vice-Principal (KCE), Mrs. Reeta Saxena TPO (KIIT) and
all faculty members of, our beloved Computer Science Department for having me
to carry out this project work.

I wish to express my sense of gratitude to our Project Supervisors, Dr. Atul Kumar
and Mr. Shravan Kumar for his guidance and useful suggestions, which helped me
in completing the project work, in time.

Finally, yet importantly, I would like to express my heartfelt thanks to our beloved
parents for their blessings, our friends/classmates for their help and wishes for the
successful completion of this project. Any omission in this brief acknowledgement
does not mean lack of gratitude.

Name: Mohit
Registration No.: 191270017
 ABSTRACT

The sole intention behind the consideration of this Project is to generate

and manage a simple online music website. The motivation of this project
comes from my desire to learn the increasingly growing field of Web
Development. This project is developed considering context of the
customer in mind. Here, I have used the HTML, CSS and JavaScript to
design this website.

This website is designed in a way so that anyone on the web can access it
and enjoy music on the web. And at the same time can receive the
benefits of listening music.
 TABLE OF CONTENTS

PAGE
S. No. TOPICS
NO
1. Title page i
2. Declaration ii
3. Certificate from internal Guide iii
4. Acknowledgement iv
5. Abstract v
6. List of Figures vi
Chapter - 1: INTRODUCTION
7. 1.1 Objective of the Project 1
1.2 Features of the Project
Chapter – 2: SYSTEM REQUIREMENT AND ANALYSIS
2.1 Hardware Requirements
8. 2.2 Software Requirements 2 - 10
2.3 Introduction to Technology used
2.4 Software Description
Chapter – 3: IMPLEMENTATION
3.1 System Implementation
9. 11 - 13
3.2 Flow Chart
3.3 Website
Chapter – 4:CONCLUSION AND FUTURE ENHANCEMENT
10. 4.1 Conclusion 14
4.2 Scope for future development
11. Bibliography 15
12. Appendix 15 - 40
 List Of Figures

Figure No. Title PAGE NO

2.1 Windows OS 2

2.2 Linux OS 2

2.3 Mac OS 3

3.1 Flow chart of the website 11

3.2 Menu Side 12

3.3 Song Side 13

3.4 Music Player 13

3.5 Website 13

CHAPTER - 1
 INTRODUCTION

The sole intention behind the consideration of this Project is to generate and manage a
simple online music website. The motivation of this project comes from my desire to
learn the increasingly growing field of Web Development. This project is developed
considering context of the customer in mind. Here, I have used the HTML, CSS and
JavaScript to design this website.
This website is designed in a way so that anyone on the web can access it and enjoy
music on the web. And at the same time can receive the benefits of listening to music.

1.1 OBJECTIVE OF THE PROJECT

The objective of the project are as follows :
1. The main objective of this project is to provide easy access to music to all.
2. This website has been designed keeping user interaction and friendliness the
top priority.
3. User can play and enjoy music on the web without any need of downloading
any application. User just have to login to the site and he/she can enjoy music.

1.2 FEATURES OF THE PROJECT

The features of the project are as follows :
1. The website designed is interactive and user friendly.
2. It’s Simple and easy to use.
3. It’s easy to modify.
4. There is a personal playlist and recommendations based on the user activity.
 CHAPTER – 2
SYSTEM REQUIREMENT AND ANALYSIS

2.1 HARDWARE REQUIREMENTS

One personal computer with the following configuration:

 Processor : Intel, AMD
 RAM : 4 GB or more
 Hard disk : 10 GB or more

2.2 SOFTWARE REQUIREMENTS

 Operating System: 32-bit or 64-bit Windows 7 or later/ macOS
10.13 or later/ any linux distribution.
Operating System: Any of the following can be used.
 Windows: Microsoft Windows 7 or later versions.

Figure No. 2.1 WINDOWS OS

 Linux: Any distribution of Linux will be okay.

Figure No. 2.2 LINUX OS

  MAC OS: Mac OS is a series of graphical operating
systems developed and marketed by Apple Inc.

Figure No. 2.3 MAC OS

 Tools / IDE used: Dev C++, Tubro C++, Visual Studio Code.

2.3 INTRODUCTION TO TECHNOLOGIES USED

2.3.1 HTML ( HyperText MarkUp Language )
2.3.1.1 INTRODUCTION
HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications. Let's see what is meant by
Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it,
is a hypertext. Whenever you click on a link which brings you to a new webpage, you
have clicked on a hypertext. HyperText is a way to link two or more web pages
(HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply

layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A
Web page can be of the static or dynamic type. With the help of HTML only, we
can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages
with the help of styling, and which looks in a nice format on a web browser. An
HTML document is made of many HTML tags and each HTML tag contains different
content.

2.3.1.2 HISTORY OF HTML

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an
internet based hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The
latest version of HTML is HTML5, which we will learn later in this tutorial.

2.3.1.3 HTML VERSIONS

Since the time HTML was invented there are lots of HTML versions in market, the
brief introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was
standard language version for website design. HTML 2.0 was able to support extra
features such as form-based file upload, form elements such as text box, option
button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version
was capable of creating tables and providing support for extra options for form
elements. It can also support a web page with complex mathematical equations. It
became an official standard for any browser till January 1997. Today it is practically
supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and it
provides added support for stylesheets (CSS) and scripting ability for various
multimedia elements.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first
draft of this version was announced in January 2008. There are two major
organizations one is W3C (World Wide Web Consortium), and another one is
WHATWG( Web Hypertext Application Technology Working Group) which are
involved in the development of HTML 5 version, and still, it is under development.

2.3.1.4 FEATURES OF HTML

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot

of formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along

with the text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like

Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web

pages which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in

lower-case or upper-case.

2.3.2 CSS ( Cascading Style Sheet )

2.3.2.1 INTRODUCTION TO CSS

CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colours, layout, and fonts, thus making our
web pages presentable to the users.

CSS is designed to make style sheets for the web. It is independent of HTML and
can be used with any XML-based markup language. Now let’s try to break the
acronym:

Cascading: Falling of Styles

Style: Adding designs/Styling our HTML tags

Sheets: Writing our style in different documents

2.3.2.2 HISTORY OF CSS

 1994: First Proposed by Hakon Wium Lie on 10th October

 1996: CSS was published on 17th November with influencer Bert Bos

 Later he became co-author of CSS

 1996: CSS became official with CSS was published in December

 1997: Created CSS level 2 on 4th November 

 1998: Published on 12th May

2.3.2.3 FEATURES OF CSS

 Device Compatibility

 Faster website speed

 Easily maintainable
  Consistent and spontaneous changes

 Ability to re-position

 Enhances search engine capabilities to crawl the web pages

2.3.3 JAVASCRIPT

2.3.3.1 INTRODUCTION

JavaScript (js) is a light-weight object-oriented programming language which is used

by several websites for scripting the webpages. It is an interpreted, full-fledged
programming language that enables dynamic interactivity on websites when applied
to an HTML document. It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser. Since then, it has been adopted by all
other graphical web browsers. With JavaScript, users can build modern web
applications to interact directly without reloading the page every time. The traditional
website uses js to provide several forms of interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name
was suggested and provided in the times when Java was gaining popularity in the
market. In addition to web browsers, databases such as CouchDB and MongoDB uses
JavaScript as their scripting and query language.

2.3.3.2 HISTORY OF JAVASCRIPT

In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed
to become more dynamic. Thus, a 'glue language' was believed to be provided to
HTML to make web designing easy for designers and part-time programmers.
Consequently, in 1995, the company recruited Brendan Eich intending to implement
and embed Scheme programming language to the browser. But, before Brendan could
start, the company merged with Sun Microsystems for adding Java into its Navigator
so that it could compete with Microsoft over the web technologies and platforms.
Now, two languages were there: Java and the scripting language. Further, Netscape
decided to give a similar name to the scripting language as Java's. It led to 'Javascript'.
Finally, in May 1995, Marc Andreessen coined the first code of Javascript named
'Mocha'. Later, the marketing team replaced the name with 'LiveScript'. But, due to
trademark reasons and certain other reasons, in December 1995, the language was
finally renamed to 'JavaScript'. From then, JavaScript came into existence.

2.3.3.3 FEATURES OF HTML

 All popular web browsers support JavaScript as they provide built-in
execution environments.
 JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
 JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
 JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
 It is a light-weighted and interpreted language.
 It is a case-sensitive language.
 JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
 It provides good control to the users over the web browsers.

2.4 SOFTWARE DESCRIPTION

2.4.1 VS CODE
2.4.1.1 INTRODUCTION
Visual Studio Code is a code editor in layman’s terms. Visual Studio Code is “a free-
editor that helps the programmer write code, helps in debugging and corrects the code
using the intelli-sense method ”. In normal terms, it facilitates users to write the code
in an easy manner. Many people say that it is half of an IDE and an editor, but the
decision is up to to the coders. Any program/software that we see or use works on the
code that runs in the background. Traditionally coding was used to do in the
traditional editors or even in the basic editors like notepad! These editors used to
provide basic support to the coders.
Some of them were so basic that it was very difficult in writing basic English level
programs in them. As time went by, some programming languages needed a specific
framework and support for further coding and development it, which was not possible
using these editors. VI Editor, Sublime Text Editor, is one of the many kinds of
editors that came into existence. The most prominent and which supports almost
every coding language is VISUAL STUDIO CODE. Its features let the user modify
the editor as per the usage, which means the user is able to download the libraries
from the internet and integrate it with the code as per his requirements.
2.4.1.2 GETTING STARTED

You can install the latest version of Visual Studio Code from their official website.

After installation, you can run the editor by entering the code -n command into the
terminal. This will prompt VS Code to start and display a fresh instance. If you want
to continue working from where you left off in the previous coding session, enter
the code command without the -n flag. If you want to open VS Code in a certain
directory, navigate to the directory and enter the code -r command. You are now on
your way to writing powerful code on your VS Code environment!

2.4.1.2 FEATURES OF VS CODE

VS Code supports a wide array of programming languages from Java, C++, and
Python to CSS, Go, and Dockerfile. Moreover, VS Code allows you to add on and
even creating new extensions including code linters, debuggers, and cloud and web
development support.

The VS Code user interface allows for a lot of interaction compared to other text
editors. To simplify user experience, VS Code is divided into five main regions:

 Support for multiple programming languages: Supports multiple

programming languages. So earlier, programmers needed Web-Support: a
different editor for different languages, but it has built-in multi-language
support. This also means it easily detects if there’s any fault or cross-language
reference, it’ll be able to detect it easily.
 Intelli - Sense: It can detect if any snippet of code is left incomplete. Also,
common variable syntaxes and variable declarations are made automatically.
Ex: If a certain variable is being used in the program and the user has
forgotten to declare, intelli-sense will declare it for the user.
 Cross-Platform Support: Traditionally, editors used to support
either Windows or Linux or Mac Systems. But Visual Studio Code is cross-
platform. So it can work on all three platforms. Also, the code works on all
three platforms; else, the open-source and proprietary software codes used to
be different.
 Extensions and Support: Usually supports all the programming languages
but, if the user/programmer wants to use the programming language which is
not supported then, he can download the extension and use it. And
performance-wise, the extension doesn’t slow down the editor as it rums as a
different process.
 Repository: With the ever-increasing demand for the code, secure and timely
storage is equally important. It is connected with Git or can be connected with
any other repository for pulling or saving the instances.
 Web-Support: Comes with built-in support for Web applications. So web
applications can be built and supported in VSC.
 Hierarchy Structure: The code files are located in files and folders. The
required code files also have some files, which may be required for other
complex projects. These files can be deleted as per convenience.
 Improving Code: Some code snippets can be declared a bit differently, which
might help the user in the code. This function prompts the user, wherever
necessary, to change it to the suggested option.
 Terminal Support: Many of the times, the user needs to start from the root of
the directory to start with a particular action, in-built terminal or console
provides user support to not to switch in-between two screens for the same.
 Multi-Projects: Multiple projects containing multiple files/folders can be
opened simultaneously. These projects/folders might or might not be related to
each other.
 Git Support: Resources can be pulled from Git Hub Repo online and vice-
versa; saving can be done too. Resource pulling also means cloning the code
which is made available on the internet. This code can later be changed and
saved.
  Commenting: A common feature, but some of the languages do not support
it. Commenting on the code helps the user to recall or track according to the
sequence he wants.

CHAPTER – 3
IMPLEMENTATION
3.1 SYSTEM IMPLEMENTATION
System implementation is the important stage of project when the theoretical design is
tuned into practical system. The main stages in the implementation are as follows:
 Planning
 System Development
 Testing
Planning is the first task in the system implementation. At the time of implementation
of any system people from different departments and system analysis involve. They
are confirmed to practical problem of controlling various activities of people outside
their own data processing departments. The line managers controlled through an
implementation coordinating committee.

3.2 FLOW CHART

Figure 3.1 Flow Chart Of Online Music Website
3.3 WEBSITE
Figure 3.3.1 – Menu Side
Figure 3.3.2 – Song side

Figure 3.3.3 – Music Player

Figure 3.3.4 – Website

 CHAPTER 4

CONCLUSION AND FUTURE ENHANCEMENT

4.1 CONCLUSION
The website designed is very interactive, user friendly and easy to help.
At the same time helps in the development of skills of the user. Music can
benefit in various areas like Brain growth, Language skills, Math skills,
Memory, Attention and Concentration, Co-ordination, Discipline, Joy of
life and many more.
Recommendations are more and more website like these should be
designed as it improves the skills and at the same time easy to use.
Anyone can access it on web without downloading it.

4.2 SCOPE FOR FUTURE DEVELOPMENT

Nothing is 100% perfect, there always a scope of improvement. Similarly
this project can be improved further. There are many areas in this project
which can be expanded more on a larger scale that could not be achieved
due to limited time and resources. Some more research needs to be done
to meet the requirements of a learner. Following are some implications
and chances that can be done in this project.

Additional features which could be added to the application is, adding

database connectivity to make this project more user friendly, improving
the graphical interface, adding features like dynamic website, etc. making
it more user friendly and interactive so that more and more players can
play and enjoy the songs with ease.
 BIBLIOGRAPHY

1. What is HTML - javatpoint

2. Introduction To CSS | Components | characteristics & Application OF CSS (educba.com)
3. Learn JavaScript Tutorial - javatpoint
4. What is Visual Studio Code? (educative.io)
5. What is Visual Studio Code? | Features And Advantages | Scope & Career (educba.com)
6. Musical benefits | Learning Potential
 APPENDIX

1. HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
    <title>Music App</title>
</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">
            <li class="songItem">
                <span>01</span>
                <img src="img/1.jpg" alt="Alan">
                <h5>
                    On My Way
                    <div class="subtitle">Alan Walker</div>
                </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="1"></i>
            </li>
            <li class="songItem">
                <span>02</span>
                <img src="img/1.jpg" alt="Alan">
                <h5>
                    On My Way
                    <div class="subtitle">Alan Walker</div>
                </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="2"></i>
            </li>
            <li class="songItem">
                <span>03</span>
                <img src="img/1.jpg" alt="Alan">
                <h5>
                    On My Way
                    <div class="subtitle">Alan Walker</div>
                </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="3"></i>
            </li>
            <li class="songItem">
                <span>04</span>
                <img src="img/1.jpg" alt="Alan">
                <h5>
                    On My Way
                    <div class="subtitle">Alan Walker</div>
                </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="4"></i>
            </li>
            <li class="songItem">
                <span>05</span>
                <img src="img/1.jpg" alt="Alan">
                <h5>
                    On My Way
                    <div class="subtitle">Alan Walker</div>
                </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="5"></i>
            </li>
            <li class="songItem">
                <span>06</span>
                <img src="img/1.jpg" alt="Alan">
                <h5>
                    On My Way
                    <div class="subtitle">Alan Walker</div>
                </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="6"></i>
            </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/logo.png" alt="User" title="Musico">
            </div>
        </nav>
        <div class="content">
            <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 id="left_scroll" class="bi bi-arrow-left-short"></i>
                    <i id="right_scroll" class="bi bi-arrow-right-short"></i>
                </div>
            </div>
            <div class="pop_song">
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="7"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="8"></i>
                        <!-- change All id  -->
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="9"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="10"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="11"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="12"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="13"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="14"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
                <li class="songItem">
                    <div class="img_play">
                        <img src="img/1.jpg" alt="alan">
                        <i class="bi playListPlay bi-play-circle-fill" id="15"></i>
                    </div>
                    <h5>On My Way
                        <br>
                        <div class="subtitle">Alan Walker</div>
                    </h5>
                </li>
            </div>
        </div>
        <div class="popular_artists">
            <div class="h4">
                <h4>Popular Artists</h4>
                <div class="btn_s">
                    <i id="left_scrolls" class="bi bi-arrow-left-short"></i>
                    <i id="right_scrolls" class="bi bi-arrow-right-short"></i>
                </div>
            </div>
            <div class="item">
                <li>
                    <img src="img/arjit.jpg" alt="Arjit Singh" title="Arjit Singh">
                </li>
                <li>
                    <img src="img/alan.jpg" alt="Alan Walker" title="Alan Walker">
                </li>
                <li>
                    <img src="img/atif.jpg" alt="Atif Aslam" title="Atif Aslam">
                </li>
                <li>
                    <img src="img/guru.jpg" alt="Guru RAndawa" title="Guru Randawa">
                </li>
                <li>
                    <img src="img/dhvani.jpg" alt="Dhvani" title="Dhvani">
                </li>
                <li>
                    <img src="img/Diljit_Dosanjh.jpg" alt="Diljit Dosanjh" title="Diljit Dosanjh">
                </li>
                <li>
                    <img src="img/jubin Nautiyal.jpg" alt="Jubin Nautiyal" title="Jubin Nautiyal">
                </li>
                <li>
                    <img src="img/neha.jpg" alt="Neha Kakker" title="Neha Kakker">
                </li>
                <li>
                    <img src="img/justin-bieber-lede.jpg" alt="Justin Bieber" title="Justin Bieber">
                </li>
                <li>
                    <img src="img/honey.jpg" alt="Honey Singh" title="Honey Singh">
                </li>
                <li>
                    <img src="img/akhil.jpg" alt="Akhil" title="Akhil">
                </li>
                <!-- change all img  -->
            </div>
        </div>
    </div>

    <div class="master_play">
        <div class="wave">
            <div class="wave1"></div>
            <div class="wave1"></div>
            <div class="wave1"></div>
        </div>
        <img src="img/26th.jpg" alt="Alan" id="poster_master_play">
        <h5 id="title">Vande Mataram<br>
            <div class="subtitle">Bankim Chandra</div>
        </h5>
        <div class="icon">
            <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>
        </div>
        <span id="currentStart">0:00</span>
        <div class="bar">
            <input type="range" id="seek" min="0" value="0" max="100">
            <div class="bar2" id="bar2"></div>
            <div class="dot"></div>
        </div>
        <span id="currentEnd">0:00</span>

        <div class="vol">
            <i class="bi bi-volume-down-fill" id="vol_icon"></i>
            <input type="range" id="vol" min="0" value="30" max="100">
            <div class="vol_bar"></div>
            <div class="dot" id="vol_dot"></div>
        </div>
    </div>
</header>
    <script src="app.js"></script>
</body>
</html>

2. CSS
/* Google Font 'Poppins'  */
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #131312;
    font-family: 'Poppins' , sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    width: 85%;
    height: 95%;
    /* border: 1px solid #fff; */
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

header .menu_side, .song_side {

    position: relative;
    width: 25%;
    height: 90%;
    /* border: 1px solid #fff; */
    background-color: #111727;
    box-shadow: 5px 0px 2px #090f1f;
    color: #fff;
}

header .song_side {
    width: 75%;
    background: #0b1320;
}

header .master_play {
    width: 100%;
    height: 10%;
    background: #111727;
    box-shadow: 0px 3px 8px #090f1f;
}

header .menu_side h1 {
    font-size: 20px;
    margin: 15px 0px 0px 20px;
    font-weight: 500;
}
header .menu_side .playlist {
    margin:  40px 0px 0px 20px;
}

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;
    transition: .3s linear;
}
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: 300px;
    /* border: 1px solid #fff; */
    margin-top: 40px;
    /* overflow: auto; */
}
header .menu_side .menu_song li{
    position: relative;
    list-style-type: none;
    padding: 5px 0px 5px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    transition: .3s linear;
 
}
header .menu_side .menu_song li:hover{
    background: rgb(105, 105, 170,.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;
}
header .menu_side .menu_song li h5 .subtitle{
    font-size: 9px;
    color: #4c5262;
}
header .menu_side .menu_song li .bi{
    position: absolute;
    right: 15px;
    top: 6px;
    font-size: 16px;
}

header .master_play {
    display: flex;
    align-items: center;
    padding: 0px 20px;
}
header .master_play .wave{
    width: 30px;
    height: 30px;
    /* border: 1px solid #fff; */
    padding-bottom: 5px;
    display: flex;
    align-items: flex-end;
    margin-right: 10px;
}
header .master_play .wave .wave1{
    width: 3px;
    height: 10px;
    margin-right: 3px ;
    border-radius: 10px 10px 0px 0px ;
    background: #36e2ec;
    animation: unset;
}
header .master_play .wave .wave1:nth-child(2){
    height: 13px;
    /* animation-delay: .4s; */
}
header .master_play .wave .wave1:nth-child(3){
    height: 8px;
    /* animation-delay: .8s; */
}
/* javascript class wave  */
header .master_play .active2 .wave1{
    animation: wave .5s linear infinite;
}
header .master_play .active2 .wave1:nth-child(2){
    animation-delay: .4s;
}
header .master_play .active2 .wave1:nth-child(3){
    animation-delay: .8s;
}

@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;
    font-size: 13px;
    margin-left: 15px;
    color: #fff;
    line-height: 17px;
}
header .master_play h5 .subtitle{
   font-size: 11px;
   color: #4c5262;
}
header .master_play .icon{
   font-size: 20px;
   color: #fff;
   margin: 0px 20px 0px 40px;
   outline: none;
}
header .master_play .icon .bi{
 cursor: pointer;
 outline: none;
}
header .master_play .icon .bi:nth-child(2){
border: 1px solid rgb(105, 105, 170,.1);
border-radius: 50%;
padding: 1px 4px 0px 6px;
margin: 0px 5px;
transition: .3s linear;
}

header .master_play span {

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

header .master_play .bar {

    position: relative;
    width: 43%;
    height: 2px;
    background: rgb(105, 105, 170,.1);
    margin: 0px 15px 0px 10px;
}
header .master_play .bar .bar2{
   position: absolute;
   background: #36e2ec;
   width: 0%;
   height: 100%;
   top: 0;
   transition: 1s linear;
}
header .master_play .bar .dot{
   position: absolute;
   width: 5px;
   height: 5px;
   background: #36e2ec;
   border-radius: 50%;
   left: 0%;
   top: -1px;
   transition: 1s linear;
}
header .master_play .bar .dot::before{
    content: '';
   position: absolute;
   width: 15px;
   height: 15px;
   border:1px solid #36e2ec;
   border-radius: 50%;
   left: -6px;
   top: -6px;
  box-shadow: inset 0px 0px 3px #36e2ec;
}
header .master_play .bar input{
   position: absolute;
   width: 100%;
   top: -6px;
   left: 0;
   cursor: pointer;
   z-index: 99999999;
   transition: 3s linear;
   opacity: 0;
}
header .master_play .vol{
  position: relative;
  width: 100px;
  height: 2px;
  margin-left: 50px;
 background: rgb(105, 105, 170,.1);
}
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: -10px;
    left: 0;
    cursor: pointer;
    z-index: 99999999;
    transition: 3s linear;
    opacity: 0;
 }

 header .master_play .vol .vol_bar{

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

 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;
    /* border: 1px solid #fff; */
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 header .song_side nav ul{
    display: flex;
 }
 header .song_side nav ul li{
    position: relative;
    list-style-type: none;
    font-size: 13px;
    color: #4c5262;
    margin-right: 25px;
    cursor: pointer;
    transition: .3s linear;
 }
 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;
   background: #36e2ec;
   bottom: -5px;
   left: 0;
   border-radius: 20px;
 }
 header .song_side nav .search{
   position: relative;
   width: 40%;
   padding: 1px 10px;
   border-radius: 20px;
   color: gray;
 }
 header .song_side nav .search::before{
     content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 20px;
   background: rgb(184, 184, 184,.1);
   backdrop-filter: blur(5px);
   z-index: -1;
 }
 header .song_side nav .search .bi{
    font-size: 13px;
    padding: 3px 0px 0px 10px;
 }
 header .song_side nav .search input{
    background: none;
    outline: none;
    border: none;
    padding: 0px 10px;
    color: #fff;
    font-size: 12px;
 }
 header .song_side nav .user{
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
 }
 header .song_side nav .user img{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 8px #131312;
 }

 header .song_side .content {

     width:90%;
     height: 30%;
     margin: auto;
     /* border: 1px solid #fff; */
     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;
    border: 2px solid #36e2ec;
    outline: none;
    border-radius: 20px;
    background: #5adae0;
    color: #fff;
    cursor: pointer;
    transition: .3s linear;
 }
 header .song_side .content .buttons button:hover{
    border: 2px solid #36e2ec;
    background: none;
    color: #36e2ec;
 }
 header .song_side .content .buttons button:nth-child(1){
    border: 2px solid #36e2ec;
    background: none;
    color: #36e2ec;
 }
 header .song_side .content .buttons button:nth-child(1):hover{
    border: 2px solid #36e2ec;
    background: #36e2ec;
    color: #fff;
 }
 header .song_side .content .buttons button:nth-child(2){
    border: 2px solid #36e2ec;
    background: none;
    color: #36e2ec;
 }
 header .song_side .content .buttons button:nth-child(2):hover{
    border: 2px solid #36e2ec;
    background: #36e2ec;
    color: #fff;
 }

 header .song_side .popular_song {

     width: 90%;
     height: auto;
     /* border: 1px solid #fff; */
     margin: auto;
     margin-top: 15px;
 }
 header .song_side .popular_song .h4{
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 header .song_side .popular_song .h4 .bi{
    color: #a4a8b4;
    cursor: pointer;
    transition: .3s linear;
 }
 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-x: 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;
     list-style-type: none;
     margin-right: 10px;
     transition: .3s linear;
 }
 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;
    align-items: center;
    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;
   transition: .3s linear;
   opacity: 0;
 }
 header .song_side .popular_song .pop_song li .img_play:hover .bi{
   opacity: 1;
 }
 header .song_side .popular_song .pop_song li h5{
   padding: 5px 0px 0px 5px;
   line-height: 15px;
   font-size: 10px;
 }
 header .song_side .popular_song .pop_song li h5 .subtitle{
   font-size: 9px;
   color: #4c5262;
 }

 header .song_side .popular_artists {

    width: 90%;
    height: auto;
    /* border: 1px solid #fff; */
    margin: auto;
    margin-top: 15px;
}
header .song_side .popular_artists .h4{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
header .song_side .popular_artists .h4 .bi{
   color: #a4a8b4;
   cursor: pointer;
   transition: .3s linear;
}
header .song_side .popular_artists .h4 .bi:hover{
   color: #fff;
}
header .song_side .popular_artists .item{
  width: 100%;
  height: auto;
  margin-top: 10px;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}
header .song_side .popular_artists .item::-webkit-scrollbar{
  display: none;
}
header .song_side .popular_artists .item li{
 list-style-type: none;
 position: relative;
 min-width: 60px;
 height: 60px;
 /* background-color: #fff; */
 border-radius: 50%;
 margin-right: 20px;
 cursor: pointer;
}
header .song_side .popular_artists .item li img{
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: absolute;
}
3. JAVASCRIPT
const music = new Audio('vande.mp3');

// create Array

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>
        <div class="subtitle">Alan Walker</div>`,
        poster: "img/2.jpg"
    },
    // all object type
  {
        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>`,
        poster: "img/4.jpg",
    },
  {
        id:"5",
        songName: `Ertugrul Gazi <br><div class="subtitle">Ertugrul</div>`,
        poster: "img/5.jpg",
    },
  {
        id:"6",
        songName: `Electronic Music <br><div class="subtitle">Electro</div>`,
        poster: "img/6.jpg",
    },
  {
        id:"7",
        songName: `Agar Tum Sath Ho <br><div class="subtitle">Tamashaa</div>`,
        poster: "img/7.jpg",
    },
  {
        id:"8",
        songName: `Suna Hai <br><div class="subtitle">Neha Kakker</div>`,
        poster: "img/8.jpg",
    },
  {
        id:"9",
        songName: `Dilber <br><div class="subtitle">Satyameva Jayate</div>`,
        poster: "img/9.jpg",
    },
  {
        id:"10",
        songName: `Duniya <br><div class="subtitle">Luka Chuppi</div>`,
        poster: "img/10.jpg",
    },
  {
        id:"11",
        songName: `Lagdi Lahore Di <br><div class="subtitle">Street Dancer 3D</div>`,
        poster: "img/11.jpg",
    },
  {
        id:"12",
        songName: `Putt Jatt Da <br><div class="subtitle">Putt Jatt Da</div>`,
        poster: "img/12.jpg",
    },
  {
        id:"13",
        songName: `Baarishein <br><div class="subtitle">Atif Aslam</div>`,
        poster: "img/13.jpg",
    },
  {
        id:"14",
        songName: `Vaaste <br><div class="subtitle">Dhvani Bhanushali</div>`,
        poster: "img/14.jpg",
    },
  {
        id:"15",
        songName: `Lut Gaye <br><div class="subtitle">Jubin Nautiyal</div>`,
        poster: "img/15.jpg",
    },
]

Array.from(document.getElementsByClassName('songItem')).forEach((element, i)=>{
    element.getElementsByTagName('img')[0].src = songs[i].poster;
    element.getElementsByTagName('h5')[0].innerHTML = songs[i].songName;
})
let masterPlay = document.getElementById('masterPlay');
let wave = document.getElementsByClassName('wave')[0];

masterPlay.addEventListener('click',()=>{
    if (music.paused || music.currentTime <=0) {
        music.play();
        masterPlay.classList.remove('bi-play-fill');
        masterPlay.classList.add('bi-pause-fill');
        wave.classList.add('active2');
    } else {
        music.pause();
        masterPlay.classList.add('bi-play-fill');
        masterPlay.classList.remove('bi-pause-fill');
        wave.classList.remove('active2');
  }
})

const makeAllPlays = () =>{

    Array.from(document.getElementsByClassName('playListPlay')).forEach((element)=>{
            element.classList.add('bi-play-circle-fill');
            element.classList.remove('bi-pause-circle-fill');
    })
}
const makeAllBackgrounds = () =>{
    Array.from(document.getElementsByClassName('songItem')).forEach((element)=>{
            element.style.background = "rgb(105, 105, 170, 0)";
    })
}

let index = 0;
let poster_master_play = document.getElementById('poster_master_play');
let title = document.getElementById('title');
Array.from(document.getElementsByClassName('playListPlay')).forEach((element)=>{
    element.addEventListener('click', (e)=>{
        index = e.target.id;
        makeAllPlays();
        e.target.classList.remove('bi-play-circle-fill');
        e.target.classList.add('bi-pause-circle-fill');
        music.src = `audio/${index}.mp3`;
        poster_master_play.src =`img/${index}.jpg`;
        music.play();
        let song_title = songs.filter((ele)=>{
            return ele.id == index;
        })

        song_title.forEach(ele =>{
            let {songName} = ele;
            title.innerHTML = songName;
        })
        masterPlay.classList.remove('bi-play-fill');
        masterPlay.classList.add('bi-pause-fill');
        wave.classList.add('active2');
        music.addEventListener('ended',()=>{
            masterPlay.classList.add('bi-play-fill');
            masterPlay.classList.remove('bi-pause-fill');
            wave.classList.remove('active2');
        })
        makeAllBackgrounds();
        Array.from(document.getElementsByClassName('songItem'))[`${index-1}`].style.background = "rgb(105, 105,
170, .1)";
    })
})

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 min = Math.floor(music_dur/60);

    let sec = Math.floor(music_dur%60);
    if (sec<10) {
        sec = `0${sec}`
  }
    currentEnd.innerText = `${min}:${sec}`;

    let min1 = Math.floor(music_curr/60);

    let sec1 = Math.floor(music_curr%60);
    if (sec1<10) {
        sec1 = `0${sec1}`
  }
    currentStart.innerText = `${min1}:${sec1}`;

    let progressbar = parseInt((music.currentTime/music.duration)*100);

    seek.value = progressbar;
    let seekbar = seek.value;
    bar2.style.width = `${seekbar}%`;
    dot.style.left = `${seekbar}%`;
})

seek.addEventListener('change', ()=>{
    music.currentTime = seek.value * music.duration/100;
})

music.addEventListener('ended', ()=>{
    masterPlay.classList.add('bi-play-fill');
    masterPlay.classList.remove('bi-pause-fill');
    wave.classList.remove('active2');
})

let vol_icon = document.getElementById('vol_icon');

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

vol.addEventListener('change', ()=>{
    if (vol.value == 0) {
        vol_icon.classList.remove('bi-volume-down-fill');
        vol_icon.classList.add('bi-volume-mute-fill');
        vol_icon.classList.remove('bi-volume-up-fill');
  }
    if (vol.value > 0) {
        vol_icon.classList.add('bi-volume-down-fill');
        vol_icon.classList.remove('bi-volume-mute-fill');
        vol_icon.classList.remove('bi-volume-up-fill');
  }
    if (vol.value > 50) {
        vol_icon.classList.remove('bi-volume-down-fill');
        vol_icon.classList.remove('bi-volume-mute-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 = `audio/${index}.mp3`;
    poster_master_play.src =`img/${index}.jpg`;
    music.play();
    let song_title = songs.filter((ele)=>{
        return ele.id == index;
    })

    song_title.forEach(ele =>{
        let {songName} = ele;
        title.innerHTML = songName;
    })
    makeAllPlays()

    document.getElementById(`${index}`).classList.remove('bi-play-fill');
    document.getElementById(`${index}`).classList.add('bi-pause-fill');
    makeAllBackgrounds();
    Array.from(document.getElementsByClassName('songItem'))[`${index-1}`].style.background = "rgb(105, 105,
170, .1)";
  
})
next.addEventListener('click', ()=>{
    index -= 0;
    index += 1;
    if (index > Array.from(document.getElementsByClassName('songItem')).length) {
        index = 1;
    }
    music.src = `audio/${index}.mp3`;
    poster_master_play.src =`img/${index}.jpg`;
    music.play();
    let song_title = songs.filter((ele)=>{
        return ele.id == index;
    })

    song_title.forEach(ele =>{
        let {songName} = ele;
        title.innerHTML = songName;
    })
    makeAllPlays()

    document.getElementById(`${index}`).classList.remove('bi-play-fill');
    document.getElementById(`${index}`).classList.add('bi-pause-fill');
    makeAllBackgrounds();
    Array.from(document.getElementsByClassName('songItem'))[`${index-1}`].style.background = "rgb(105, 105,
170, .1)";
  
})

let left_scroll = document.getElementById('left_scroll');

let right_scroll = document.getElementById('right_scroll');
let pop_song = document.getElementsByClassName('pop_song')[0];

left_scroll.addEventListener('click', ()=>{
    pop_song.scrollLeft -= 330;
})
right_scroll.addEventListener('click', ()=>{
    pop_song.scrollLeft += 330;
})
let left_scrolls = document.getElementById('left_scrolls');
let right_scrolls = document.getElementById('right_scrolls');
let item = document.getElementsByClassName('item')[0];

left_scrolls.addEventListener('click', ()=>{
    item.scrollLeft -= 330;
})
right_scrolls.addEventListener('click', ()=>{
    item.scrollLeft += 330;
})