Build a Music Player using HTML CSS & JavaScript

├── music ├── stay.mp3 ├── Faded.mp3 ├── Rather Be.mp3 └── fallingdown.mp3 ├── images ├── faded.png ├── stay.png ├── favicon.ico ├── ratherbe.jpg └── fallingdown.jpg ├── index.html ├── style.css └── script.js /music/stay.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/music/stay.mp3 -------------------------------------------------------------------------------- /images/faded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/images/faded.png -------------------------------------------------------------------------------- /images/stay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/images/stay.png -------------------------------------------------------------------------------- /music/Faded.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/music/Faded.mp3 -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/images/favicon.ico -------------------------------------------------------------------------------- /images/ratherbe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/images/ratherbe.jpg -------------------------------------------------------------------------------- /music/Rather Be.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/music/Rather Be.mp3 -------------------------------------------------------------------------------- /images/fallingdown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/images/fallingdown.jpg -------------------------------------------------------------------------------- /music/fallingdown.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/melsayedahmed/Build_a_MusicPlayer/HEAD/music/fallingdown.mp3 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Build a Music Player using HTML CSS & JavaScript 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 |

18 |

PLAYING x OF y

19 |

20 |

Track Name

21 |

Track Artist

22 |

23 | 24 |

25 |

00:00

26 | 27 |

00:00

28 |

29 | 30 |

31 | 32 | 33 | 34 |

35 | 36 |

37 |

38 | 39 |

40 |

41 | 42 |

43 |

44 | 45 |

46 |

47 | 48 |

49 |

50 | 51 |

52 |

53 | 54 |

55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |

63 |

64 |

65 | 66 | 67 | 68 | 69 | 70 | 77 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background: linear-gradient(to right,#9a1d86, #1595be); 4 | font-weight: bold; 5 | } 6 | 7 | .player{ 8 | height: 95vh; 9 | display: flex; 10 | align-items: center; 11 | flex-direction: column; 12 | justify-content: center; 13 | } 14 | .wrapper{ 15 | border: 1px solid transparent; 16 | padding: 30px; 17 | border-radius: 20px; 18 | background-color: #ddd; 19 | box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; 20 | } 21 | 22 | .details { 23 | display: flex; 24 | align-items: center; 25 | flex-direction: column; 26 | justify-content: center; 27 | } 28 | 29 | .track-art { 30 | margin: 25px; 31 | height: 250px; 32 | width: 250px; 33 | border:2px solid #FFFAFA; 34 | background-size: cover; 35 | background-position: center; 36 | border-radius: 50%; 37 | -moz-box-shadow: 0px 6px 5px black; 38 | -webkit-box-shadow: 0px 6px 5px black; 39 | box-shadow: 0px 6px 5px black; 40 | -moz-border-radius:190px; 41 | -webkit-border-radius:190px; 42 | border-radius:190px; 43 | } 44 | 45 | .now-playing { 46 | font-size: 1rem; 47 | } 48 | 49 | .track-name { 50 | font-size: 2.5rem; 51 | } 52 | 53 | .track-artist { 54 | margin-top: 5px; 55 | font-size: 1.5rem; 56 | } 57 | 58 | .buttons { 59 | display: flex; 60 | flex-direction: row; 61 | align-items: center; 62 | margin-bottom: 30px; 63 | } 64 | .active{ 65 | color: black; 66 | } 67 | 68 | .repeat-track, 69 | .random-track, 70 | .playpause-track, 71 | .prev-track, 72 | .next-track { 73 | padding: 25px; 74 | opacity: 0.8; 75 | transition: opacity .2s; 76 | } 77 | 78 | .repeat-track:hover, 79 | .random-track:hover, 80 | .playpause-track:hover, 81 | .prev-track:hover, 82 | .next-track:hover { 83 | opacity: 1.0; 84 | } 85 | 86 | .slider_container { 87 | display: flex; 88 | justify-content: center; 89 | align-items: center; 90 | } 91 | 92 | .seek_slider, .volume_slider { 93 | -webkit-appearance: none; 94 | -moz-appearance: none; 95 | appearance: none; 96 | height: 5px; 97 | background: #83A9FF; 98 | -webkit-transition: .2s; 99 | transition: opacity .2s; 100 | } 101 | 102 | .seek_slider::-webkit-slider-thumb, 103 | .volume_slider::-webkit-slider-thumb { 104 | -webkit-appearance: none; 105 | -moz-appearance: none; 106 | appearance: none; 107 | width: 15px; 108 | height: 15px; 109 | background: white; 110 | border: 3px solid #3774FF; 111 | cursor: grab; 112 | border-radius: 100%; 113 | } 114 | 115 | .seek_slider:hover, 116 | .volume_slider:hover { 117 | opacity: 1.0; 118 | } 119 | 120 | .seek_slider { 121 | width: 60%; 122 | } 123 | 124 | .volume_slider { 125 | width: 30%; 126 | } 127 | 128 | .current-time, 129 | .total-duration { 130 | padding: 10px; 131 | } 132 | 133 | i.fa-volume-down, 134 | i.fa-volume-up { 135 | padding: 10px; 136 | } 137 | 138 | i, 139 | i.fa-play-circle, 140 | i.fa-pause-circle, 141 | i.fa-step-forward, 142 | i.fa-step-backward, 143 | p { 144 | cursor: pointer; 145 | } 146 | .randomActive{ 147 | color: black; 148 | } 149 | .rotate { 150 | animation: rotation 8s infinite linear; 151 | } 152 | @keyframes rotation { 153 | from { 154 | transform: rotate(0deg); 155 | } 156 | to { 157 | transform: rotate(359deg); 158 | } 159 | } 160 | .loader { 161 | height: 70px; 162 | display: flex; 163 | justify-content: center; 164 | align-items: center; 165 | } 166 | .loader .stroke{ 167 | background: #f1f1f1; 168 | height: 150%; 169 | width: 10px; 170 | border-radius: 50px; 171 | margin: 0 5px; 172 | animation: animate 1.4s linear infinite; 173 | } 174 | @keyframes animate { 175 | 50% { 176 | height: 20%; 177 | background: #4286f4; 178 | } 179 | 180 | 100% { 181 | background: #4286f4; 182 | height: 100%; 183 | } 184 | } 185 | .stroke:nth-child(1){ 186 | animation-delay: 0s; 187 | } 188 | .stroke:nth-child(2){ 189 | animation-delay: 0.3s; 190 | } 191 | .stroke:nth-child(3){ 192 | animation-delay: 0.6s; 193 | } 194 | .stroke:nth-child(4){ 195 | animation-delay: 0.9s; 196 | } 197 | .stroke:nth-child(5){ 198 | animation-delay: 0.6s; 199 | } 200 | .stroke:nth-child(6){ 201 | animation-delay: 0.3s; 202 | } 203 | .stroke:nth-child(7){ 204 | animation-delay: 0s; 205 | } 206 | 207 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let now_playing = document.querySelector('.now-playing'); 2 | let track_art = document.querySelector('.track-art'); 3 | let track_name = document.querySelector('.track-name'); 4 | let track_artist = document.querySelector('.track-artist'); 5 | 6 | let playpause_btn = document.querySelector('.playpause-track'); 7 | let next_btn = document.querySelector('.next-track'); 8 | let prev_btn = document.querySelector('.prev-track'); 9 | 10 | let seek_slider = document.querySelector('.seek_slider'); 11 | let volume_slider = document.querySelector('.volume_slider'); 12 | let curr_time = document.querySelector('.current-time'); 13 | let total_duration = document.querySelector('.total-duration'); 14 | let wave = document.getElementById('wave'); 15 | let randomIcon = document.querySelector('.fa-random'); 16 | let curr_track = document.createElement('audio'); 17 | 18 | let track_index = 0; 19 | let isPlaying = false; 20 | let isRandom = false; 21 | let updateTimer; 22 | 23 | const music_list = [ 24 | { 25 | img : 'images/stay.png', 26 | name : 'Stay', 27 | artist : 'The Kid LAROI, Justin Bieber', 28 | music : 'music/stay.mp3' 29 | }, 30 | { 31 | img : 'images/fallingdown.jpg', 32 | name : 'Falling Down', 33 | artist : 'Wid Cards', 34 | music : 'music/fallingdown.mp3' 35 | }, 36 | { 37 | img : 'images/faded.png', 38 | name : 'Faded', 39 | artist : 'Alan Walker', 40 | music : 'music/Faded.mp3' 41 | }, 42 | { 43 | img : 'images/ratherbe.jpg', 44 | name : 'Rather Be', 45 | artist : 'Clean Bandit', 46 | music : 'music/Rather Be.mp3' 47 | } 48 | ]; 49 | 50 | loadTrack(track_index); 51 | 52 | function loadTrack(track_index){ 53 | clearInterval(updateTimer); 54 | reset(); 55 | 56 | curr_track.src = music_list[track_index].music; 57 | curr_track.load(); 58 | 59 | track_art.style.backgroundImage = "url(" + music_list[track_index].img + ")"; 60 | track_name.textContent = music_list[track_index].name; 61 | track_artist.textContent = music_list[track_index].artist; 62 | now_playing.textContent = "Playing music " + (track_index + 1) + " of " + music_list.length; 63 | 64 | updateTimer = setInterval(setUpdate, 1000); 65 | 66 | curr_track.addEventListener('ended', nextTrack); 67 | random_bg_color(); 68 | } 69 | 70 | function random_bg_color(){ 71 | let hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e']; 72 | let a; 73 | 74 | function populate(a){ 75 | for(let i=0; i<6; i++){ 76 | let x = Math.round(Math.random() * 14); 77 | let y = hex[x]; 78 | a += y; 79 | } 80 | return a; 81 | } 82 | let Color1 = populate('#'); 83 | let Color2 = populate('#'); 84 | var angle = 'to right'; 85 | 86 | let gradient = 'linear-gradient(' + angle + ',' + Color1 + ', ' + Color2 + ")"; 87 | document.body.style.background = gradient; 88 | } 89 | function reset(){ 90 | curr_time.textContent = "00:00"; 91 | total_duration.textContent = "00:00"; 92 | seek_slider.value = 0; 93 | } 94 | function randomTrack(){ 95 | isRandom ? pauseRandom() : playRandom(); 96 | } 97 | function playRandom(){ 98 | isRandom = true; 99 | randomIcon.classList.add('randomActive'); 100 | } 101 | function pauseRandom(){ 102 | isRandom = false; 103 | randomIcon.classList.remove('randomActive'); 104 | } 105 | function repeatTrack(){ 106 | let current_index = track_index; 107 | loadTrack(current_index); 108 | playTrack(); 109 | } 110 | function playpauseTrack(){ 111 | isPlaying ? pauseTrack() : playTrack(); 112 | } 113 | function playTrack(){ 114 | curr_track.play(); 115 | isPlaying = true; 116 | track_art.classList.add('rotate'); 117 | wave.classList.add('loader'); 118 | playpause_btn.innerHTML = ''; 119 | } 120 | function pauseTrack(){ 121 | curr_track.pause(); 122 | isPlaying = false; 123 | track_art.classList.remove('rotate'); 124 | wave.classList.remove('loader'); 125 | playpause_btn.innerHTML = ''; 126 | } 127 | function nextTrack(){ 128 | if(track_index < music_list.length - 1 && isRandom === false){ 129 | track_index += 1; 130 | }else if(track_index < music_list.length - 1 && isRandom === true){ 131 | let random_index = Number.parseInt(Math.random() * music_list.length); 132 | track_index = random_index; 133 | }else{ 134 | track_index = 0; 135 | } 136 | loadTrack(track_index); 137 | playTrack(); 138 | } 139 | function prevTrack(){ 140 | if(track_index > 0){ 141 | track_index -= 1; 142 | }else{ 143 | track_index = music_list.length -1; 144 | } 145 | loadTrack(track_index); 146 | playTrack(); 147 | } 148 | function seekTo(){ 149 | let seekto = curr_track.duration * (seek_slider.value / 100); 150 | curr_track.currentTime = seekto; 151 | } 152 | function setVolume(){ 153 | curr_track.volume = volume_slider.value / 100; 154 | } 155 | function setUpdate(){ 156 | let seekPosition = 0; 157 | if(!isNaN(curr_track.duration)){ 158 | seekPosition = curr_track.currentTime * (100 / curr_track.duration); 159 | seek_slider.value = seekPosition; 160 | 161 | let currentMinutes = Math.floor(curr_track.currentTime / 60); 162 | let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60); 163 | let durationMinutes = Math.floor(curr_track.duration / 60); 164 | let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60); 165 | 166 | if(currentSeconds < 10) {currentSeconds = "0" + currentSeconds; } 167 | if(durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } 168 | if(currentMinutes < 10) {currentMinutes = "0" + currentMinutes; } 169 | if(durationMinutes < 10) { durationMinutes = "0" + durationMinutes; } 170 | 171 | curr_time.textContent = currentMinutes + ":" + currentSeconds; 172 | total_duration.textContent = durationMinutes + ":" + durationSeconds; 173 | } 174 | } 175 | --------------------------------------------------------------------------------