Online Music Player Project Report
Submitted by:
Puja Kumari 2002875
In partition fulfillment for the award of the degree of
BACHELOR OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY
CHANDIGARH ENGINEERING COLLEGE
LANDRAN, MOHALI, PUNJAB, 140307
(AFFILIATED TO IKG PUNJAB TECHNICAL UNIVERSITY, JALANDHAR, PUNJAB, INDIA)
MAY, 2023
PUJA KUMARI 2002875
Table of Contents
1. Declaration of the student
Certificate of the guide
Acknowledgement
Abstract
2. Introduction
1. Project Overview/ Specification
2. Software Specification
3. System Analysis & Design
3.1.Flow Charts
3.2.Codes
4. Results/ Output
5. Conclusions
6. References
PUJA KUMARI 2002875
DECLARATION
I hereby declare that the project entitled “Online music player” submitted for the B. Tech. (IT) degree is my
original work and the project has not formed the basis for the award of any other degree, diploma, fellowship or
any other similar titles.
Date:08/05/2023 Signature of the Student
PUJA KUMARI 2002875
CERTIFICATE
This is to certify that the project titled “Online Music Player” is the bona fide work carried out by “ Puja
Kumari”, a student of B Tech (IT) of CHANDIGARH ENGINEERING COLLEGE LANDRAN MOHALI
PUNJAB affiliated to IKG Punjab Technical University, Jalandhar, Punjab(India)during the academic year
2022-23, in partial fulfillment of the requirements for the award of the degree of Bachelor of Technology
(Information Technology ) and that the project has not formed the basis for the award previously of any other
degree, diploma, fellowship or any other similar title.
Place Signature of the Guide
Date:08/05/2023
PUJA KUMARI 2002875
ACKNOWLEDGEMENT
I would like to express my profound gratitude to Dr. Sushil Kamboj of IT department,
Chandigarh Engineering College for their contributions of the completion of my project Online
Music Player.
I would like to express my special thanks to our mentor Ms. Lakhvinder Kaur for her time and
efforts she provided throughout the year. Your useful advice and suggestions were really helpful
to me during the project completion. In this aspect, I am eternally grateful to you.
I would like to acknowledge that this project was completed entirely by me and not by someone
else.
Signature of the student
PUJA KUMARI 2002875
Abstract
Music is an essential part of our lives, and with the rise of technology, the way we listen to and
enjoy music has also evolved. In today's digital age, online music players have become
increasingly popular as they provide users with easy access to a vast library of songs from
different genres and artists.
Our project focuses on developing an online music player website that offers a seamless and user-
friendly experience for music lovers. The website will provide users with a wide range of features,
including the ability to search for and play their favourite songs, create playlists, discover new
artists and genres, and share their music with friends and family.
In this project report, we will discuss the development process of our online music player website,
the challenges we faced, and the solutions we implemented to overcome them. We will also
explore the features and functionalities of the website, the technology stack used, and the future
improvements we plan to make.
We believe that our online music player website will provide users with a unique and enjoyable
music streaming experience that will keep them coming back for more.
• The language we have used are-
i. HTML
ii. CSS
iii. JavaScript
PUJA KUMARI 2002875
SOFTWARE SPECIFICATION
The Online Music Player web app will be developed using the following technologies:
1. Server-Side Development:
• HTML will be used for the server-side development of the web app.
2. Client-Side Development:
• CSS and Javascript is used for the client-side development of the webapp.
• HTML and CSS is used for the user interface design and styling.
3. Development Tools:
• Visual Studio Code will be used as the code editor.
5. Testing:
• The web app will be tested thoroughly to ensure it is free of bugs.
• Postman and ThunderClient are used for manual testing of APIs.
PUJA KUMARI 2002875
FLOWCHART
PUJA KUMARI 2002875
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apna Gana ~ by chaser</title>
<link rel="stylesheet" href="style.css">
<!-- <script src="script.js"></script> -->
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="logo2.png" alt="APNA GANA">APNA GANA</li>
<div class="nav_centre">
<li>Home</li>
<li>Explore</li>
<li>Library</li>
<li>Upgrade</li>
<li>Search</li>
</div>
PUJA KUMARI 2002875
</ul>
</nav>
<div class="container">
<!-- This is for 1st bar "Most Recommended Songs" -->
<div class="container1">
<h2>Most Recommended Songs</h2>
<div class = "songItemcontainer">
<div class="songItem1">
<img src="1.jpg" alt="1">
<p id="1" class="songName">Phir Kabhi</p>
<span class="songlistplay">
<span class="timestamp">
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem1">
<img src="2.jpg" alt="2">
<p id="2" class="songName">Tujhe Kitna Chahne Lage</p>
PUJA KUMARI 2002875
<span class="songlistplay">
<span class="timestamp">
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem1">
<img src="3.jpg" alt="3">
<p id="3" class="songName">Shayad</p>
<span class="songlistplay">
<span class="timestamp">
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem1">
<img src="4.jpg" alt="4">
<p id="4" class="songName">Ae Dil Hai Mushkil</p>
<span class="songlistplay">
<span class="timestamp">
<!-- <i class="fas fa-play"></i> -->
</span>
PUJA KUMARI 2002875
</div>
</div>
</div>
<!-- This is for 2nd bar "Your Favourites" -->
<div class="container2">
<h2>Your Favourites</h2>
<div class = "songItemcontainer">
<div class="songItem2">
<img src="6.jpg" alt="1">
<p id="6" class="songName">Kisan Anthem</p>
<span class="songlistplay">
<span class="timestamp">
<!-- <span>05:34</span> -->
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem2">
<img src="7.jpg" alt="2">
<p id="7" class="songName">Fikar Not</p>
PUJA KUMARI 2002875
<span class="songlistplay">
<span class="timestamp">
<!-- <span>05:34</span> -->
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem2">
<img src="8.jpg" alt="3">
<p id="8" class="songName">Raataan Lambiyan</p>
<span class="songlistplay">
<span class="timestamp">
<!-- <span>05:34</span> -->
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem2">
<img src="9.jpg" alt="4">
<p id="9" class="songName">Yaad Teri</p>
<span class="songlistplay">
PUJA KUMARI 2002875
<span class="timestamp">
<!-- <span>05:34</span> -->
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
<div class="songItem2">
<img src="10.jpg" alt="5">
<p id="10" class="songName">Main Tumhara</p>
<span class="songlistplay">
<span class="timestamp">
<!-- <span>05:34</span> -->
<!-- <i class="fas fa-play"></i> -->
</span>
</span>
</div>
</div>
</div>
<!-- This is for 3nd bar "Popular Artists" -->
<div class="container3">
<h2>Popular Artists</h2>
<div class = "songItemcontainer">
PUJA KUMARI 2002875
<div class="songItem3">
<!-- This is for 3nd bar "Popular Artists" -->
<div class="container3">
<h2>Popular Artists</h2>
<div class = "songItemcontainer">
<div class="songItem3">
<img src="11.jpg" alt="1">
<p>Arijit Singh</p>
<span class="songlistplay">
<span class="timestamp">
</span>
</span>
</div>
<div class="songItem3">
<img src="12.jpg" alt="2">
<p>A.R.Rahman</p>
<span class="songlistplay">
<span class="timestamp">
</span>
</span>
PUJA KUMARI 2002875
</div>
<div class="songItem3">
<img src="13.jpg" alt="3">
<p>Shreya Ghoshal</p>
<span class="songlistplay">
<span class="timestamp">
</span>
</span>
</div>
<div class="songItem3">
<img src="14.jpg" alt="4">
<p>Ankit Tiwari</p>
<span class="songlistplay">
<span class="timestamp">
</span>
</span>
</div>
<div class="songItem3">
<img src="15.jpg" alt="5">
<p>Mohit Chauhan</p>
PUJA KUMARI 2002875
<span class="songlistplay">
<span class="timestamp">
</span></span>
</div></div>
</div>
</div>
<div class="bottom">
<input type="range" name="range" id="myprogressbar" min="0" value="0" max="100">
<div class="icons">
<!-- fontawesome icons -->
<i class="fas fa-2x fa-step-backward" id="previous"></i>
<i class="far fa-2x fa-play-circle" id="masterPlay"></i>
<i class="fas fa-2x fa-step-forward" id="next"></i></div>
<div class="songinfo">
<img src="playing.gif" width="90px" alt="" id="gif"> <span id="masterSongName">Phir
Kabhi</span></div></div>
<script src="https://kit.fontawesome.com/e54f894665.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
PUJA KUMARI 2002875
RESULT:
PUJA KUMARI 2002875
PUJA KUMARI 2002875
CONCLUSION
In conclusion, the development of our online music player website has been a challenging but
rewarding experience. We have successfully created a platform that offers users a seamless and
user-friendly music streaming experience. Our website offers a wide range of features, including
the ability to search for and play songs, create playlists, discover new artists and genres, and share
music with friends and family.
PUJA KUMARI 2002875
REFERENCES
The following references were used during the development of the Online Music Player
web app project:
.HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
In addition to the above references, various online tutorials, forums, and documentation
resources were used to develop the web app. All sources were properly cited and referenced in
the project documentation.
PUJA KUMARI 2002875
PUJA KUMARI 2002875
PUJA KUMARI 2002875
PUJA KUMARI 2002875
