ONLINE MUSIC PLAYER
By
Name:
Register No:
A PROJECT REPORT
Submitted to the
FACULTY OF MASTER OF COMPUTER
APPLICATIONS
In partial fulfillment of the requirements
for the award of the degree
of
MASTER OF COMPUTER APPLICATIONS
IN
DEPARTMENT OF COMPUTER APPLICATIONS
EXCEL ENGINEERING COLLEGE (Autonomous)
ANNA UNIVERSITY
CHENNAI-600025
DECEMBER– 2022
BONAFIDE CERTIFICATE
Certified that this project report titled ONLINE MUSIC PLAYER is the bonafide
work of GOPI (Reg. No: 730921632008) who carried out the project under my
supervision. Certified further, that to the best of my knowledge the work reported
herein does not form part of any other project report or dissertation on the basis of
which a degree or award was conferred on an earlier occasion on this or any other
candidate.
--------------------------- --------------------------
-
Project Guide Head of the
Department
Mr.M.K.NAGESWARAN ,MCA.,MPhil., Mr.M.K.NAGESWARAN MCA.,MPhil.,
Assistant Professor HOD/ (ic) Assistant
Professor
Submitted for the Project Viva-Voce examination held on _____________.
--------------------------- --------------------
---
Internal Examiner External Examiner
DECLARATION
I affirm that the project work titled ONLINE MUSIC PLAYER being
submitted in partial fulfillment for the award of MCA is the original work carried out
by me. It has not formed the part of any project work submitted for award of any degree
or diploma, either in this or any other University.
Signature of the Candidate
GOPI M
Register No: 730921632008
I certify that the declaration made above by the candidate is true.
Signature of Guide
Mr.M.K.NAGESWARAN MCA.,MPhil.,
HOD /(ic)
Dept. Of Master Of Computer Applications,
Excel Engineering College.
ACKNOWLEDGEMENT
I would like to take this opportunity to express my gratitude to all those contribution
to this project can never be forgotten.
I wish to express my deep sense of gratitude and thankfulness to Chairman,
Prof.Dr.A.K.Natesan M.Com.,MBA.,P.hD.,FTA Excel Group Of Institutions and
Vice-Chairman,Dr.N.MathanKarthick M.B.B.S., M.H.S PHF Excel Group Of
Institutions, Komarapalayam for providing an opportunity to complete this project
successfully.
I owe my gratitude to the Director, Excel Engineering College, Prof. Dr.
K.Bommanna Raja, Ph.D., for giving me an opportunity to exhibit my excellence. I
am indebted to Assistant Professor Mr.M.K.Nageswaran., MCA., M.Phil(ic) Head of
the Department, Department of Computer Applications, Excel Engineering College, for
her unparalleled guidance and help throughout the duration of this project.
I express my gratefulness to my project coordinator Mr.M.K.Nageswaran.,
MCA.,M.Phil HOD/(ic) & ASSISTANT PROFESSOR, Department of Computer
Applications, Excel Business School, for all the necessary help and support rendered to
me throughout the project.
I express my sincere thanks to my guide Mr.M.K.Nageswaran.,MCA.,M.Phil
HOD/(ic) & ASSISTANT PROFESSOR, Department of Computer Applications,
Excel Business School, for the necessary support and guidance rendered to me
throughout the project.
S.NO TITLE PAGE NO.
ABSTRACT
1. INTRODUCTION
2. SYSTEM SPECIFICATION
2.1 HARDWARE SPECIFICATION
2.2 SOFTWARE SPECIFICATION
3.
SYSTEM REQUIREMENT ANALYSIS
3.1 System Requirement Analysis
4. PROJECT WORKS
4.1 MUSIC PLALYER
4.2 UPLOAD AND MANAGE SONG
4.3 ALBUM DETAIL
4.4 CRUD OPRATION
4.5 CODE PART
5. SYSTEM ANALYSIS
5.1 EXISTING SYSTEM
5.2 PROPOSED SYSTEM
6 PROCEDUAL DESIGN
6.1 USECASE DAIGRAM
6.2 CLASS DAIGRAM
6.3 ACTIVITY DAIGRAM
7. SOURCE CODE
8. SCREEN SHOT
9. REFERENCE
10. .STRENGTHS
11. FUTURE ENHANCEMENT
CONCLUSION
12.
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 JAVASCRIPT Framework server 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 importance of the way the invisible part of the site is implemented—the code, the
database, and so on. The visual part of a 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.
INTRODUCTION
This is a project named Web Based online Music Player.This project is done
using HTML, CSS, and JAVASCRIPT. If you are searching for a simple and lightweight
solution to enable music on your website, regardless of the user's internet browser, the best
solution is to use a media player that is compatible with Flash as it is normally found on most
browsers. Be careful of breaching copyright law if you are playing commercial tracks that you
do not have the rights to, as it can result in a costly lawsuit. It is possible to obtain broadcasting
rights, allowing you to play copyrighted music. There are, however, copyright-free songs that
you can use on your site without fear of legal action. And if this project can help people become
more aware of their surroundings then it’d be a blessing for me.SoundManager brings reliable
cross-platform audio to JavaScript.
FEATURES
* Simple to use (use of directives)
* Playlist support
* Soundcloud support
2.SYSTEM SPECIFICATION
2.1 HARDWARE SPECIFICATION
• Intel i3 Generation 3 Processor or equivalent or higher
• 2 GB RAM or higher
• 20 GB HDD space or higher
• Intel i3 Generation 3 Processor or equivalent or higher
• 2 GB RAM or higher
• 20 GB HDD space or higher
2.2 SOFTWARE SPECIFICATION
● Operating system : Windows family
● Front End : HTML,C, Java Script
Front End : HTML, Java script
3.SYSTEM REQUIREMENT ANALYSIS
3.1 System Requirement Analysis
The System Requirement Specification provides a narrative description of each
subsystem and a definition of all data that flow between subsystems. The System
Requirement Specification forms the foundation for all engineering work that follows. These
specifications analyse the behaviour of the system with the external events and the
functionality of the system elements. This phase comes into picture while developing project
when analysis phase is over. This step takes care that whatever problem has been recognized
is correct because the user requirements keeps changing and for creation ofsuccessful product
it’s necessary that the software deliver goods at every level of work. For this the requirements
and the problem to be solved must be thoroughly known and then they must be worked upon.
It specifies the goals and objectives of the project, describing its context with system as a
whole. System requirement analysis bridges the gap between system level requirements
engineering a find software design. Requirement engineering activities result in the
specification of software’s operational characteristics, indicate software’s interface with other
system elements, and establish constraints that softwaremustmeet.Requirement analysis
allowsthe software engineerto refine the software allocation and build models of data,
functional and behavioral domains that will be treated by software. Requirement analysis
provides the software designer with a representation of information, function, and behavior
that can be translated to data, architectural, interface, and component level designs. Finally,
the requirement specification provides the developer and the customer with the meansto
assess quality software is built.
Planning
●Planning is an objective of each and every activity, where we want to discover things that
belong to the project. An important task in creating a software program is extracting the
requirements or requirements analysis.
• Implementation, testing and documenting Implementation is the part of the process
engineers program the code for the project. 7 Software testing is an integral and important
phase of the software development process. This part of the process ensures that defects are
recognized as soon as possible. Documenting the internal design of software for the purpose
of future maintenance and enhancement is done throughout development. This may also
include the writing of an API, be it external or interna
Deployment and maintenance
●Deployment starts after the code is appropriately tested, approved for release, and sold or
otherwise distributed into a production environment. This may involve installation,
customization (such as by setting parameters to the customer's values), testing, and possibly an
extended period of evaluation. Maintaining and enhancing software to cope with newly
discovered faults or requirements can take substantial time and effort, as missed requirements
may force redesign of the software.
4.PROJECT WORKS
4.1 MUSIC PLALYER
This is the main module; users can play their favorite uploaded music
from this page. First, by default, we will display the albums with album name and image.
User can click on any of their favorite albums to play the music. When user clicks on the
album image, we will play the first song of that album, by default. Users can add any number
of songs to their albums to play.
4.2 UPLOAD AND MANAGE SONG
After the user selects the album, we will check for the songs to be
added in the album. If there are no songs for the selected album, then we display the message
as "No Songs has been added in this Album". If album has songs, then we display our Shanu
Music Player. From this page, the user can change and play any songs from the list as per
his/her choice. In the player, we will display the album image and the title along with the
current playing song file name. In the list, we will also display singer name, music file name,
and description of the file. User can play, pause, and play next and previous songs of the list.
4.3 ALBUM DETAIL
In this module, we will manage album and music information. User
can add albums with images and song details and upload songs in the album.
4.4 CRUD OPRATION
Here, user can add album details with image.
Albums are nothing but it's a favorite or play list. First, user can create
albums and add all his/her favorite songs in that album. In the database,
we have created two tables. One is Album table (as master) and another
is music table (as details).
4.5 CODE PART
This is our main part as we will be adding all our music files to be played
in this detail table. Here, we select our album from combobox and add music details and
upload to our root 27 directory to play our songs. Users can add new songs, edit, and delete
the songs. We will see more detail in code part.
Working Principle
Working with WEBAPI Controller for CRUD
Select Controller and add an Empty Web API 2 Controller. Provide your name to the Web
API controller and click OK. Here, for our Web API Controller, we have given the name
"MusicAPIController".
As we have created Web API controller, we can see that our controller has been inherited
with ApiController. As we all know, Web API is a simple and easy way to build HTTP
Services for Browsers and Mobiles.
Web API has the following four methods as Get/Post/Put and Delete where:
• Get is to request for the data. (Select).
• Post is to create a data. (Insert).
• Put is to update the data.
• Delete is to delete data.
5.SYSTEM ANALYSIS
5.1 EXISTING SYSTEM
No system was being used properly previously by the administrator. The
administrator used inefficient way to store the record and 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 existing systems are as follows:
• Course of action is time consuming
• Songs searches are not that accurate
• Techniques are more complicated for the required application. Proper techniques
are not exposed, so the functioning is not intrigued
5.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 comfortable and
download whatever song he/she wishes. The listener can search for the song based on the
name of the artist, album, song or the name of 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 administered by an 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 user visiting the website to listen and download the song and the other is
admin who will be maintaining the whole system.
Requirement 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 and search the songs and listen
it, otherwise the user will not be able to listen and download 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 downloaded the song.
6.PROCEDUAL DESIGN
6.1USECASE DAIGRAM
U
S
. sF c a
2 i a g
6.2CLASS DAIGRAM
3 C D
F
i
i . l
6.3 ACTIVITY DAIGRAM
A t
favourites
6.4 FLOW CHART
6. SOURCE CODE
Intex.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="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.css"
/>
<title>Music Player</title>
</head>
<body>
<h1>Music Player</h1>
<div class="music-container" id="music-container">
<div class="music-info">
<h4 class="title" id="title"></h4>
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
</div>
</div>
<audio src="Agayam-Theepiditha.mp3"
id="audio"></audio>
<div class="img-container">
<img src="G:\potos\IMG_20220323_184311-01.jpg"
alt="music-cover" id="cover">
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fa fa-backward" aria-hidden="true"></i>
</button>
<button id="play" class="action-btn action-btn-big">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
<button id="next" class="action-btn">
<i class="fa fa-forward" aria-hidden="true"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Style.css
@import
url("https://fonts.googleapis.com/css2?family=Open+Sans:
wght@400;600;700&display=swap");
*{
outline: none;
box-sizing: border-box;
}
body {
background-image: linear-gradient(
0deg,
rgba(247, 247, 247, 1) 23.8%,
rgba(252, 221, 221, 1) 92%
);
font-family: "Open Sans", sans-serif;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.music-container {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
"use strict"
module.exports = {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-empty-line-before": [ "always", {
except: [
"blockless-after-same-name-blockless",
"first-nested",
],
ignore: ["after-comment"],
} ],
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always-single-line",
"at-rule-semicolon-newline-after": "always",
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"each",
"extend",
"for",
"function",
"if",
"include",
"mixin",
"while"
]
}
],
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always-multi-line", "block-opening-
brace-newline-after": "always-multi-line",
"block-opening-brace-space-after": "always-single-line",
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "short",
"comment-empty-line-before": [ "always", {
except: ["first-nested"],
ignore: ["stylelint-commands"],
} ],
"comment-whitespace-inside": "always",
"custom-property-empty-line-before": [ "always", {
except: [
"after-custom-property",
"first-nested",
],
.hotads__main_content-info-button button:first-child {
height: 1.5em;
border-radius: 0.2em 0 0 0.2em;
}
.hotads__main_content-info-button button:last-child {
height: 1.5em;
border-radius: 0 0.2em 0.2em 0;
padding: 20px 30px;
position: relative;
margin: 100px 0;
z-index: 10;
}
.img-container {
position: relative;
width: 110px;
}
.img-container::after {
content: "";
background-color: rgb(220, 21, 21);
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, 50%);
box-shadow: 0 0 0px 10px #000;
.img-container img {
border-radius: 50%;
object-fit: cover;
height: 110px;
width: inherit;
position: absolute;
bottom: 0;
left: 0;
animation: rotate 3s linear infinite;
animation-play-state: paused;
.music-container.play .img-container img {
animation-play-state: running;
}
@keyframes rotate {
from {
transform: rotate(0deg);
to {
transform: rotate(360deg);
}
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.action-btn {
background-color: #fff;
border: 0;
color: #dfdbdf;
font-size: 20px;
cursor: pointer;
padding: 10px;
margin: 0 20px;
.action-btn.action-btn-big {
color: #cdc2d0;
font-size: 30px;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
width: calc(100% - 40px);
padding: 10px 10px 10px 150px;
border-radius: 15px 15px 0px 0px;
position: absolute;
top: 0;
left: 20px;
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
z-index: 0;
}
.music-container.play .music-info {
opacity: 1;
transform: translateY(-100%);
}
.music-info h4 {
margin: 0;
}
.progress-container {
background-color: #fff;
border: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress {
background-color: #fe8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transform: width 0.1s linear;
Script.js
const musicContainer = document.getElementById("music-
container");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const audio = document.getElementById("audio");
const progress = document.getElementById("progress");
const progressContainer =
document.getElementById("progress-container");
const title = document.getElementById("title");
const cover = document.getElementById("cover");
// Songs Titles
const songs = ["happyrock", "jazzyfrenchy", "ukulele"];
// KeepTrack of song
let songIndex = 4;
// Initially load song details into DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src ='Aedho-Saigirai.mp3';
cover.src = `IMG_20220323_184311-01.jpg`;
}
//update next song
function loadsong(song){
title.innertext=song;
audio.scr='Agayam-Theepiditha.mp3';
cover.scr='IMG_20220323_184311-01.jpg';
// Play Song
function playSong() {
musicContainer.classList.add("play");
playBtn.querySelector("i.fa").classList.remove("fa-play");
playBtn.querySelector("i.fa").classList.add("fa-pause");
audio.play();
// Pause Song
function pauseSong() {
musicContainer.classList.remove("play");
playBtn.querySelector("i.fa").classList.add("fa-play");
playBtn.querySelector("i.fa").classList.remove("fa-pause");
audio.pause();
}
// Previous Song
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
// Next Song
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]);
playSong();
}
// Update Progress bar
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPerCent = (currentTime / duration) * 100;
progress.style.width = `${progressPerCent}%`;
// Set Progress
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
// Event Listeners
playBtn.addEventListener("click", () => {
const isPlaying = musicContainer.classList.contains("play");
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
// Change Song
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
// Time/Song Update
audio.addEventListener("timeupdate", updateProgress);
// Click On progress Bar
progressContainer.addEventListener("click", setProgress);
// Song End
audio.addEventListener("ended", nextSong);
7.SCREENSHOTS
INTEX PAGE
PLAYING SONG
8.REFERENCE
Book References
• The Node Beginner Book
• Learning How to Design Web Pages: “HTML AND CSS” DESIGN AND
BUILD WEBSITES, BY JON DUCKETT”
Website References
• https://www.w3schools.com/html/
• https://www.codecademy.com/learn/learn-css
• https://www.w3schools.com/js/js_classes.asp
9.STRENGTHS
1. Provides a better song listening experience to all users.
2. Fully automated system with single page application.
3. Easy design and implementation.
4. Implementing high level concepts such as java script and angular
module.
5. Extensible.
6. Robust.
7. Can be used at any locale without much changes required.
8. Cost Effective.
9. Space Age Technology.
10. Efficient working and good results.
11. Customizable.
10.FUTURE ENHANCEMENT
1. The application can be made more interactive and customizable.
2. The application can be trained more for better accuracy.
3. The application can be joined with other modules such some
websites that have to use a small part of music running in background
hence they can use API of this.
4. The project can be used to teach angularjs and node js basic fundamentals
of their functionality
11 .CONCLUSION
The project named Web Based Music Player has been studied successfully above.
All the requirements as well as working of the project along with the technology stack
used has been explained carefully keeping each and every detail in mind. The project
works completely fine and we may conclude that the project is still in its developing
stage. The project can be made better with time but right now too it works satisfactorily.
