Music player website

Project submitted in partial fulfilment of requirements

for the award of degree in

BACHELOR OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY
Submitted by
320126511092– N.ANUSHA PREETHI

320126511108-V.HIMA BINDU

320126511109-Y.VIKRAM

321126511L11 – B.HEMANTH

ANITS
ANIL NEERUKONDA INSTITUTE OF TECHNOLOGY
AND SCIENCES (UGC AUTONOMOUS)
( permanently Affiliated to AU Approved by AICTE
and Accredited by NBA&NAAC with ‘A’ Grade)
Sangivalasa, Bheemunipatnam Mandal, Visakhapatnam Dist(A.P)
ABSTRACT

Abstract - Music has been a way for people to reduce their stress
and since we all have a variety of emotions, music comes in all
type of styles. For music system, you need one app for sound
equalizing another for video streaming of songs and many others.
Our idea is to integrate all these into a single one which would be
a boon to the music lovers. This application integrates the Intent
APIs of various applications and mapping the data from various
databases which is to be segregated and they are integrated onto
our music player. Some of the features of this application includes,
YouTube linking, Song Mixing, Karaoke and lyrics Syncing etc.,
Also the emotions of the user will be traced using Artificial Neural
Network technology. Primarily,the login credentials of every user
will be stored in database and here PHP is used. Instead of
downloading multiple apps and wasting all storage space, this
proposal reduces the use of a lot of applications and will be a
complete music solution.
INTRODUCTION
The application development sector is advancing day by day.
Innovative ideas are born each minute to ease people’s work; if
not big or groundbreaking, but constructive and leading
towards a better tomorrow. Sound and graphics are two
intriguing areas of technology which attract the music lovers to
explore more into their depths. With the new developments in
technology the sophistication level in software has also
increased. Also with the idea of “keeping it simple”, developing
sophisticated applications is a challenge. Facial expressions
explains a lot in determining the mood of a person. Whether
he’s sad, or angry, happy, every emotion on his way has a
unique of expressing it. This application work different from
traditional application. The user need not go and surf through
the songs to play the music. Instead this application recognizes
his mood and play music accordingly. It is impossible to
download many applications for a single domain of work. For
example., if you are interested in music, it is not applicable to
download individual apps for music player, sound equalizer, DJ
mixer, video streamer, etc. This application acts as an
integration to some of the most common existing applications
that people use. With the current music application itself, they
can work on these features. This works as an add-on to some
existing applications
SYSTEM REQUIREMENTS

HARDWARE REQUIREMENTS
An Intel based central processing unit capable of running any sort of
windows operating system such as Pentium based workstation.
1.Minimum 64 MB RAM (128 MB Desirable) at server.
2.Minimum 60 MB of free disk space for files.
3.A CD Rom drive
4.Minimum 48 MB of RAM at workstation.

SOFTWARE REQUIREMENTS
The software requirements are as follows.
1. Windows 10 or Above
SOFTWARE FRONT END
2. The front end for project is html and css

APPLICATION REQUIREMENTS

1.codesandbox

2.Atom ide
 PROBLEM STATEMENT
This projects aims to develop an online website for customers with the
goal so that it is very easy to shop your loved things from a extensive
number of online shopping sites available on the web. With the help of
this you can carry out an online shopping from your home. Here is no
compelling reason to go to the crowed stores or shopping centersduring
festival seasons. You simpy require a PC or a laptop and one important
payment sending option to shop online.To get to this online shopping
system all the customers will need to have a email and password to
login and proceed your shopping . The login credentials for an
onlineshopping system are under high security and nobody will have the
capacity to crack it easily. Upon successful login the customers can
purchase a wide range of things such as mobiles, books, apparel,
jewellery, infant care, gifts, tools, etc. can be dispatched using online
shopping system. Not justthese, you can also purchase from outside
nations by few clicks on your mouse. And of course you will get your
requested ordered items at your door step.
Introduction to Web Technology
Technology:
Technology is a body of knowledge devoted to create tools, processing
actions and the extracting of materials. The term “technology” is wide,
and everyone has their way of understanding its meaning. We use
technology to accomplish various tasks in our daily lives, i.e we can
describe technology as products and processes used to simplify our daily
lives. We use technology to extend our abilities, making people the most
crucial part of any technological system.

Web Technology:

Web Technology refers to the means by which computers communicate

with each other using markup languages and multimedia packages. It
gives us a way to interact with hosted information, like websites. Web
Technology involves the use of Hypertext Markup Language (HTML) and
Cascading Style Sheet(CSS).Importance of web technologies is to allow
companies to design a certain image and to attract and generate
customers loyalty

Website:
Website is a collection of related web pages that may contain text,
images, audio and video. The first page of the website is called home
page. Each website has specific internet address i.e Uniform Resource
Locator(URL) that you need to enter in you browser to access a website.
Wikipedia and Giphy are one of the most popular websites. A well
maintained website can help you gain a competitive advantage in your
industry and improve your business image.

WWW:
WWW stands for World Wide Web, which means a collection of
websites or web pages stored in the web servers and connected to a
local computer through internet. These websites contain text pages,
digital images, audios, videos, etc… Users can access the content of
these sites from any part of the world over the internet using their
devices such as computers, laptops, cell phones, etc... The WWW,
along with the internet, enables the retrieval and display.
Types of websites:
1) Static Website:
Static website is the basic type of website that is easy to create.
You don’t need the knowledge of web programming and
database to design to create a static website. Its web pages are
coded in HTML. The codes are fixed for each page so the
information
contained in the page does not change and it looks like a printed
page. Some of the top static website generators are Jekyll, Hexo,
Hugo, Octopress and Pelican. 2) Dynamic Website:
Dynamic Website is a collection of dynamic web pages whose
content changes dynamically. It accesses content from a database or
Content Management System(CMS). Therefore, when you alter or
update the content of the database, the content of the website is
also altered or updated. Examples include CMS, blogs which allow
users to comment on a site, users uploading documents, discussion
blog boards etc..

Web Application:
A web application is a computer program that utilizes web browsers
and web technology to perform tasks over the Internet. Web
applications use the combination of server-side scripts(PHP and ASP)
to handle the storage and retrieval of the information, and client side
scripts(JavaScript and HTML) to present information to users. This
allows users to interact with the company using online forms,
content management systems, shopping carts and more. Web
applications include online forms, shopping carts, word processors,
spreadsheets, video and photo editing, file conversion, file scanning,
and email programs such as G-mail, Yahoo, AOL. Popular
applications include Google Apps and Microsoft 365
HTML is an acronym which stands for Hyper Text Markup Language
which is used for creating web pages and web applications. “Tim
Berners-Lee” is the father of HTML. The first available description of
HTML was a document called “HTML Tags” proposed in late 1991.

Hyper Text :

Hyper Text 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
web page, you have clicked on a hypertext. Hyper Text 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..

HTML Versions :

Since the time HTML was invented there are lots of HTML versions in
the market and are as follows:

1) HTML 1.0: The first version of HTML was 1.0, which was the bare
bones version of HTML language, and was released in 1991.

2)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.

3) 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.

4) 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 style
sheets (CSS) and scripting ability for various multimedia elements.

5) HTML 5: HTML5 is the newest version of Hyper Text Markup

language. The first draft of this version was announced in January
2008. It is still under development.
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 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
Types of HTML tags:
Tags are instructions that are embedded directly into the text of a
HTML document. Each HTML tag describes that the browser should do
something instead of simply displaying the text. In HTML, the tags
begin with () HTML tags can be of two types. They are:

1) Paired tags

2) Unpaired tags

Paired Tags:

A tag is said to be a paired tag if the next is placed between a tag and
its companion tag. In tags, the first tag is referred to as Opening Tag
and the second tag is referred to as Closing tag. Example: This text is in
italics. Here is called opening tag and is called closing tag.

Unpaired Tags:
An unpaired tag does not have a companion tag or closing tag.
Unpaired tags are also known as Singular or Stand-Alone Tags.
Example: <br> ,<hr>
Formatting Tags:
We manage the size of the font, underline part of the text, make the
text bold, italic etc..by using tags like , ,etc.. Tables, Div, span tags are
used for layout and formatting of content.

Page Structure Tags:

Description, title, head, body etc.. are part of the page structure tags.
They are part of the basic html page and do not directly affect the
formatting of text or image. Examples are

Control tags:
Form tags, Script tags, Radio Buttons etc.. are part of control tags.
These tags are used to manage content or manage external scripts or
libraries(JQuery, Bootstrap). All form tags like input text box,
dropdown list, radio buttons etc.. are used for interaction with user.
These tags can be formatted by using style properties.
 Program code

home page code:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>TUNE OUT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"
type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.container {
padding: 80px 120px;
}
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}

/* Add a gray color to all navbar links */

.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}

/* On hover, the links will turn white */

.navbar-nav li a:hover {
color: #fff !important;
}

/* The active link */

.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}

/* Remove border color from the collapsible button */

.navbar-default .navbar-toggle {
 border-color: transparent;
}

/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}

/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}

/* On hover, the dropdown links will turn red */

.dropdown-menu li a:hover {
background-color: red !important;
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><i>TUNE OUT</i></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="file:///C:/Users/hp/wt1.html"><b>HOME</b></a></li>
<li><a href="file:///C:/Users/hp/AppData/Local/Temp/Rar$EXa19544.44990/music
%20gallery/index.html"><b>PLAYLISTS</b></a></li>
<li><a href="file:///C:/Users/hp/wt1.html"><b>ABOUT</b></a></li>
</div>
</div>
</nav>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="C:\Users\hp\Downloads\tunee.jpg" alt="New York" width="1500"
height="600">
<div class="carousel-caption">
<p>“Life is one grand, sweet song so start the music.” </p>
 <h3>— Ronald Reagan </h3>
</div>
</div>

<div class="item">
<img src="C:\Users\hp\Downloads\ws.jpg" alt="Chicago" width="1500" height="800">
<div class="carousel-caption">
<p>“Music can change the world.” </p>
<h3>— Ludwig van Beethoven</h3>
</div>
</div>

<div class="item">
<img src="C:\Users\hp\Downloads\wt.jpg" alt="Los Angeles" width="1500"
height="500">
<div class="carousel-caption">
<p>“The true beauty of music is that it connects people. It carries a message, and
we, the musicians, are the messengers.” </p>
<h3>— Roy Ayers</h3>
</div>
</div>
</div>

<!-- Left and right controls -->

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<div class="container text-center">

<h3>TUNE OUT</h3>
<p><em>We love music!</em></p>
<p><i>music is an escape</i></p>
<p style=font-style:oblique >"Escape who you are,your tears,your fears,and forget what's
wrong....."</p>
<br>
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Neha Kakkar</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="C:\Users\hp\Downloads\nk.jpg" class="img-circle person" alt="Random
Name" width="255" height="275">
</a>
<div id="demo" class="collapse">
<p>Indian playback singer</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Sid Sriram</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="C:\Users\hp\Downloads\ss.jpg" class="img-circle person" alt="Random
Name" width="255" height="255">
</a>
<div id="demo2" class="collapse">
<p>Indian Carnatic musician, music producer</p>
<p>playback singer, and songwriter</p>

</div>
 </div>
<div class="col-sm-4">
<p class="text-center"><strong>Arijit Singh</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="C:\Users\hp\Downloads\as.jpg" class="img-circle person" alt="Random
Name" width="255" height="255">
</a>
<div id="demo3" class="collapse">
<p>Indian singer and music composer</p>

</div>
</div>
</div>
</div>
<div class="about-section">
<h1>About Us </h1>
<p>Facebook,instagram are great platforms to promote music.</p>
<p>However, a website is permanent and not subjected to any changes.</p>
<p>You can direct anybody, at any time, to visit our website.</p>
</div>
</body>
</html>

<!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">

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- custom css file link -->

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

<!-- custom js file link -->

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

</head>
<body>

<div class="container">

<h1 class="heading"> music playlist </h1>

<div class="box-container">

<div class="box" data-src="images/music-1.mp3">

<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-1.png" alt="">
</div>
<div class="content">
 <h3>NEFFEX cold</h3>
</div>
</div>

<div class="box" data-src="images/music-2.mp3">

<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-2.png" alt="">
</div>
<div class="content">
<h3>rize up</h3>
</div>
</div>

<div class="box" data-src="images/music-3.mp3">

<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-3.png" alt="">
</div>
<div class="content">
<h3>arround the world</h3>
</div>
</div>

<div class="box" data-src="images/music-4.mp3">

<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-4.png" alt="">
</div>
<div class="content">
<h3>THNK U jay someday</h3>
</div>
</div>

<div class="box" data-src="images/music-5.mp3">

<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-5.png" alt="">
</div>
<div class="content">
<h3>NEFFEX life</h3>
</div>
</div>

<div class="box" data-src="images/music-6.mp3">

<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-6.png" alt="">
 </div>
<div class="content">
<h3>fun house</h3>
</div>
</div>

</div>

</div>

<div class="music-player">
<div id="close-player" class="fas fa-angle-up"></div>
<h3 class="music-title">(play your song)</h3>
<audio src="" controls></audio>
</div>

</body>
</html>

*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-transform: capitalize;
text-decoration: none;
transition: .2s linear;
}

.container .heading{
text-align: center;
padding:10px;
color:#333;
font-size: 35px;
border-bottom: 3px solid #333;
}

.container .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap:20px;
padding:20px 9%;
background: #eee;
}

.container .box-container.active{
padding-bottom: 150px;
}

.container .box-container .box{

border-radius: 10px;
background:#fff;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
padding:15px;
cursor: pointer;
}

.container .box-container .box .image{

height:540px;
width: 100%;
overflow: hidden;
border-radius: 10px;
position: relative;
}

.container .box-container .box .image img{

height:100%;
width:100%;
object-fit: cover;
}

.container .box-container .box .image .play{

position: absolute;
top:0; left:0;
height: 100%;
width:100%;
background: rgba(0,0,0,.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
display: none;
}

.container .box-container .box:hover .image .play{

display: flex;
}

.container .box-container .box .image .play i{

font-size: 100px;
color:#fff;
}

.container .box-container .box .content{

padding-top: 15px;
}

.container .box-container .box .content h3{

font-size: 20px;
color:#333;
}

.music-player{
position: fixed;
bottom: -125px; left:0; right:0;
background: #fff;
z-index: 1000;
}

.music-player.active{
bottom: 0;
}
.music-player .music-title{
font-size: 25px;
margin-bottom: 5px;
border-top: 3px solid #333;
border-bottom: 1px solid #333;
text-align: center;
color:#333;
padding:10px;
}

.music-player audio{
width: 100%;
}

.music-player audio::-webkit-media-controls-enclosure{
border-radius: 0;
background: #fff;
}

.music-player #close-player{
position: absolute;
top:-50px; right:5px;
height: 50px;
width: 55px;
line-height: 50px;
cursor: pointer;
font-size: 30px;
color:#333;
background: #fff;
border:3px solid #333;
border-bottom: none;
text-align: center;
}

@media (max-width:768px) {
.container .box-container{
padding:20px;
}
}

@media (max-width:450px) {
.container .box-container{
grid-template-columns: 1fr;
}

.container .box-container .box .image{

height: 300px;
}
}

let closePlayer = document.querySelector('#close-player');

let musicPlayer = document.querySelector('.music-player');
let boxContainer = document.querySelector('.container .box-container');

closePlayer.onclick = () =>{
closePlayer.classList.toggle('fa-times');
musicPlayer.classList.toggle('active');
 boxContainer.classList.toggle('active');
}

let boxes = document.querySelectorAll('.container .box-container .box');

boxes.forEach(box =>{

box.onclick = () =>{
let src = box.getAttribute('data-src');
let text = box.querySelector('.content h3').innerText;
closePlayer.classList.add('fa-times');
musicPlayer.classList.add('active');
boxContainer.classList.add('active');
musicPlayer.querySelector('h3').innerText = text;
musicPlayer.querySelector('audio').src = src;
musicPlayer.querySelector('audio').play();
}

});

OUTPUT:
Further Enhancement:
Our project will be able to implement in the future after

making some changes and modifications as we make our

project at a very low level. So the modifications that can be

done in our project are:

To make more playlists processing for the user and to

display more songs and favourites option to select the

favourite songs and make a playlist

Conclusion:
Through the development of music player ,we get a clear understanding of overall
process of the system. The core part of the music player is mainly composed of
main interface, file browsing and song listing, Grasping the development of the
music player has had the preliminary scale small features. Music player system
realized the basic function of player: play, pause, rewind and fastforward a, volume
adjustment is performed through the Android System Itself, play mode, song
search, seekbar, This development implicated the popular mobile terminal
development technology. This is the combination management of Java language
in the open source mobile platform based on Linux system configuration file. The
system realized the music player programming. This design of music player based
on Android system requires elaborate design of the music player framework, by
adopting ANDROID STUDIO 3.1.2 + Java language as technical support of this
system, with the Android plug-in tools, and combination of Latest Android SDK
version lead to the comprehensive and smoothly design and development of the
mobile terminal