Name of Institute: Y.B.
Patil Polytechnic, Akurdi,Pune
Name of Course: Diploma in Computer Engineering
Name of Subject: CSS
Course Code: 22519 Academic Year: 2024-25
Name of the Students:
Sr.No Roll No. Name
1. 3349 Mayank Bansal
2. 3305 Kamlesh Chandana
3. 3309 Prathamesh Gade
Class: TYCO(B) Semester: 5 Scheme: I
Title of the Project: Interactive Music Player
Name of Teacher:
CERTIFICATE
This is to certify that the Project Report Entitled
Prepare a report on Interactive Music Player.
Under the course: CSS (22519)
Is a Bonafide work carried out by
Sr.No Roll No. Name
1. 3349 Mayank Bansal
2. 3305 Kamlesh Chandana
3. 3309 Prathamesh Gade
In Partial Fulfillment of The Requirement For the Diploma in
Computer Engineering
During the Academic Year 2024-2025
Ms. Pragati Thorat Ms. Pooja Ahuja Dr. A. S Kondekar
(Project Guide) ( HOD ) (Principle)
ACKNOWLEDGEMENT
Firstly, we would like to express our special thanks of gratitude to our
subject teacher Ms. Pragati Thorat and principal Dr. A. S. Kondekar of
Y. B. Patil Polytechnic, Akurdi, Pune, who gave us the golden opportu-
nity to do this wonderful project of CSS on ‘Interactive Music
Player'.due to which we came to know about so many new things in the
field of computer science and we are really thankful to them for the
same.
We also thank them for their able guidance and support in completing
our project.
Secondly, we would also like to extent our gratitude to the Y.B. Patil
Polytechnic, Akurdi, Pune for providing us the facility required.
Thirdly, we would like to thank our parents and friends who helped us a
lot in finalizing this project within the limited time frame.
Lastly, thanks to our group members for co-operating and doing the
team work together.
INDEX
Sr.no Name
1. Introduction to the project
2. Project Requirements
3. Source code of the project
4. Output of the project
5. Conclusion
INTRODUCTION TO THE PROJECT
In an era where music streaming dominates the entertainment landscape,
creating an engaging and user-friendly platform for music lovers is es-
sential. Our project, the Interactive Music Player, aims to enhance the
listening experience by providing a seamless and dynamic interface for
users to explore, discover, and enjoy their favorite tracks.
The Interactive Music Player is designed with a focus on usability and
aesthetic appeal. It features a curated library of songs, allowing users to
easily navigate through an extensive collection while enjoying personal-
ized recommendations. The player includes intuitive controls for play,
pause, volume adjustment, and song selection, all wrapped in a visually
striking design that adapts to the currently playing track.
Key functionalities include:
Search Capability: Users can quickly find songs or artists through
a responsive search feature that supports exact name matching.
Dynamic User Interface: The interface updates in real-time, re-
flecting changes such as song selection, playback status, and vol-
ume levels, ensuring users remain engaged with the music.
Playlist Management: Users can easily navigate through their
playlists, allowing for a tailored listening experience that aligns
with their mood and preferences.
Visual Elements: Accompanying images and background gradi-
ents enhance the aesthetic appeal, creating an immersive environ-
ment that complements the audio experience.
By merging functionality with an elegant design, the Interactive Music
Player not only caters to the needs of music enthusiasts but also invites
exploration and enjoyment of diverse musical genres. This project repre-
sents a significant step towards redefining how users interact with music
technology, making it a must-try for anyone passionate about music.
Project Requirements: Interactive Music Player
To successfully develop the Interactive Music Player, the following re-
quirements are categorized into functional, non-functional, and technical
specifications.
1. Functional Requirements
Audio Playback Controls:
o Play, pause, stop, skip forward, and skip backward function-
ality.
o Volume control with a slider.
o Progress bar for tracking playback duration.
Song Management:
o Ability to load and display song details (title, artist, album
art).
o Support for a playlist of songs with the ability to add/remove
songs.
Search Functionality:
o Users can search for songs or artists by entering text and hit-
ting the Enter key.
o Search results should display matching songs and allow for
selection.
User Interface:
o Dynamic and responsive interface that updates based on user
interactions.
o Display album art and background gradients that change with
the currently playing song.
Accessibility Features:
o Keyboard navigation support for play/pause and volume controls.
o Tooltips or descriptions for buttons and controls.
2. Non-Functional Requirements
Performance:
o Fast loading times for songs and images.
o Smooth transitions between songs without noticeable lag.
Usability:
o Intuitive design that enhances user experience.
o Clear labeling of controls and functionalities.
Cross-Browser Compatibility:
o Ensure the player functions properly across major web
browsers (Chrome, Firefox, Safari, Edge).
Mobile Responsiveness:
o The player should be usable on various screen sizes, includ-
ing mobile devices and tablets.
3. Technical Requirements
Technologies:
o Frontend: HTML, CSS, JavaScript (with potential use of
frameworks like React or Vue.js for enhanced interactivity).
o Audio Format: Support for common audio formats such as
MP3, WAV, or OGG.
Assets:
o A collection of songs, including metadata (title, artist, album
art).
o Background images or gradients for the user interface.
Development Tools:
o Code editor (e.g., Visual Studio Code).
o Version control system (e.g., Git) for collaboration and code
management.
o Web server for local testing (e.g., Live Server extension in
VS Code).
Testing:
o Unit testing framework (e.g., Jest) for JavaScript functions.
SOURCE CODE OF THE PROJECT
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/
all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/
M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="main">
<p id="logo"><i class="fa fa-music" aria-hidden="true"></i> Music</p>
<!-- Left Section -->
<div class="left">
<img id="track_image" alt="Track Image">
</div>
<!-- Right Section -->
<div class="right">
<p id="title">Song Title</p>
<p id="artist">Artist Name</p>
<div class="volume">
<p id="icon"><i class="fa fa-volume-up" id="volume_icon"
onclick="muteSound()"></i></p>
<input type="range" min="0" max="100" value="100" id="volume_slider"
onchange="changeVolume()">
</div>
<div class="middle">
<button id="pre" onclick="previousSong()"><i class="fa fa-step-backward"></i></
button>
<button id="play" onclick="togglePlayPause()"><i class="fa fa-play"></i></button>
<button id="next" onclick="nextSong()"><i class="fa fa-step-forward"></i></button>
</div>
<div class="duration">
<input type="range" min="0" max="100" value="0" id="duration_slider"
onchange="changeDuration()">
</div>
</div>
</div>
<audio id="audio-player"></audio>
<script src="script.js"></script>
</body>
</html>
CSS CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/
all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/
M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="main">
<p id="logo"><i class="fa fa-music" aria-hidden="true"></i> Music</p>
<!-- Left Section -->
<div class="left">
<img id="track_image" alt="Track Image">
</div>
<!-- Right Section -->
<div class="right">
<p id="title">Song Title</p>
<p id="artist">Artist Name</p>
<div class="volume">
<p id="icon"><i class="fa fa-volume-up" id="volume_icon"
onclick="muteSound()"></i></p>
<input type="range" min="0" max="100" value="100" id="volume_slider"
onchange="changeVolume()">
</div>
<div class="middle">
<button id="pre" onclick="previousSong()"><i class="fa fa-step-backward"></i></
button>
<button id="play" onclick="togglePlayPause()"><i class="fa fa-play"></i></button>
<button id="next" onclick="nextSong()"><i class="fa fa-step-forward"></i></button>
</div>
<div class="duration">
<input type="range" min="0" max="100" value="0" id="duration_slider"
onchange="changeDuration()">
</div>
</div>
</div>
<audio id="audio-player"></audio>
<script src="script.js"></script>
</body>
</html>
Script JS Code :
const audio = document.getElementById('audio-player');
const playButton = document.getElementById('play');
const volumeSlider = document.getElementById('volume_slider');
const durationSlider = document.getElementById('duration_slider');
const trackImage = document.getElementById('track_image');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
let autoplayEnabled = false;
let isPlaying = false;
let currentSongIndex = 0;
const songs = [
{
name: "52Bars",
path: "music/song.mp3",
img: "images/karan.jpeg",
singer: "Karan Aujla, IKKY",
},
name: "Take IT Easy",
path: "music/song2.mp3",
img: "images/karan.jpeg",
singer: "Karan Aujla,IKKY"
},
name: "Winning Speech",
path: "music/song3.mp3",
img: "images/aujla2.jpg",
singer: "Karan Aujla,MXRCI",
},
name: "Goin Off",
path: "music/song4.mp3",
img: "images/karan2.jpeg",
singer: "Karan Aujla,MXRCI",
},
{
name: "ANTIDOTE",
path: "music/song5.mp3",
img: "images/img.jpeg",
singer: "Karan Aujla",
},
name: "Who They",
path: "music/song6.mp3",
img: "images/img.jpeg",
singer: "Karan Aujla,Yeah Proof",
},
name: "IDK How",
path: "music/song7.mp3",
img: "images/img.jpeg",
singer: "Karan Aujla,IKKY",
},
name: "Born To Shine ",
path: "music/song8.mp3",
img: "images/Goat.jpg",
singer: "Diljit Dosanjh",
},
name: "G.O.A.T ",
path: "music/song9.mp3",
img: "images/Goat.jpg",
singer: "Diljit Dosanjh",
},
name: "295 ",
path: "music/song10.mp3",
img: "images/295.jpg",
singer: "Sidhu Moose Wala",
},
];
const backgroundGradients = [
"linear-gradient(to right, #000000, #4a0000)",
"linear-gradient(to right, #000000, #4a0000)",
"linear-gradient(to right, #000000, #1a1919)",
"linear-gradient(to right, #000000, #131313)",
"linear-gradient(to right, #000000, #0c281e)",
"linear-gradient(to right, #000000, #0c281e)",
"linear-gradient(to right, #000000, #0c281e)",
"linear-gradient(to right, #000000, #a9a9a9)",
"linear-gradient(to right, #000000, #a9a9a9)",
"linear-gradient(to right, #000000, #4a0000)",
];
function loadSong(index) {
const song = songs[index];
audio.src = song.path;
trackImage.src = song.img;
title.textContent = song.name;
artist.textContent = song.singer;
// Set the gradient background
document.body.style.background = backgroundGradients[index];
function togglePlayPause() {
if (isPlaying) {
audio.pause();
playButton.innerHTML = '<i class="fa fa-play"></i>';
} else {
audio.play();
playButton.innerHTML = '<i class="fa fa-pause"></i>';
isPlaying = !isPlaying;
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);
audio.play();
function previousSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
loadSong(currentSongIndex);
audio.play();
function changeVolume() {
audio.volume = volumeSlider.value / 100;
function changeDuration() {
audio.currentTime = (durationSlider.value / 100) * audio.duration;
audio.addEventListener('timeupdate', () => {
durationSlider.value = (audio.currentTime / audio.duration) * 100;
});
audio.addEventListener('ended', () => {
if (autoplayEnabled) nextSong();
});
function muteSound() {
audio.muted = !audio.muted;
function toggleAutoplay() {
autoplayEnabled = !autoplayEnabled;
document.getElementById('auto').classList.toggle('active', autoplayEnabled);
loadSong(currentSongIndex);
OUTPUT OF THE PROJECT
CONCLUSION
The Interactive Music Player project successfully combines an
intuitive user interface with powerful audio playback functional-
ities, enhancing the overall music listening experience. By incor-
porating features like song management, search capabilities, and
dynamic visuals, the player invites users to explore and enjoy
their favorite tracks seamlessly.
As we continue to refine and expand upon this project, opportu-
nities for further enhancements—such as user authentication and
personalized recommendations—will be explored, ensuring the
player remains relevant in a rapidly evolving digital landscape.
Ultimately, this project stands as a testament to the potential of
technology in creating immersive and engaging music experi-
ences for users.
