#musicplayerwithjavascript

[ondevwebs]

How To Create Music Player Using HTML , CSS and JavaScript?

Live Preview

HTML: index.html

Music Player 0:00 0:00 100

CSS: Style.css

@import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { font-size: 16px; overflow: hidden; } body { background-color: #131418; font-family: "Pacifico"; width: 100vw; height: 100vh; display: grid; place-items: center; user-select: none; } .themes { position: absolute; top: -100px; width: 100%; height: 6rem; display: flex; justify-content: center; align-items: center; gap: 10px; transition: 0.3s; } .theme { width: 3rem; height: 3rem; border: 1px solid #888888; border-radius: 50%; cursor: pointer; transition: 0.3s; } .theme:hover { border: 1px solid #0cb18d; } .active-theme { border: 1px solid #11e2b5 !important; } .theme1 { background: #101010; } .theme2 { background: linear-gradient(135deg, #dc143c, #009688); } .theme3 { background: linear-gradient(135deg, #7f0096, #14abdc); } .music-box { width: 30rem; height: 30rem; position: relative; border-radius: 16%; border: 1px solid transparent; box-shadow: -10px -10px 15px #00000080, 10px 10px 15px #0000001f; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 55% 10% 10% 25%; } .blur { width: 30rem; height: 30rem; border-radius: 16%; position: absolute; filter: blur(10px); z-index: -1; } .cover-wrapper { display: grid; place-items: center; padding: 25px; } .cover-image { width: 100%; aspect-ratio: 1 / 1; border-radius: 17%; cursor: pointer; background: #10101075; } .cover-image-big-size { position: absolute; width: 28rem; height: 28rem; border-radius: 11%; box-shadow: -10px -10px 15px #00000080, 10px 10px 15px #0000001f; cursor: pointer; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s; } .queue { color: white; font-size: 1.3rem; letter-spacing: 1px; padding: 25px 0; overflow: hidden; } .queue .active { transform: scale(1.1); color: #0fd5ca; } .queue .track-item { transition: 0.1s; cursor: pointer; margin-left: 45px; text-indent: -28px; } .queue .track-item:hover { transform: scale(1.1); } .track-items-wrapper { scrollbar-width: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; } .queue .track-item:first-child { margin-top: 18px; } .track-items-wrapper::-webkit-scrollbar { width: 0; background: transparent; } .track-information { font-family: "Noto Sans JP"; display: flex; justify-content: center; align-items: center; gap: 5px; color: #adadad; grid-column-start: span 2; } .track-information > * { display: flex; justify-content: center; align-items: center; gap: 5px; cursor: pointer; transition: 0.3s; } path { transition: 0.3s; } .track-information > *:hover { color: white; } .track-information > *:hover path { fill: white !important; } .track-information-icon { width: 2.5rem; height: 2.5rem; } .track-information-texts { width: 7rem; } .track-progress { display: flex; justify-content: center; align-items: center; gap: 15px; grid-column-start: span 2; } .track-progress-bar { width: 65%; height: 10px; background: #dc143c7a; border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; } .track-loading { width: 35px; height: 100%; background: #dc143c; position: absolute; border-radius: 4px; animation: track-loading 1s ease-in-out infinite alternate; left: -5px; transform: scaleX(1); } @keyframes track-loading { 25% { transform: scaleX(1.5); } 75% { transform: scaleX(1.5); } 100% { transform: scaleX(1); left: calc(100% - 30px); } } .track-current-time-progress-bar { width: 0; height: 10px; background-color: #dc143c; border-radius: 4px; } .track-time { color: white; margin-bottom: 4px; width: 28px; } .buttons { display: flex; justify-content: space-evenly; align-items: center; grid-column-start: span 2; } .button { width: 4.6rem; height: 4.6rem; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; transition: 0.3s; } .button > * { width: 2.5rem; height: 100%; transition: 0.3s; } .volume-wrapper > * { position: absolute; width: 100%; } .volume-button > * { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .volume-button img, .volume-button svg { width: 2.5rem; height: 2.5rem; position: absolute; } .waves-volume-button > * { position: absolute; display: flex; justify-content: center; align-items: center; } .volume-number { color: white; font-size: 2.5rem; text-align: center; margin-bottom: 6px; opacity: 0; } .volume-cross { opacity: 0; } .volume-cross svg { transform: translateX(2px); } .volume-wrapper:hover .volume-button { opacity: 0 !important; } .volume-wrapper:hover .volume-number { opacity: 1 !important; } @media screen and (max-width: 575px) { html { font-size: 13px; } } @media screen and (max-width: 460px) { html { font-size: 10px; } }

JS: index.js

"use strict"; let audioTrack = document.createElement("audio"); audioTrack.preload = "metadata"; document.body.append(audioTrack); let blurElement = document.getElementById("blurElement"); let themes = document.getElementById("themes"); let musicBox = document.getElementById("musicBox"); let trackItemsWrapper = document.getElementById("trackItemsWrapper"); let trackArtistName = document.getElementById("trackArtistName"); let trackAlbumName = document.getElementById("trackAlbumName"); let coverImage = document.getElementById("coverImage"); let playButton = document.getElementById("playButton"); let playButtonIcon = playButton.firstElementChild; let pauseButtonIcon = playButton.lastElementChild; let previousButton = document.getElementById("previousButton"); let nextButton = document.getElementById("nextButton"); let volumeWrapper = document.getElementById("volumeWrapper"); let volumeButton = document.getElementById("volumeButton"); let volumeNumber = document.getElementById("volumeNumber"); let wavesVolumeButton = document.getElementById("wavesVolumeButton"); let highVolumeSymbol = document.getElementById("highVolumeSymbol"); let mediumVolumeSymbol = document.getElementById("mediumVolumeSymbol"); let lowVolumeSymbol = document.getElementById("lowVolumeSymbol"); let volumeCross = document.getElementById("volumeCross"); let currentTrackTimeNumber = document.getElementById("currentTrackTimeNumber"); let currentTrackDuration = document.getElementById("currentTrackDuration"); let trackProgressBar = document.getElementById("trackProgressBar"); let trackLoading = document.getElementById("trackLoading"); let currentTrackTimeBar = document.getElementById("currentTrackTimeBar"); let musics = ; musics.forEach((item, index) => { trackItemsWrapper.innerHTML += `${ index + 1 }. ${item.trackName}`; }); trackItemsWrapper.firstElementChild.classList.add("active"); function informationUpdate(target) { target = target ? target : 0; coverImage.src = ""; coverImage.src = musics.coverImage; audioTrack.src = musics.audioSource; trackArtistName.textContent = musics.artist; trackAlbumName.textContent = musics.album; } informationUpdate(); themes.addEventListener("click", (e) => { if (e.target == e.currentTarget) return; let targetTheme = e.target.dataset.theme; let activeTheme = document.querySelector(".active-theme"); activeTheme.classList.remove("active-theme"); e.target.classList.add("active-theme"); switch (targetTheme) { case "theme1": blurElement.style.visibility = "hidden"; musicBox.style.border = ""; musicBox.style.boxShadow = ""; coverImage.style.background = ""; trackProgressBar.style.background = ""; currentTrackTimeBar.style.background = ""; trackLoading.style.background = ""; break; case "theme2": blurElement.style.visibility = "visible"; musicBox.style.border = "1px solid #ffffff12"; musicBox.style.boxShadow = "inset -10px -10px 15px #ffffff0a, inset 10px 10px 15px #ffffff0a"; blurElement.style.background = "linear-gradient(135deg, #dc143c, #009688)"; coverImage.style.background = "#00968875"; trackProgressBar.style.background = "#0fd5ca73"; currentTrackTimeBar.style.background = "#0fd5ca"; trackLoading.style.background = "#0fd5ca"; break; case "theme3": blurElement.style.visibility = "visible"; musicBox.style.border = "1px solid #ffffff12"; musicBox.style.boxShadow = "inset -10px -10px 15px #ffffff0a, inset 10px 10px 15px #ffffff0a"; blurElement.style.background = "linear-gradient(135deg, #7f0096, #14abdc)"; coverImage.style.background = "#288bcf75"; trackProgressBar.style.background = "#0fd5ca73"; currentTrackTimeBar.style.background = "#0fd5ca"; trackLoading.style.background = "#0fd5ca"; break; } }); trackItemsWrapper.addEventListener("click", (e) => { if (e.target == e.currentTarget) return; let activeAudio = document.querySelector(".active"); activeAudio.classList.remove("active"); e.target.classList.add("active"); let targetIndex = e.target.dataset.index; informationUpdate(targetIndex); }); audioTrack.addEventListener("waiting", waitingEvent); function waitingEvent() { trackLoading.classList.add("track-loading"); } audioTrack.addEventListener("canplay", (e) => { trackLoading.classList.remove("track-loading"); audioTrack.removeEventListener("waiting", waitingEvent); }); let firstPlay = true; audioTrack.addEventListener("loadstart", (e) => { audioTrack.addEventListener("waiting", waitingEvent); currentTrackTimeBar.style.width = 0; if (!firstPlay) { audioTrack.play(); } firstPlay = false; }); let requestAnimationTimeArgument = performance.now(); requestAnimationFrame(function currentTimeUpdater( requestAnimationTimeArgument ) { let currentTime = audioTrack.currentTime; let currentMinute = Math.trunc(currentTime / 60); let currentSeconds = Math.trunc(currentTime % 60); if (currentSeconds { audioTrack.currentTime = ((e.offsetX / trackProgressBar.offsetWidth) * 100 * audioTrack.duration) / 100; trackProgressBar.addEventListener("pointermove", trackProgressBarPointerMove); function trackProgressBarPointerMove(e) { audioTrack.currentTime = ((e.offsetX / trackProgressBar.offsetWidth) * 100 * audioTrack.duration) / 100; } document.addEventListener("pointerup", (e) => { trackProgressBar.removeEventListener( "pointermove", trackProgressBarPointerMove ); }); }); trackProgressBar.addEventListener("wheel", (e) => { if (e.deltaY 0) { audioTrack.currentTime -= 5; } }); playButton.addEventListener("click", (e) => { if (audioTrack.paused) { audioTrack.play(); } else { audioTrack.pause(); } }); previousButton.addEventListener("click", (e) => { let activeAudio = document.querySelector(".active"); let trackItems = document.querySelectorAll(".track-item"); let activeIndex = +activeAudio.dataset.index == 0 ? trackItems.length : +activeAudio.dataset.index; let targetIndex = +activeIndex - 1; activeAudio.classList.remove("active"); trackItems.classList.add("active"); informationUpdate(targetIndex); }); nextButton.addEventListener("click", (e) => { let activeAudio = document.querySelector(".active"); let trackItems = document.querySelectorAll(".track-item"); let activeIndex = +activeAudio.dataset.index == trackItems.length - 1 ? -1 : +activeAudio.dataset.index; let targetIndex = +activeIndex + 1; activeAudio.classList.remove("active"); trackItems.classList.add("active"); informationUpdate(targetIndex); }); audioTrack.addEventListener("play", (e) => { playButtonIcon.style.opacity = 0; pauseButtonIcon.style.opacity = 1; if (wasPlaying) { wasPlaying = false; } }); // prevent from nested animations let firstTimeAnimation = true; audioTrack.addEventListener("playing", (e) => { if (firstTimeAnimation) { blurElement.animate( { filter: "blur(30px)" }, { duration: 5000, easing: "ease-in-out", direction: "alternate", iterations: Infinity } ); firstTimeAnimation = false; } }); audioTrack.addEventListener("pause", (e) => { playButtonIcon.style.opacity = 1; pauseButtonIcon.style.opacity = 0; blurElement.animate( { filter: "blur(10px)" }, { duration: 1000, easing: "linear", fill: "forwards" } ); firstTimeAnimation = true; }); volumeWrapper.addEventListener( "wheel", (e) => { e.preventDefault(); switch (true) { case e.deltaY 0: audioTrack.volume = (audioTrack.volume -= 0.05).toFixed(2); break; } volumeNumberUpdate(); }, { passive: false } ); function volumeNumberUpdate() { // trunc is just for (0.55 * 100)! volumeNumber.textContent = Math.trunc(audioTrack.volume * 100); } let wasPlaying; audioTrack.addEventListener("volumechange", (e) => { let currentVolume = audioTrack.volume; switch (true) { case 0.66 { switch (e.code) { case "ArrowDown": audioTrack.volume = (audioTrack.volume -= 0.05).toFixed(2); break; case "ArrowUp": audioTrack.volume = (audioTrack.volume += 0.05).toFixed(2); break; case "ArrowLeft": audioTrack.currentTime -= 5; break; case "ArrowRight": audioTrack.currentTime += 5; break; case "Space": if (audioTrack.paused) { audioTrack.play(); } else { audioTrack.pause(); } break; } if (e.code == "ArrowDown" || e.code == "ArrowUp") { volumeButton.style.opacity = 0; volumeNumber.style.opacity = 1; document.addEventListener("keyup", (e) => { let volumeChangeAnimation = setTimeout(() => { volumeButton.style.opacity = 1; volumeNumber.style.opacity = 0; }, 600); document.addEventListener("keydown", (e) => { if (e.code == "ArrowDown" || e.code == "ArrowUp") { clearTimeout(volumeChangeAnimation); } }); }); } }); coverImage.addEventListener("pointerdown", (e) => { e.preventDefault(); let coverImageBigSize = coverImage.cloneNode(); coverImageBigSize.className = "cover-image-big-size"; coverImageBigSize.removeAttribute("id"); document.body.append(coverImageBigSize); document.addEventListener("pointerup", (e) => { coverImageBigSize.remove(); }); }); That’s it for this tutorial. If you have any issues while creating this project you can download the source code by clicking on the download button below. Download Files Read the full article