└── music app ├── images ├── As it Was.jpg ├── Beautiful.jpg └── Hotline Bling.jpg ├── readme.md ├── index.html ├── style.css └── script.js /music app/images/As it Was.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tilakjain123/Music-Player/HEAD/music app/images/As it Was.jpg -------------------------------------------------------------------------------- /music app/images/Beautiful.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tilakjain123/Music-Player/HEAD/music app/images/Beautiful.jpg -------------------------------------------------------------------------------- /music app/images/Hotline Bling.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tilakjain123/Music-Player/HEAD/music app/images/Hotline Bling.jpg -------------------------------------------------------------------------------- /music app/readme.md: -------------------------------------------------------------------------------- 1 | ### Some Instructions: 2 | 1. Clone this repository to your computer. 3 | 2. Create a Music Folder: Inside the repository, create a folder for your songs (music). 4 | 3. Add Your Songs: Place your music files in the "music" folder. 5 | 4. Add Album Artwork: Put album artwork images in the "images" folder. 6 | 5. Run code 7 | -------------------------------------------------------------------------------- /music app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Music Player 8 | 9 | 10 | 11 | 12 | 13 |

Music Player

14 |
15 |
16 |

Melody

17 |
18 |
19 |
20 |
21 | 22 |
23 | music-cover 24 |
25 |
26 | 29 | 32 | 35 | 36 |
37 | 38 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /music app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | height: 100vh; 9 | margin: 0; 10 | font-family: 'Poppins', sans-serif; 11 | background: #F1D302; 12 | 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .audio-container{ 20 | background-color: #161925; 21 | border-radius: 15px; 22 | box-shadow: 0 20px 20px 0 #1619254f; 23 | display: flex; 24 | padding: 20px 30px; 25 | position: relative; 26 | margin: 100px 0; 27 | z-index: 10; 28 | } 29 | 30 | .img-container { 31 | position: relative; 32 | width: 110px; 33 | } 34 | 35 | .img-container img { 36 | border-radius: 50%; 37 | object-fit: cover; 38 | height: 110px; 39 | width: inherit; 40 | position: absolute; 41 | bottom: 0; 42 | left: 0; 43 | animation: rotate 3s linear infinite; 44 | animation-play-state: paused; 45 | 46 | } 47 | 48 | .audio-container.play .img-container img { 49 | animation-play-state: running; 50 | } 51 | 52 | @keyframes rotate { 53 | from { 54 | transform: rotate(0deg); 55 | } 56 | 57 | to { 58 | transform: rotate(360deg); 59 | } 60 | } 61 | 62 | .navigation { 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | z-index: 1; 67 | } 68 | 69 | .action-btn { 70 | background-color: #161925; 71 | border: 0; 72 | color: #ffffff; 73 | font-size: 20px; 74 | cursor: pointer; 75 | padding: 10px; 76 | margin: 0 20px; 77 | } 78 | 79 | 80 | .action-btn.action-btn-big { 81 | color: #ffffff; 82 | font-size: 30px; 83 | } 84 | 85 | .action-btn:focus { 86 | outline: 0; 87 | } 88 | 89 | .audio-info { 90 | background-color: #fff; 91 | border-radius: 15px 15px 0 0; 92 | position: absolute; 93 | top: 0; 94 | left: 20px; 95 | width: calc(100% - 40px); 96 | padding: 10px 10px 10px 150px; 97 | opacity: 0; 98 | transform: translateY(0%); 99 | transition: transform 0.3s ease-in, opacity 0.3s ease-in; 100 | z-index: 0; 101 | } 102 | 103 | .audio-container.play .audio-info { 104 | opacity: 1; 105 | transform: translateY(-100%); 106 | } 107 | 108 | .audio-info h4 { 109 | margin: 0; 110 | } 111 | 112 | .progress-container { 113 | background: #161925; 114 | border-radius: 5px; 115 | cursor: pointer; 116 | margin: 10px 0; 117 | height: 4px; 118 | width: 100%; 119 | } 120 | 121 | .progress { 122 | background-color: #F1D302; 123 | border-radius: 5px; 124 | height: 100%; 125 | width: 50%; 126 | transition: width 0.1s linear; 127 | } -------------------------------------------------------------------------------- /music app/script.js: -------------------------------------------------------------------------------- 1 | const musicContainer = document.getElementById('audio-container'); 2 | const playBtn = document.getElementById('play'); 3 | const prevBtn = document.getElementById('prev'); 4 | const nextBtn = document.getElementById('next'); 5 | 6 | const audio = document.getElementById('audio'); 7 | const progress = document.getElementById('progress'); 8 | const progressContainer = document.getElementById('progress-container'); 9 | const title = document.getElementById('title'); 10 | const cover = document.getElementById('cover'); 11 | 12 | // Song titles 13 | const songs = ['As it Was','Beautiful','Hotline Bling']; 14 | 15 | // Keep track of song 16 | let songIndex = 1; 17 | 18 | // Initially load song details into DOM 19 | loadSong(songs[songIndex]); 20 | 21 | // Update song details 22 | function loadSong(song) { 23 | title.innerText = song; 24 | audio.src = `music/${song}.mp3`; 25 | cover.src = `images/${song}.jpg`; 26 | } 27 | 28 | // Play song 29 | function playSong() { 30 | musicContainer.classList.add('play'); 31 | playBtn.querySelector('i.fas').classList.remove('fa-play'); 32 | playBtn.querySelector('i.fas').classList.add('fa-pause'); 33 | 34 | audio.play(); 35 | } 36 | 37 | // Pause song 38 | function pauseSong() { 39 | musicContainer.classList.remove('play'); 40 | playBtn.querySelector('i.fas').classList.add('fa-play'); 41 | playBtn.querySelector('i.fas').classList.remove('fa-pause'); 42 | 43 | audio.pause(); 44 | } 45 | 46 | // Previous song 47 | function prevSong() { 48 | songIndex--; 49 | 50 | if (songIndex < 0) { 51 | songIndex = songs.length - 1; 52 | } 53 | 54 | loadSong(songs[songIndex]); 55 | 56 | playSong(); 57 | } 58 | 59 | // Next song 60 | function nextSong() { 61 | songIndex++; 62 | 63 | if (songIndex > songs.length - 1) { 64 | songIndex = 0; 65 | } 66 | 67 | loadSong(songs[songIndex]); 68 | 69 | playSong(); 70 | } 71 | 72 | // Update progress bar 73 | function updateProgress(e) { 74 | const { duration, currentTime } = e.srcElement; 75 | const progressPercent = (currentTime / duration) * 100; 76 | progress.style.width = `${progressPercent}%`; 77 | } 78 | 79 | // Set progress bar 80 | function setProgress(e) { 81 | const width = this.clientWidth 82 | const clickX = e.offsetX 83 | const duration = audio.duration 84 | 85 | audio.currentTime = (clickX / width) * duration; 86 | } 87 | 88 | // Event listeners 89 | playBtn.addEventListener('click', () => { 90 | const isPlaying = musicContainer.classList.contains('play'); 91 | 92 | if (isPlaying) { 93 | pauseSong(); 94 | } else { 95 | playSong(); 96 | } 97 | }); 98 | 99 | // Change song 100 | prevBtn.addEventListener('click', prevSong); 101 | nextBtn.addEventListener('click', nextSong); 102 | 103 | // Time/song update 104 | audio.addEventListener('timeupdate', updateProgress); 105 | 106 | // Click on progress bar 107 | progressContainer.addEventListener('click', setProgress); 108 | 109 | // Song ends 110 | audio.addEventListener('ended', nextSong); 111 | --------------------------------------------------------------------------------