Skip to content

Commit 0fec1f1

Browse files
devhimalldevhimall
authored
Merge pull request #6 from devhimall/WDT24-20
feat (WDT24-20):: music player added
2 parents cb9e2a7 + b77f4fd commit 0fec1f1

6 files changed

Lines changed: 400 additions & 0 deletions

File tree

‎audioplayer/assets/maile.mp3‎

2.03 MB
Binary file not shown.

‎audioplayer/audioplayer.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Audio Player</title>
8+
<link rel="stylesheet" href="/javascript/audioplayer/styles/audioplayer.css">
9+
10+
</head>
11+
12+
<body>
13+
<section class="audio-player-wrapper">
14+
<header class="audio-player-wrapper__heading">
15+
<h1>Hi, this is audio or music player build using ismple html, css, and javascript</h1>
16+
<p>This is a simple audio player with the functinality of play, pause, next, and farward. Here i have used
17+
custom timing, next, pause, play and back functionality.</p>
18+
</header>
19+
<div class="audio-player-wrapper__audio-wrapper">
20+
<div class="audio-player-wrapper__image">
21+
<img src="/javascript/day5/assets/image1.jpg" alt="circle profile image of the audio player"
22+
aria-label="This is the cover image of the audio.">
23+
</div>
24+
25+
<figure>
26+
<audio id="audio-player" class="audio-player-wrapper__audio-player"
27+
src="/javascript/audioplayer/assets/maile.mp3">
28+
</audio>
29+
<figcaption>Maile Covered by John Chamling Rai</figcaption>
30+
<div id="audio-player-wrapper__progressContainer">
31+
<input id="progressBar" type="range" min="0" max="100" value="0">
32+
</div>
33+
<p class="audio-player-wrapper__timer">00:00</p>
34+
<div class="audio-player-wrapper__controls">
35+
<button class="audio-player-wrapper__skipPrev">
36+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
37+
class="bi bi-skip-start" viewBox="0 0 16 16">
38+
<path
39+
d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L5 8.752V12a.5.5 0 0 1-1 0zm7.5.633L5.696 8l5.804 3.367z" />
40+
</svg>
41+
</button>
42+
<button class="audio-player-wrapper__play">
43+
44+
<!-- by default the icons is play -->
45+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
46+
class="bi bi-play-fill" viewBox="0 0 16 16">
47+
<path
48+
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393" />
49+
</svg>
50+
</button>
51+
52+
<button class="audio-player-wrapper__nextSkip"><svg xmlns="http://www.w3.org/2000/svg" width="16"
53+
height="16" fill="currentColor" class="bi bi-skip-end" viewBox="0 0 16 16">
54+
<path
55+
d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.713 3.31 4 3.655 4 4.308v7.384c0 .653.713.998 1.233.696L11.5 8.752V12a.5.5 0 0 0 1 0zM5 4.633 10.804 8 5 11.367z" />
56+
</svg>
57+
</button>
58+
</div>
59+
</figure>
60+
61+
62+
</div>
63+
</section>
64+
65+
66+
<!-- script -->
67+
<script src="/javascript/audioplayer/js/audioplayer.js"></script>
68+
</body>
69+
70+
</html>

‎audioplayer/js/audioplayer.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
let audioPlayer = document.getElementById("audio-player")
2+
let progressBar = document.getElementById("progressBar")
3+
let timer = document.querySelector(".audio-player-wrapper__timer")
4+
let audioPlayerWrapper = document.querySelector(".audio-player-wrapper")
5+
6+
// controls
7+
let playBtn = document.querySelector(".audio-player-wrapper__play")
8+
// let pauseBtn = document.querySelector(".audio-player-wrapper__pause")
9+
let skipPrev = document.querySelector(".audio-player-wrapper__skipPrev")
10+
let skipNext = document.querySelector(".audio-player-wrapper__nextSkip")
11+
12+
document.addEventListener("DOMContentLoaded", () => {
13+
audioPlayer.addEventListener("timeupdate", () => {
14+
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100
15+
progressBar.value = progress
16+
17+
// calculating the the total time
18+
let totalSeconds = Math.floor(audioPlayer.duration)
19+
let minutes = Math.floor(totalSeconds / 60)
20+
let seconds = totalSeconds % 60
21+
22+
// Calculating the minutes, seconds based on real time update
23+
let changeTotalSeconds = Math.floor(audioPlayer.currentTime)
24+
let changeMinutes = Math.floor(changeTotalSeconds / 60)
25+
let changeSeconds = changeTotalSeconds % 60
26+
27+
timer.innerHTML = ` ${changeMinutes
28+
.toString()
29+
.padStart(2, "0")}:${changeSeconds
30+
.toString()
31+
.padStart(2, "0")} / ${minutes}: ${seconds.toString().padStart(2, "0")}`
32+
})
33+
34+
audioPlayer.addEventListener("play", () => {
35+
// changing the icons based on play and pause behavior of the audio
36+
playBtn.innerHTML = `
37+
<svg
38+
xmlns="http://www.w3.org/2000/svg"
39+
width="16"
40+
height="16"
41+
fill="currentColor"
42+
class="bi bi-pause"
43+
viewBox="0 0 16 16"
44+
>
45+
<path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5" />
46+
</svg>
47+
`
48+
49+
// if audio is playing and we click on playBtn, this event is call.
50+
playBtn.addEventListener("click", () => {
51+
audioPlayer.pause()
52+
})
53+
})
54+
55+
audioPlayer.addEventListener("pause", () => {
56+
// changing the icon based on play and pause functionality
57+
playBtn.innerHTML = `
58+
<svg
59+
xmlns="http://www.w3.org/2000/svg"
60+
width="16"
61+
height="16"
62+
fill="currentColor"
63+
class="bi bi-play-fill"
64+
viewBox="0 0 16 16"
65+
>
66+
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393" />
67+
</svg>
68+
`
69+
70+
// this call if audio is pause
71+
playBtn.addEventListener("click", () => {
72+
audioPlayer.play()
73+
})
74+
})
75+
76+
// by default it is call when we click on playBtn
77+
playBtn.addEventListener("click", () => {
78+
audioPlayer.play()
79+
})
80+
81+
skipPrev.addEventListener("click", () => {
82+
audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10)
83+
})
84+
85+
skipNext.addEventListener("click", () => {
86+
audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime + 10)
87+
})
88+
})
89+
90+
// =================================== start of the styles
91+
// audioPlayerWrapper.innerHTML = ""
92+
audioPlayerWrapper.style.background = "#FFF5E4"
93+
94+
// ===================================== end of the styles

‎audioplayer/styles/audioplayer.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
2+
* {
3+
margin: 0px;
4+
padding: 0px;
5+
box-sizing: border-box;
6+
font-family: "Courier Prime", monospace;
7+
font-weight: 400;
8+
font-style: normal;
9+
}
10+
11+
.audio-player-wrapper {
12+
min-height: 100vh;
13+
width: 100vw;
14+
height: 100%;
15+
padding-top: 50px;
16+
padding-inline: 50px;
17+
margin-bottom: 100px;
18+
display: flex;
19+
align-items: center;
20+
flex-direction: column;
21+
gap: 50px;
22+
}
23+
.audio-player-wrapper__heading {
24+
text-align: center;
25+
line-height: 40px;
26+
}
27+
.audio-player-wrapper__heading h1 {
28+
font-size: 32px;
29+
}
30+
.audio-player-wrapper__heading p {
31+
font-size: 20px;
32+
}
33+
.audio-player-wrapper__audio-wrapper {
34+
border: 1px solid #c1d8c3;
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
justify-content: space-around;
39+
gap: 20px;
40+
height: 500px;
41+
width: 400px;
42+
border-radius: 10px;
43+
padding: 0px 50px;
44+
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
45+
}
46+
.audio-player-wrapper figure {
47+
width: 100%;
48+
display: flex;
49+
flex-direction: column;
50+
gap: 15px;
51+
}
52+
.audio-player-wrapper figure figcaption {
53+
line-height: 30px;
54+
text-transform: capitalize;
55+
}
56+
.audio-player-wrapper__image {
57+
border: 1px solid orangered;
58+
overflow: hidden;
59+
height: 180px;
60+
width: 180px;
61+
border-radius: 100%;
62+
filter: drop-shadow(0 0 1.5rem #94c0f3);
63+
animation: circle 2s infinite alternate;
64+
}
65+
@keyframes circle {
66+
0% {
67+
scale: 1;
68+
}
69+
50% {
70+
scale: 0.98;
71+
}
72+
100% {
73+
scale: 1;
74+
}
75+
}
76+
.audio-player-wrapper__image img {
77+
height: 100%;
78+
width: 100%;
79+
-o-object-fit: cover;
80+
object-fit: cover;
81+
-o-object-position: top;
82+
object-position: top;
83+
}
84+
.audio-player-wrapper__controls {
85+
display: flex;
86+
justify-content: space-between;
87+
padding-block: 20px;
88+
}
89+
.audio-player-wrapper__controls button {
90+
display: flex;
91+
justify-content: center;
92+
align-items: center;
93+
height: 30px;
94+
width: 30px;
95+
border: none;
96+
background: none;
97+
}
98+
.audio-player-wrapper__controls button svg {
99+
height: 50px;
100+
width: 50px;
101+
fill: #0075ff;
102+
}
103+
104+
#audio-player-wrapper__progressContainer {
105+
width: 100%;
106+
}
107+
#audio-player-wrapper__progressContainer input[type=range] {
108+
width: 100%;
109+
height: 100%;
110+
}/*# sourceMappingURL=audioplayer.css.map */

‎audioplayer/styles/audioplayer.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)