diff --git a/MP3-PLAYER.html b/MP3-PLAYER.html
new file mode 100644
index 00000000..ce399a76
--- /dev/null
+++ b/MP3-PLAYER.html
@@ -0,0 +1,275 @@
+<!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://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        .container {
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #e5e5e5;
+        }
+        
+        .box {
+            width: 300px;
+            height: 500px;
+            background: #e5e5e5;
+            border-radius: 1rem;
+            box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(255, 255, 255, 1);
+        }
+        
+        .round {
+            width: 170px;
+            height: 170px;
+            border-radius: 50%;
+            font-family: sans-serif;
+            text-align: center;
+            margin-top: 5rem;
+            margin-left: 3.9rem;
+            box-shadow: 7px 7px 9px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(0, 0, 0, 0.2);
+        }
+        
+        #display {
+            width: 170px;
+            height: 170px;
+            background-repeat: no-repeat;
+            background-size: cover;
+            border-radius: 50%;
+        }
+        
+        h1 {
+            margin-top: 1.8rem;
+            font-family: sans-serif;
+            text-align: center;
+            letter-spacing: 1px;
+        }
+        
+        h3 {
+            margin-top: 0.8rem;
+            font-family: sans-serif;
+            text-align: center;
+            letter-spacing: 1px;
+            font-weight: lighter;
+        }
+        
+        #tracker {
+            width: 90%;
+            height: 5px;
+            background: gray;
+            margin-top: 1.89rem;
+            margin-left: 1.2rem;
+            border-radius: 5px;
+            display: flex;
+            box-shadow: 7px 7px 9px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(255, 255, 255, 1);
+            cursor: pointer;
+        }
+        
+        #fill {
+            width: 0%;
+            height: 5px;
+            background: red;
+            border-radius: 5px;
+        }
+        
+        #seekers {
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background: red;
+            transform: scale(3);
+        }
+        
+        .buttons {
+            width: 100%;
+            height: 3.71rem;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            margin-top: 1.3rem;
+            padding: 1.99rem 1rem;
+            cursor: pointer;
+        }
+        
+        .des {
+            width: 3rem;
+            height: 3rem;
+            border-radius: 50%;
+            background: #e5e5e5;
+            border: none;
+            box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(255, 255, 255, 1);
+            padding-left: 3.5px;
+            padding-top: 1.5px
+        }
+        
+        .des:hover {
+            cursor: pointer;
+            box-shadow: inset 3px 3px 5px rgb(0, 0, 0, 0.2), inset -2px -2px 5px rgb(255, 255, 255, 1);
+        }
+        
+        .des:focus {
+            outline: none;
+        }
+        
+        .prev {
+            padding-left: 1px;
+        }
+        
+        .next {
+            padding-top: 16px;
+            padding-left: 16px;
+        }
+        
+        .anime {
+            animation: rotation 5s linear infinite;
+        }
+        
+        @keyframes rotation {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        
+        .fas {
+            color: rgb(255, 0, 0);
+            font-size: 1rem;
+        }
+        
+        @media only screen and (max-width: 1024px) {
+            .box {
+                width: 100%;
+                height: 100%;
+                background: #e5e5e5;
+                border-radius: 0rem;
+                box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(255, 255, 255, 1);
+            }
+            .fixed {
+                width: 100%;
+                height: 37vh;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: 3.75rem;
+            }
+            .round {
+                width: 190px;
+                height: 190px;
+                border-radius: 50%;
+                font-family: sans-serif;
+                margin-top: 1rem;
+                margin-left: 0rem;
+                box-shadow: 7px 7px 9px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(255, 255, 255, 1);
+            }
+            #display {
+                width: 190px;
+                height: 190px;
+                background-repeat: no-repeat;
+                background-size: cover;
+                border-radius: 50%;
+            }
+            h1 {
+                margin-top: 3.8rem;
+                font-family: sans-serif;
+                text-align: center;
+                letter-spacing: 1px;
+            }
+            h3 {
+                margin-top: 0.8rem;
+                font-family: sans-serif;
+                text-align: center;
+                letter-spacing: 1px;
+                font-weight: lighter;
+            }
+            .buttons {
+                width: 100%;
+                height: 3.3rem;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-top: 3rem;
+                padding: 1.99rem 1rem;
+            }
+            .des {
+                width: 3rem;
+                height: 3rem;
+                border-radius: 50%;
+                border: none;
+                box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2), -2px -2px 5px rgb(255, 255, 255, 1);
+            }
+            .des:focus {
+                outline: none;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="box">
+            <h1>ALOGH MUSIC</h1>
+            <h3>song by singer</h3>
+            <div class="fixed">
+                <div class="round">
+                    <img id="display" src="m.jpg" alt="cover song pic">
+                </div>
+            </div>
+            <div id="tracker">
+                <div id="fill"></div>
+                <div id="seekers"></div>
+            </div>
+            <div class="buttons">
+                <button class="des prev"><i class="fas fa-backward"></i></button>
+                <button onclick="hello();" class=" des  play pause"><i class="fas fa-play"></i></button>
+                <buttons class=" des next"><i class="fas fa-forward "></i></button>
+            </div>
+        </div>
+
+
+        <audio id="demo">
+                  <source src="JAVASCRIPT30/rjl.mp3" type="audio/mp3 ">
+ 
+         </audio>
+
+    </div>
+
+    <script>
+        const fillBar = document.getElementById("fill");
+
+
+        const hello = () => {
+
+
+            var image = document.getElementById("display");
+            image.classList.add('anime');
+
+
+            var song = document.getElementById('demo');
+            song.play();
+
+            song.addEventListener('timeupdate', function() {
+
+                var position = song.currentTime / song.duration;
+
+                fillBar.style.width = position * 100 + '%';
+
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
