Created a music player

RachitSahu26 · Jun 17, 2023 · 6ce08e1 · 6ce08e1
commit 6ce08e1
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 0 deletions.
diff --git a/IMG-20221204-WA0010-01.jpeg b/IMG-20221204-WA0010-01.jpeg
diff --git a/X2Download.app - Main Hoon Hero Tera Karaoke With Hindi Lyrics (128 kbps).mp3 b/X2Download.app - Main Hoon Hero Tera Karaoke With Hindi Lyrics (128 kbps).mp3
diff --git a/...n Hoon Hero Tera VIDEO Song - Armaan Malik, Amaal Mallik _ Hero _ T-Series (128 kbps).mp3 b/...n Hoon Hero Tera VIDEO Song - Armaan Malik, Amaal Mallik _ Hero _ T-Series (128 kbps).mp3
diff --git a/...IT _ Randeep Hooda, Richa Chadda _ Arijit Singh, Tulsi Kumar, Amaal Mallik (128 kbps).mp3 b/...IT _ Randeep Hooda, Richa Chadda _ Arijit Singh, Tulsi Kumar, Amaal Mallik (128 kbps).mp3
diff --git a/X2Download.app - Stranger Think - C418 (128 kbps).mp3 b/X2Download.app - Stranger Think - C418 (128 kbps).mp3
diff --git a/X2Download.app - ZAYN - Let Me (Official Video) (128 kbps).mp3 b/X2Download.app - ZAYN - Let Me (Official Video) (128 kbps).mp3
diff --git a/left.png b/left.png
diff --git a/music.css b/music.css
@@ -0,0 +1,90 @@
+*{
+    margin: 0;padding: 0;
+}
+body{
+    background-color: rgb(131, 130, 129);
+}
+.container{
+    background-color:white;
+width:333px;
+text-align: center;
+margin-left: 550px;
+margin-top:133px;
+box-shadow: 0,0,0.3px rgba(0,0,0.8px);
+padding: 20px;
+/* padding-top: 10px; */
+height: 550px;
+border-radius: 20px;
+}
+.img-area {
+    margin-top: 33px;
+    /* object-fit: cover; */
+background-color: yellow;
+border-radius: 50%;
+width: 250px;
+margin-left: 40px;
+height: 250px;
+}
+.img-area img{
+    border-radius: 50%;
+object-fit: cover;
+width: 100%;
+height: 100%;
+}
+
+.music-control{
+    margin-top: 29px;
+height: 73px;width: 300px;
+/* background-color: greenyellow; */
+padding: 20px;
+align-items: center;
+justify-content: space-between;
+display: flex;
+}
+.music-control img{
+    width: 53px;
+    height: 53px;
+    justify-content: space-between;
+
+}
+
+#pause-button{
+position: absolute;
+right: 711px;
+display: none;
+}
+#play-button:hover{
+    background-color:red;
+    border-radius: 30px;
+    box-shadow: 0 0.3rem 2rem 0.2rem rgba(0,0,0,0.4);
+    cursor: pointer;
+}
+#right-button:hover,#left-button:hover{
+    box-shadow: 0 0.3rem 2rem 0.2rem rgba(0,0,0,0.4);
+    cursor: pointer;
+    border-radius: 30px;
+
+}
+
+
+
+
+
+/* .............animation part....................... */
+
+
+.anime{
+    animation:imageRotate 3s linear infinite ;
+}
+
+@keyframes imageRotate{
+    from{
+transform: rotate(0deg);
+    }
+
+    to{
+        transform: rotate(360deg);
+
+    }
+}
+
diff --git a/music.html b/music.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music player app</title>
+<link rel="stylesheet" href="./music.css">
+</head>
+<body>
+    <div class="container">
+<div class="music-main">
+<h1>VRS</h1>
+<div class="music-details">
+    <h2 class="song-name">
+        Never let you go
+    </h2>
+<span  class="singer-name">
+    Justin Beiber
+
+</span>
+<audio src="./X2Download.app - ZAYN - Let Me (Official Video) (128 kbps).mp3" class="audio"></audio>
+    <!-- </h3> -->
+<div class="img-area">
+
+    <img src="./IMG-20221204-WA0010-01.jpeg" class="rotate-image">
+</div>
+<div class="music-control">
+
+    <img src="./left.png" id="left-button">
+    <img src="./pause.png" id="pause-button">
+
+    <img src="./play-button.png" id="play-button">
+
+    <img src="./right.png" id="right-button">
+
+</div>
+
+</div>
+
+</div>
+
+
+
+
+    </div>
+    <script src="./music.js"></script>
+</body>
+</html>
diff --git a/music.js b/music.js
@@ -0,0 +1,11 @@
+const Music=document.querySelector('.audio');
+const Img=document.querySelector('.rotate-image');
+
+const Play=document.querySelector('#play-button');
+Play.addEventListener("click", ()=>{
+    Music.play();
+Play.classList.remove("#play-button");
+    Img.classList.add('anime');
+
+
+  })
diff --git a/pause.png b/pause.png
diff --git a/play-button.png b/play-button.png
diff --git a/right-chevron.png b/right-chevron.png
diff --git a/right.png b/right.png