Skip to content

Commit 4bdbc72

Browse files
22tushar22tushar
committed
feat:Add a MusicPlayer app #812 
1 parent f5f8747 commit 4bdbc72

6 files changed

Lines changed: 170 additions & 0 deletions

‎MusicPlayerApp/app.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const songs = [
2+
'assets/Apna Bana Le - Arijit Singh, Sachin-Jigar.m4a',
3+
'assets/Raah Mein Unse Mulaqat - Kumar Sanu, Alka Yagnik.m4a',
4+
'assets/Sab Tera - Armaan Malik, Shraddha Kapoor.m4a'
5+
// Add more songs as needed
6+
];
7+
8+
let currentSongIndex = 0;
9+
const audioPlayer = document.getElementById('audioPlayer');
10+
const durationDisplay = document.getElementById('duration');
11+
const seekbar = document.getElementById('seekbar');
12+
13+
function loadSong() {
14+
audioPlayer.src = songs[currentSongIndex];
15+
audioPlayer.load();
16+
updateUI();
17+
}
18+
19+
function updateUI() {
20+
durationDisplay.textContent = formatTime(0);
21+
seekbar.value = 0;
22+
}
23+
24+
function formatTime(seconds) {
25+
const minutes = Math.floor(seconds / 60);
26+
const remainingSeconds = Math.floor(seconds % 60);
27+
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
28+
}
29+
30+
function playPause() {
31+
if (audioPlayer.paused) {
32+
audioPlayer.play();
33+
} else {
34+
audioPlayer.pause();
35+
}
36+
}
37+
38+
function prevSong() {
39+
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
40+
loadSong();
41+
playPause();
42+
}
43+
44+
function nextSong() {
45+
currentSongIndex = (currentSongIndex + 1) % songs.length;
46+
loadSong();
47+
playPause();
48+
}
49+
50+
function seek() {
51+
const seekValue = seekbar.value;
52+
const seekTime = (seekValue / 100) * audioPlayer.duration;
53+
audioPlayer.currentTime = seekTime;
54+
}
55+
56+
audioPlayer.addEventListener('timeupdate', () => {
57+
durationDisplay.textContent = formatTime(audioPlayer.currentTime);
58+
seekbar.value = (audioPlayer.currentTime / audioPlayer.duration) * 100;
59+
});
60+
61+
audioPlayer.addEventListener('ended', nextSong);
62+
63+
loadSong();

‎MusicPlayerApp/assets/Apna Bana Le - Arijit Singh, Sachin-Jigar.m4a‎

10.1 MB
Binary file not shown.

‎MusicPlayerApp/assets/Raah Mein Unse Mulaqat - Kumar Sanu, Alka Yagnik.m4a‎

20.5 MB
Binary file not shown.

‎MusicPlayerApp/assets/Sab Tera - Armaan Malik, Shraddha Kapoor.m4a‎

9.07 MB
Binary file not shown.

‎MusicPlayerApp/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MusicPlayer App</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div id="musicPlayer">
11+
<h2>Music Player</h2>
12+
<audio id="audioPlayer" controls></audio>
13+
<div>
14+
<button onclick="prevSong()">Prev</button>
15+
<button onclick="nextSong()">Next</button>
16+
</div>
17+
<p id="duration">0:00</p>
18+
<input type="range" id="seekbar" value="0" step="1" min="0" max="100" onchange="seek()">
19+
</div>
20+
<script src="app.js"></script>
21+
</body>
22+
</html>

‎MusicPlayerApp/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
height: 100vh;
10+
background: linear-gradient(135deg, #3498db, #e74c3c);
11+
}
12+
13+
.music-container {
14+
background: linear-gradient(135deg, #1abc9c, #3498db);
15+
border-radius: 8px;
16+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
17+
overflow: hidden;
18+
width: 300px;
19+
text-align: center;
20+
}
21+
22+
.music-info {
23+
padding: 20px;
24+
color: #fff;
25+
}
26+
27+
.music-info h2 {
28+
margin: 0;
29+
font-size: 24px;
30+
}
31+
32+
.music-info p {
33+
color: #ecf0f1;
34+
margin: 5px 0;
35+
}
36+
37+
.music-controls {
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
gap: 20px;
42+
padding: 10px;
43+
}
44+
45+
button {
46+
background: none;
47+
border: none;
48+
cursor: pointer;
49+
outline: none;
50+
}
51+
52+
button img {
53+
width: 30px;
54+
}
55+
56+
.control-button {
57+
background-color: #ecf0f1;
58+
border-radius: 50%;
59+
padding: 10px;
60+
transition: background-color 0.3s ease;
61+
}
62+
63+
.control-button:hover {
64+
background-color: #bdc3c7;
65+
}
66+
67+
input[type="range"] {
68+
width: 80%;
69+
margin: 0 auto;
70+
display: block;
71+
}
72+
73+
.time {
74+
font-size: 14px;
75+
color: #ecf0f1;
76+
margin: 5px 0;
77+
}
78+
79+
.play img {
80+
display: none;
81+
}
82+
83+
.playing img {
84+
display: inline;
85+
}

0 commit comments

Comments
 (0)