Added Music Player

namanGupta-ar · Oct 7, 2021 · a9b3aa8 · a9b3aa8
1 parent 321a632
commit a9b3aa8
Show file tree

Hide file tree

Showing 17 changed files with 376 additions and 0 deletions.
diff --git a/Music Player/Images/cover 1.png b/Music Player/Images/cover 1.png
diff --git a/Music Player/Images/cover 2.png b/Music Player/Images/cover 2.png
diff --git a/Music Player/Images/cover 3.png b/Music Player/Images/cover 3.png
diff --git a/Music Player/Images/cover 4.png b/Music Player/Images/cover 4.png
diff --git a/Music Player/Images/cover 5.png b/Music Player/Images/cover 5.png
diff --git a/Music Player/Images/nxt.png b/Music Player/Images/nxt.png
diff --git a/Music Player/Images/pre.png b/Music Player/Images/pre.png
diff --git a/Music Player/Img.png b/Music Player/Img.png
diff --git a/Music Player/Music/Song 1.mp3 b/Music Player/Music/Song 1.mp3
diff --git a/Music Player/Music/Song 2.mp3 b/Music Player/Music/Song 2.mp3
diff --git a/Music Player/Music/Song 3.mp3 b/Music Player/Music/Song 3.mp3
diff --git a/Music Player/Music/Song 4.mp3 b/Music Player/Music/Song 4.mp3
diff --git a/Music Player/Music/Song 5.mp3 b/Music Player/Music/Song 5.mp3
diff --git a/Music Player/app.js b/Music Player/app.js
@@ -0,0 +1,107 @@
+let currentMusic = 0;
+
+const music = document.querySelector('#audio');
+
+const seekBar = document.querySelector('.seek-bar');
+const songName = document.querySelector('.music-name');
+const artistName = document.querySelector('.artist-name');
+const disc = document.querySelector('.disc');
+const currentTime = document.querySelector('.current-time');
+const musicDuration = document.querySelector('.song-duration');
+const playBtn = document.querySelector('.play-btn');
+const forwardBtn = document.querySelector('.forward-btn');
+const backwardBtn = document.querySelector('.backward-btn');
+
+playBtn.addEventListener('click', () =>{
+    if(playBtn.className.includes('pause')){
+        music.play();
+    }
+    else{
+        music.pause();
+    }
+
+    playBtn.classList.toggle('pause');
+    disc.classList.toggle('play');
+})
+
+//set music function
+
+const setMusic = (i) =>{
+    seekBar.value = 0; // set range slide value to 0;
+    let song = songs[i];
+    currentMusic = i;
+    music.src = song.path;
+
+    songName.innerHTML = song.name;
+    artistName.innerHTML = song.artist;
+    disc.style.backgroundImage = `url('${song.cover}')`;
+
+    currentTime.innerHTML = '00:00';
+    setTimeout( ()=>{
+        seekBar.max =  music.duration;
+        musicDuration.innerHTML = formatTime(music.duration);
+    },300);
+
+}
+
+setMusic(0);
+
+//formating time in minutes and seconds format
+
+const formatTime = (time) =>{
+    let min = Math.floor(time/60);
+    if(min<10){
+        min = `0${min}`;
+    }
+    let sec = Math.floor(time%60);
+    if(sec<10){
+        sec = `0${sec}`;
+    }
+    return `${min} : ${sec}`;
+}
+
+//seek bar
+setInterval(() => {
+    seekBar.value = music.currentTime;
+    currentTime.innerHTML = formatTime(music.currentTime);
+
+    if(Math.floor(music.currentTime) == Math.floor(seekBar.max)){
+        forwardBtn.click();
+    }
+}, 500);
+
+seekBar.addEventListener('change', () =>{
+    music.currentTime = seekBar.value;
+})
+
+
+const playMusic = () =>{
+    music.play();
+    playBtn.classList.remove('pause');
+    disc.classList.add('play');
+}
+//forward and backward button
+forwardBtn.addEventListener('click' , () =>{
+    if(currentMusic >= songs.length -1){
+        currentMusic = 0;
+    }
+    else{
+        currentMusic = currentMusic + 1;
+    }
+    setMusic(currentMusic);
+    //playBtn.click();
+    playMusic();
+})
+
+backwardBtn.addEventListener('click' , () =>{
+    if(currentMusic <= 0){
+        currentMusic = songs.length - 1;
+    }
+    else{
+        currentMusic = currentMusic - 1;
+    }
+    setMusic(currentMusic);
+   // playBtn.click();
+   playMusic();
+})
+
diff --git a/Music Player/data.js b/Music Player/data.js
@@ -0,0 +1,32 @@
+let songs = [
+    {
+        name: 'song 1',
+        path: 'Music/Song 1.mp3',
+        artist: 'artist 1',
+        cover: 'Images/cover 1.png'
+    },
+    {
+        name: 'song 2',
+        path: 'Music/Song 2.mp3',
+        artist: 'artist 2',
+        cover: 'Images/cover 2.png'
+    },
+    {
+        name: 'song 3',
+        path: 'Music/Song 3.mp3',
+        artist: 'artist 3',
+        cover: 'Images/cover 3.png'
+    },
+    {
+        name: 'song 4',
+        path: 'Music/Song 4.mp3',
+        artist: 'artist 4',
+        cover: 'Images/cover 4.png'
+    },
+    {
+        name: 'song 5',
+        path: 'Music/Song 5.mp3',
+        artist: 'artist 5',
+        cover: 'Images/cover 5.png'
+    },
+]
diff --git a/Music Player/index.html b/Music Player/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Music Player</title>
+    <!-- to remove the favicon error-->
+    <link rel="shortcut icon" href="#">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <audio src="" id="audio"></audio>
+
+    <div class="music-player">
+        <h1 class="music-name">song one</h1>
+        <p class="artist-name">Artist</p>
+
+        <div class="disc"></div>
+
+        <div class="song-slider">
+            <input type="range" value="0" class="seek-bar">
+            <span class="current-time">00:00</span>
+            <span class="song-duration">00:00</span>
+        </div>
+
+        <div class="controls">
+            <button class="btn backward-btn"> <img src="Images/pre.png" alt="pre"></button>
+            <button class="play-btn pause">
+                <span> </span>
+                <span> </span>
+            </button>
+            <button class="btn forward-btn"> <img src="Images/nxt.png" alt="next"></button>
+        </div>
+
+    </div>
+    <script src="data.js"></script>
+    <script src="app.js"></script>
+
+</body>
+</html>
diff --git a/Music Player/style.css b/Music Player/style.css
@@ -0,0 +1,194 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+*{
+    margin:0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    height:100vh;
+    width:100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(100, 165, 143);
+    font-family: 'roboto',sans-serif;
+}
+
+.music-player{
+    height: 550px;
+    width: 350px;
+    border-radius: 20px;
+    background-color:rgb(218, 230, 132);
+    box-shadow: 0 40px 100px rgb(4, 141, 84);
+    padding: 30px;
+    overflow: hidden;
+    color: #5f7a61;
+}
+
+.music-name,
+.artist-name{
+    text-align: center;
+    text-transform: capitalize;
+}
+
+.music-name{
+    font-size: 40px;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+
+.artist-name{
+    font-size: 20px;
+}
+
+.disc{
+    position: relative;
+    display: block;
+    margin: 40px auto;
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    background-image: url('Images/cover\ 1.png');
+    background-size: cover;
+    box-shadow: 0 0 0 10px  #d5eebb;
+    animation: rotate 20s linear infinite;
+    animation-play-state: paused;
+}
+
+.disc.play{
+    animation-play-state: running;
+}
+
+.disc::before{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: rgb(211, 231, 231);
+}
+
+.song-slider{
+    width: 100%;
+    position: relative;
+}
+
+.seek-bar{
+    -webkit-appearance: none;
+    width: 100%;
+    height:5px;
+    border-radius: 10px;
+    background: #5f7a61;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.seek-bar::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    width: 1px;
+    height: 20px;
+    box-shadow: -400px 0 0 400px #d5eebb;
+}
+
+.current-time,
+.song-duration{
+    font-size: 14px;
+}
+
+.song-duration{
+    position: absolute;
+    right: 0;
+}
+
+.controls{
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: auto;
+    margin-top: 20px;
+}
+
+.play-btn{
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #d5eebb;
+    border: none;
+    cursor: pointer;
+
+}
+
+.play-btn span{
+    position: absolute;
+    top: 50%;
+    left: 25%;
+    transform: translateY(-50%);
+    width: 10px;
+    height:30px;
+    border-radius: 0px;
+    background: #5f7a61;
+    transition: .5s;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+;
+}
+
+.play-btn span:nth-child(2){
+    left: 55%;
+    transform-origin: center;
+}
+
+.play-btn.pause span:nth-child(2){
+    transform:translateY(-50%) scaleY(0);
+}
+
+.play-btn.pause span:nth-child(1){
+    width: 25px;
+    left: 55%;
+    transform: translate(-50%, -50%);
+    border-radius: 0;
+    clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
+}
+
+.play-btn.pause{
+    animation: pulse 2s linear infinite;
+}
+
+@keyframes pulse{
+   0%{
+    box-shadow: 0;
+    }
+    50%{
+        box-shadow: 0 0 0 5px rgb(4, 141, 84,0.1);
+    }
+    100%{
+        box-shadow: 0 0 0 5px rgba(4, 141, 84, 0.4);
+    }
+}
+
+.btn{
+    width: 40px;
+    height: 40px;
+    background: #d5eebb;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border:none;
+}
+
+@keyframes rotate{
+    0%{
+        transform: rotate(0);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}