How To Create Music Player Using HTML , CSS and JavaScript?
Tags: music, html, javascript, css
Published: 2023-04-25 15:59:41

## HTML: index.html

```
<!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>Music Player</title>

	<script src="https://kit.fontawesome.com/5eb2c51ffb.js" crossorigin="anonymous"></script>

	<link rel="stylesheet" href="style.css" />
</head>

<body>
	<section class="music-box" id="musicBox">
		<div class="blur" id="blurElement"></div>
		<div class="themes" id="themes">
			<div class="theme theme1 active-theme" data-theme="theme1"></div>
			<div class="theme theme2" data-theme="theme2"></div>
			<div class="theme theme3" data-theme="theme3"></div>
		</div>
		<section class="cover-wrapper">
			<img class="cover-image" id="coverImage" src="" alt="🎵 Cover Image 🎵" srcset="" />
		</section>
		<section class="queue">
			<div class="track-items-wrapper" id="trackItemsWrapper"></div>
		</section>
		<section class="track-information">
			<div>
				<svg version="1.1" width="480.79175" height="424.00003" x="0" y="0" viewBox="0 0 480.79175 424.00003"
					xml:space="preserve" class="track-information-icon" id="svg13" sodipodi:docname="artist.svg"
					inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
					xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
					xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
					xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
					<defs id="defs17" />
					<sodipodi:namedview id="namedview15" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
						inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
						inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="0.4609375" inkscape:cx="241.89831"
						inkscape:cy="184.40678" inkscape:window-width="1440" inkscape:window-height="837"
						inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"
						inkscape:current-layer="outline" />
					<g id="g11" style="fill: #adadad" transform="translate(-15.998759,-71.999977)">
						<g id="outline" style="fill: #adadad">
							<path
								d="m 487.288,312.312 -40,-8.151 a 7.979,7.979 0 0 0 -5.942,1.122 l -20.1,13 -68.665,7.506 -0.571,-84.39 3.1,-8.418 26.305,12.377 a 7.994,7.994 0 0 0 10.644,-3.832 l 13.629,-28.95 a 8,8 0 0 0 -3.833,-10.646 l -60.478,-28.452 a 32.041,32.041 0 1 0 -21.372,43.689 c 0.314,-0.081 0.622,-0.176 0.932,-0.266 l 19.641,9.242 -4.085,11.091 A 8,8 0 0 0 336,240.053 l 0.592,87.483 -15.549,1.7 -0.514,-35.972 a 69.842,69.842 0 0 0 -38.194,-61.372 l -21.322,-10.875 -0.062,-0.032 -3.7,-1.882 v -28.9 A 39.764,39.764 0 0 0 264,168 V 127.718 A 28,28 0 0 0 260,72 h -46 a 54.062,54.062 0 0 0 -54,54 v 26 a 24.028,24.028 0 0 0 24,24 h 0.805 a 39.875,39.875 0 0 0 8.445,17.549 V 200 h -22.23 a 127.289,127.289 0 0 0 -66.732,18.887 L 35.18,261.416 a 33.135,33.135 0 0 0 -12.3,13.446 l -3.359,6.718 A 33.2,33.2 0 0 0 48.079,329.643 79.973,79.973 0 0 0 105.25,455.6 V 488 a 8,8 0 0 0 8,8 H 256 a 8,8 0 0 0 7.973,-8.665 l -7.286,-87.377 a 63.245,63.245 0 0 0 5.057,-11.081 l 1.736,6.079 A 18.088,18.088 0 0 0 280.79,408 h 24.46 a 7.886,7.886 0 0 0 0.8,-0.04 v 0 h 0.036 l 31.03,-3.1 0.563,83.2 16,-0.108 -0.551,-81.408 c 0.288,-0.039 0.576,-0.071 0.863,-0.129 l 32.058,-6.449 a 8,8 0 0 0 7.2,-7.96 v -22.393 l 29.893,-3.271 c 0,0 29.704,9.658 30.548,9.658 a 7.989,7.989 0 0 0 3.319,-0.721 l 35.1,-16 a 8,8 0 0 0 4.644,-8.053 l -3.1,-31.85 a 8,8 0 0 0 -6.365,-7.064 z M 366.209,202.843 387.8,213 l -6.815,14.475 -20.329,-9.566 z m -50.2,-1.167 a 16,16 0 1 1 11.491,-19.492 15.878,15.878 0 0 1 -11.495,19.492 z m -48.38,62.216 a 8,8 0 0 0 6.3,-10.344 l -3.081,-9.548 4.218,2.151 a 53.882,53.882 0 0 1 29.465,47.348 l 0.536,37.489 -38.622,4.222 5.316,-21.265 a 8,8 0 0 0 -15.522,-3.88 l -4.621,18.484 A 64.279,64.279 0 0 0 211.3,304.808 l 12.841,-33.67 z m -139.721,99.672 a 8.02,8.02 0 0 0 -2.22,-2.22 L 68.734,323.372 c 0.021,-0.014 0.042,-0.027 0.063,-0.042 l 23,-13.474 39.8,39.8 a 8.016,8.016 0 0 0 4.087,2.188 l 33.57,6.719 V 384 h -27.733 z m 7.173,35.347 a 23.981,23.981 0 0 1 -29.416,-31.686 l 9.815,6.544 13.336,20.017 a 14.007,14.007 0 0 0 6.265,5.125 z m 6.113,-62.28 -24.538,-24.539 a 63.408,63.408 0 0 1 42.287,19.125 8,8 0 0 0 10.946,0.458 47.964,47.964 0 0 1 68.991,6.545 l -60.574,6.62 a 13.916,13.916 0 0 0 -4.316,-1.645 z M 248,168 a 24,24 0 0 1 -48,0 v -40 h 48 z m 3.058,66.739 4.8,14.893 -18.732,3.122 z m -41.808,-29.57 a 39.9,39.9 0 0 0 32,-1.085 v 17.183 l -19.8,25.6 -12.2,-40.054 z M 184,160 a 8,8 0 0 1 0,-16 z m 8,-48 a 8,8 0 0 0 -8,8 v 8 a 23.889,23.889 0 0 0 -8,1.376 V 126 a 38.043,38.043 0 0 1 38,-38 h 46 a 12,12 0 0 1 0,24 z m 4.976,109.437 7.16,23.5 -20.145,-13.429 z M 38.9,310.239 a 17.227,17.227 0 0 1 -5.074,-21.5 l 3.364,-6.727 c 1.434,-2.876 75.483,-49.5 75.483,-49.5 A 111.3,111.3 0 0 1 171.02,216 h 6.86 l -12.48,9.679 a 8,8 0 0 0 0.466,12.977 l 42.688,28.459 -14.212,37.264 a 64.019,64.019 0 0 0 -29.172,10.77 79.246,79.246 0 0 0 -51.5,-19.14 l 26.677,-17.3 a 8,8 0 1 0 -8.706,-13.424 c 0,0 -77.612,48.021 -80.83,48.322 H 50.783 A 17.112,17.112 0 0 1 38.9,310.239 Z M 49.25,376 a 63.773,63.773 0 0 1 12.542,-38.027 l 30.38,20.256 A 39.989,39.989 0 0 0 159.984,400 h 11.266 a 14.008,14.008 0 0 0 12.366,-7.453 l 62.233,-6.807 a 47.987,47.987 0 0 1 -68.871,23.665 8,8 0 0 0 -10.683,2.41 A 64,64 0 0 1 49.25,376 Z M 184,480 h -62.75 v -24.407 a 79.958,79.958 0 0 0 54.05,-29.093 63.848,63.848 0 0 0 8.7,3.117 z m 16,0 v -48.033 c 0.417,0.008 0.833,0.033 1.25,0.033 a 63.7,63.7 0 0 0 40.828,-14.685 L 247.306,480 Z m 97.512,-88 H 280.79 a 2.015,2.015 0 0 1 -1.928,-1.447 l -2.333,-8.169 21.38,-2.338 z M 185.25,376.273 v -16.1 l 151.45,-16.553 0.109,16.076 z m 128.3,14.857 0.426,-12.841 22.943,-2.51 0.088,13.009 z m 32.579,-180.057 -9.507,-4.473 a 32.2,32.2 0 0 0 6.819,-14.468 l 8.237,3.875 z m 31.117,174.368 -24,4.8 v -23.379 c 0,-0.054 0,-0.108 0,-0.162 v -0.141 l 24,-4.8 z m 75.978,-26.02 -26.716,-8.821 a 7.953,7.953 0 0 0 -3.378,-0.356 l -32.045,3.507 a 15.946,15.946 0 0 0 -16.978,-7.686 l -21.36,4.272 -0.058,-8.468 72.181,-7.891 a 7.967,7.967 0 0 0 3.475,-1.235 l 18.948,-12.256 31.008,6.318 1.973,20.281 z"
								fill="#000000" data-original="#000000" class="" id="path8" style="fill: #adadad" />
						</g>
					</g>
				</svg>

				<div class="track-information-texts" id="trackArtistName"></div>
			</div>
			<div>
				<svg version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 128 128" xml:space="preserve"
					class="track-information-icon" id="svg10" sodipodi:docname="album.svg"
					style="enable-background: new 0 0 512 512" inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
					xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
					xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
					xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
					<defs id="defs14" />
					<sodipodi:namedview id="namedview12" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
						inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
						inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="1.3037281" inkscape:cx="239.69721"
						inkscape:cy="310.64759" inkscape:window-width="1440" inkscape:window-height="837"
						inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"
						inkscape:current-layer="g6" />
					<g id="g8" style="fill: #adadad" transform="matrix(1.1226926,0,0,1.1226926,-7.7232168,-8.2621092)">
						<g id="g6" style="fill: #adadad">
							<path
								d="m 99.1269,17.0169 h -61.88 a 11.149,11.149 0 0 0 -11.03,9.678 11.148,11.148 0 0 0 -9.68,11.032 v 61.87 a 11.157,11.157 0 0 0 11.14,11.15 h 61.88 a 11.15,11.15 0 0 0 11.031,-9.677 11.15,11.15 0 0 0 9.679,-11.033 v -61.88 a 11.153,11.153 0 0 0 -11.14,-11.14 z m -9.57,90.23 h -61.88 a 7.653,7.653 0 0 1 -7.64,-7.65 v -61.87 a 7.651,7.651 0 0 1 6.07,-7.476 v 59.786 a 11.153,11.153 0 0 0 11.14,11.14 h 59.784 a 7.653,7.653 0 0 1 -7.474,6.07 z m 17.21,-17.21 a 7.649,7.649 0 0 1 -7.64,7.64 h -61.88 a 7.649,7.649 0 0 1 -7.64,-7.64 v -61.88 a 7.648,7.648 0 0 1 7.64,-7.64 h 61.88 a 7.648,7.648 0 0 1 7.64,7.64 z"
								fill="#000000" data-original="#000000" id="path2" style="fill: #adadad" />
							<path
								d="m 89.1739,35.3049 a 1.751,1.751 0 0 0 -1.484,-0.335 l -25.081,5.795 a 1.751,1.751 0 0 0 -1.356,1.705 v 24.528 a 9.1,9.1 0 1 0 3.5,7.161 v -21.4 l 21.581,-4.986 v 13.221 a 9.1,9.1 0 1 0 3.5,7.162 v -31.481 a 1.752,1.752 0 0 0 -0.66,-1.37 z m -33.528,44.461 a 5.607,5.607 0 1 1 5.607,-5.607 5.614,5.614 0 0 1 -5.607,5.607 z m 9.107,-35.9 21.581,-4.987 v 5.305 l -21.581,4.982 z m 15.975,29.9 a 5.607,5.607 0 1 1 5.606,-5.606 5.613,5.613 0 0 1 -5.606,5.602 z"
								fill="#000000" data-original="#000000" id="path4" style="fill: #adadad" />
						</g>
					</g>
				</svg>

				<div class="track-information-texts" id="trackAlbumName"></div>
			</div>
		</section>
		<section class="track-progress">
			<div class="track-time" id="currentTrackTimeNumber">0:00</div>
			<div class="track-progress-bar" id="trackProgressBar">
				<div id="trackLoading"></div>
				<div class="track-current-time-progress-bar" id="currentTrackTimeBar"></div>
			</div>
			<div class="track-time" id="currentTrackDuration">0:00</div>
		</section>
		<section class="buttons">
			<div class="button" id="previousButton">
				<svg version="1.1" width="549.64148" height="512.31622" x="0" y="0" viewBox="0 0 49.403337 46.048437"
					xml:space="preserve" class="" id="svg40"
					sodipodi:docname="next.svg.2022_09_13_01_11_39.0 - Copy.svg"
					inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
					xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
					xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
					xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
					<defs id="defs44" />
					<sodipodi:namedview id="namedview42" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
						inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
						inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="0.39333333" inkscape:cx="279.66102"
						inkscape:cy="264.40678" inkscape:window-width="1440" inkscape:window-height="837"
						inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"
						inkscape:current-layer="svg40" />
					<g id="g38" style="fill: #ffffff" transform="matrix(-1,0,0,1,36.965131,0.02843878)">
						<g id="g6" style="fill: #ffffff">
							<g id="g4" style="fill: #ffffff">
								<path
									d="m 14.757,46.02 c -1.412,0 -2.825,-0.521 -3.929,-1.569 -2.282,-2.17 -2.373,-5.78 -0.204,-8.063 L 23.382,22.97 10.637,9.645 C 8.46,7.37 8.54,3.76 10.816,1.582 c 2.277,-2.178 5.886,-2.097 8.063,0.179 l 16.505,17.253 c 2.104,2.2 2.108,5.665 0.013,7.872 L 18.893,44.247 c -1.123,1.177 -2.626,1.773 -4.136,1.773 z"
									fill="#ffffff" data-original="#000000" id="path2" style="fill: #ffffff" />
							</g>
						</g>
						<g id="g8" style="fill: #ffffff"></g>
						<g id="g10" style="fill: #ffffff"></g>
						<g id="g12" style="fill: #ffffff"></g>
						<g id="g14" style="fill: #ffffff"></g>
						<g id="g16" style="fill: #ffffff"></g>
						<g id="g18" style="fill: #ffffff"></g>
						<g id="g20" style="fill: #ffffff"></g>
						<g id="g22" style="fill: #ffffff"></g>
						<g id="g24" style="fill: #ffffff"></g>
						<g id="g26" style="fill: #ffffff"></g>
						<g id="g28" style="fill: #ffffff"></g>
						<g id="g30" style="fill: #ffffff"></g>
						<g id="g32" style="fill: #ffffff"></g>
						<g id="g34" style="fill: #ffffff"></g>
						<g id="g36" style="fill: #ffffff"></g>
					</g>
					<g id="g38-4" style="fill: #ffffff" transform="matrix(-1,0,0,1,58.458378,1.7267946e-4)">
						<g id="g6-1" style="fill: #ffffff">
							<g id="g4-3" style="fill: #ffffff">
								<path
									d="m 14.757,46.02 c -1.412,0 -2.825,-0.521 -3.929,-1.569 -2.282,-2.17 -2.373,-5.78 -0.204,-8.063 L 23.382,22.97 10.637,9.645 C 8.46,7.37 8.54,3.76 10.816,1.582 c 2.277,-2.178 5.886,-2.097 8.063,0.179 l 16.505,17.253 c 2.104,2.2 2.108,5.665 0.013,7.872 L 18.893,44.247 c -1.123,1.177 -2.626,1.773 -4.136,1.773 z"
									fill="#ffffff" data-original="#000000" id="path2-8" style="fill: #ffffff" />
							</g>
						</g>
						<g id="g8-2" style="fill: #ffffff"></g>
						<g id="g10-1" style="fill: #ffffff"></g>
						<g id="g12-1" style="fill: #ffffff"></g>
						<g id="g14-4" style="fill: #ffffff"></g>
						<g id="g16-0" style="fill: #ffffff"></g>
						<g id="g18-8" style="fill: #ffffff"></g>
						<g id="g20-2" style="fill: #ffffff"></g>
						<g id="g22-3" style="fill: #ffffff"></g>
						<g id="g24-3" style="fill: #ffffff"></g>
						<g id="g26-8" style="fill: #ffffff"></g>
						<g id="g28-1" style="fill: #ffffff"></g>
						<g id="g30-3" style="fill: #ffffff"></g>
						<g id="g32-8" style="fill: #ffffff"></g>
						<g id="g34-2" style="fill: #ffffff"></g>
						<g id="g36-2" style="fill: #ffffff"></g>
					</g>
				</svg>
			</div>
			<div class="button" id="playButton">
				<svg version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 32 32" xml:space="preserve"
					class="" id="svg7" sodipodi:docname="play.svg" inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
					xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
					xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
					xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
					<defs id="defs11" />
					<sodipodi:namedview id="namedview9" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
						inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
						inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="0.70710678" inkscape:cx="277.89296"
						inkscape:cy="246.07316" inkscape:window-width="1440" inkscape:window-height="837"
						inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"
						inkscape:current-layer="svg7" />
					<g id="g411" transform="matrix(1.1428832,0,0,1.1428832,-1.3924967,-2.2857665)"
						style="fill: #ffffff">
						<g id="g409" data-name="01-Play" style="fill: #ffffff">
							<path
								d="M 26.17,12.37 9,2.45 A 3.23,3.23 0 0 0 7.38,2 3.38,3.38 0 0 0 4,5.38 v 21.29 a 3.33,3.33 0 0 0 5.1,2.82 L 26.29,18.63 a 3.65,3.65 0 0 0 -0.12,-6.26 z"
								fill="#ffffff" data-original="#000000" id="path407" style="fill: #ffffff" />
						</g>
					</g>
				</svg>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
					width="512" height="512" x="0" y="0" viewBox="0 0 47.607 47.607" style="
					enable-background: new 0 0 512 512;
					opacity: 0;
					position: absolute;
				  " xml:space="preserve" class="">
					<g>
						<g xmlns="http://www.w3.org/2000/svg">
							<path
								d="M17.991,40.976c0,3.662-2.969,6.631-6.631,6.631l0,0c-3.662,0-6.631-2.969-6.631-6.631V6.631C4.729,2.969,7.698,0,11.36,0   l0,0c3.662,0,6.631,2.969,6.631,6.631V40.976z"
								fill="#ffffff" data-original="#000000"></path>
							<path
								d="M42.877,40.976c0,3.662-2.969,6.631-6.631,6.631l0,0c-3.662,0-6.631-2.969-6.631-6.631V6.631   C29.616,2.969,32.585,0,36.246,0l0,0c3.662,0,6.631,2.969,6.631,6.631V40.976z"
								fill="#ffffff" data-original="#000000"></path>
						</g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
						<g xmlns="http://www.w3.org/2000/svg"></g>
					</g>
				</svg>
			</div>
			<div class="button" id="nextButton">
				<svg version="1.1" width="549.64148" height="512.31622" x="0" y="0" viewBox="0 0 49.403337 46.048437"
					xml:space="preserve" class="" id="svg40" sodipodi:docname="next.svg.2022_09_13_01_11_39.0.svg"
					inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
					xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
					xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
					xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
					<defs id="defs44" />
					<sodipodi:namedview id="namedview42" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
						inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
						inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="0.39333333" inkscape:cx="277.11865"
						inkscape:cy="264.40678" inkscape:window-width="1440" inkscape:window-height="837"
						inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"
						inkscape:current-layer="svg40" />
					<g id="g38" style="fill: #ffffff" transform="translate(12.438204,0.02843878)">
						<g id="g6" style="fill: #ffffff">
							<g id="g4" style="fill: #ffffff">
								<path
									d="m 14.757,46.02 c -1.412,0 -2.825,-0.521 -3.929,-1.569 -2.282,-2.17 -2.373,-5.78 -0.204,-8.063 L 23.382,22.97 10.637,9.645 C 8.46,7.37 8.54,3.76 10.816,1.582 c 2.277,-2.178 5.886,-2.097 8.063,0.179 l 16.505,17.253 c 2.104,2.2 2.108,5.665 0.013,7.872 L 18.893,44.247 c -1.123,1.177 -2.626,1.773 -4.136,1.773 z"
									fill="#ffffff" data-original="#000000" id="path2" style="fill: #ffffff" />
							</g>
						</g>
						<g id="g8" style="fill: #ffffff"></g>
						<g id="g10" style="fill: #ffffff"></g>
						<g id="g12" style="fill: #ffffff"></g>
						<g id="g14" style="fill: #ffffff"></g>
						<g id="g16" style="fill: #ffffff"></g>
						<g id="g18" style="fill: #ffffff"></g>
						<g id="g20" style="fill: #ffffff"></g>
						<g id="g22" style="fill: #ffffff"></g>
						<g id="g24" style="fill: #ffffff"></g>
						<g id="g26" style="fill: #ffffff"></g>
						<g id="g28" style="fill: #ffffff"></g>
						<g id="g30" style="fill: #ffffff"></g>
						<g id="g32" style="fill: #ffffff"></g>
						<g id="g34" style="fill: #ffffff"></g>
						<g id="g36" style="fill: #ffffff"></g>
					</g>
					<g id="g38-4" style="fill: #ffffff" transform="translate(-9.0550423,1.7267946e-4)">
						<g id="g6-1" style="fill: #ffffff">
							<g id="g4-3" style="fill: #ffffff">
								<path
									d="m 14.757,46.02 c -1.412,0 -2.825,-0.521 -3.929,-1.569 -2.282,-2.17 -2.373,-5.78 -0.204,-8.063 L 23.382,22.97 10.637,9.645 C 8.46,7.37 8.54,3.76 10.816,1.582 c 2.277,-2.178 5.886,-2.097 8.063,0.179 l 16.505,17.253 c 2.104,2.2 2.108,5.665 0.013,7.872 L 18.893,44.247 c -1.123,1.177 -2.626,1.773 -4.136,1.773 z"
									fill="#ffffff" data-original="#000000" id="path2-8" style="fill: #ffffff" />
							</g>
						</g>
						<g id="g8-2" style="fill: #ffffff"></g>
						<g id="g10-1" style="fill: #ffffff"></g>
						<g id="g12-1" style="fill: #ffffff"></g>
						<g id="g14-4" style="fill: #ffffff"></g>
						<g id="g16-0" style="fill: #ffffff"></g>
						<g id="g18-8" style="fill: #ffffff"></g>
						<g id="g20-2" style="fill: #ffffff"></g>
						<g id="g22-3" style="fill: #ffffff"></g>
						<g id="g24-3" style="fill: #ffffff"></g>
						<g id="g26-8" style="fill: #ffffff"></g>
						<g id="g28-1" style="fill: #ffffff"></g>
						<g id="g30-3" style="fill: #ffffff"></g>
						<g id="g32-8" style="fill: #ffffff"></g>
						<g id="g34-2" style="fill: #ffffff"></g>
						<g id="g36-2" style="fill: #ffffff"></g>
					</g>
				</svg>
			</div>
			<div class="button volume-wrapper" id="volumeWrapper">
				<div class="volume-number" id="volumeNumber">100</div>
				<div class="volume-button" id="volumeButton">
					<div class="main-volume-button">
						<svg version="1.1" width="474.216" height="418.98331" x="0" y="0" viewBox="0 0 59.277 52.372913"
							xml:space="preserve" class="" id="svg10" sodipodi:docname="volume - Copy.svg"
							inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
							xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
							xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
							xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
							<defs id="defs14" />
							<sodipodi:namedview id="namedview12" pagecolor="#ffffff" bordercolor="#000000"
								borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0"
								inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false"
								inkscape:zoom="0.4609375" inkscape:cx="238.64407" inkscape:cy="210.44068"
								inkscape:window-width="1440" inkscape:window-height="837" inkscape:window-x="-8"
								inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g6" />
							<g id="g6" style="fill: #666666" transform="translate(-2.361,-5.814087)">
								<path
									d="M 42.75,6.963 C 39.885,5.369 36.405,5.437 33.593,7.146 l -14.232,8.693 h -7.205 c -5.401,0 -9.795,4.394 -9.795,9.795 v 12.728 c 0,5.386 4.394,9.768 9.795,9.768 h 7.205 l 14.22,8.685 c 1.446,0.897 3.079,1.372 4.721,1.372 1.519,0 3.057,-0.409 4.447,-1.182 2.916,-1.619 4.657,-4.583 4.657,-7.928 V 14.891 C 47.408,11.532 45.716,8.646 42.75,6.963 Z M 17.924,44.129 h -5.767 c -3.195,0 -5.795,-2.587 -5.795,-5.768 V 25.634 c 0,-3.195 2.6,-5.795 5.795,-5.795 h 5.767 z m 25.484,4.947 c 0,1.898 -0.947,3.514 -2.6,4.432 -1.672,0.929 -3.509,0.904 -5.129,-0.101 l -13.754,-8.4 V 18.961 l 13.75,-8.399 c 1.621,-0.984 3.494,-1.013 5.117,-0.111 1.687,0.958 2.616,2.534 2.616,4.44 z"
									fill="#ffffff" data-original="#000000" id="path2" style="fill: #ffffff"
									sodipodi:nodetypes="cccssssccscscccssssccsccccccss" />
							</g>
						</svg>
					</div>
					<div class="waves-volume-button" id="wavesVolumeButton">
						<div class="low-volume-button">
							<svg version="1.1" width="474.216" height="418.98331" x="0" y="0"
								viewBox="0 0 59.277 52.372913" xml:space="preserve" class="" id="svg10"
								sodipodi:docname="volume - Copy (2).svg"
								inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
								xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
								xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
								xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
								<defs id="defs14" />
								<sodipodi:namedview id="namedview12" pagecolor="#ffffff" bordercolor="#000000"
									borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0"
									inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false"
									inkscape:zoom="0.4609375" inkscape:cx="238.64407" inkscape:cy="210.44068"
									inkscape:window-width="1440" inkscape:window-height="837" inkscape:window-x="-8"
									inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g6" />
								<g id="g6" style="fill: #666666" transform="translate(-2.361,-5.814087)">
									<path
										d="m 55.482,39.258 c -0.789,-0.774 -2.056,-0.763 -2.828,0.027 -0.773,0.789 -0.761,2.056 0.028,2.828 l 1.389,1.361 c 0.389,0.382 0.895,0.572 1.4,0.572 0.519,0 1.037,-0.2 1.428,-0.6 0.773,-0.789 0.761,-2.056 -0.028,-2.828 z"
										fill="#ffffff" data-original="#000000" id="lowVolumeSymbol"
										style="fill: #ffffff" sodipodi:nodetypes="ccccsccc" />
								</g>
							</svg>
						</div>
						<div class="medium-volume-button">
							<svg version="1.1" width="474.216" height="418.98331" x="0" y="0"
								viewBox="0 0 59.277 52.372913" xml:space="preserve" class="" id="svg10"
								sodipodi:docname="volume - Copy (3).svg"
								inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
								xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
								xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
								xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
								<defs id="defs14" />
								<sodipodi:namedview id="namedview12" pagecolor="#ffffff" bordercolor="#000000"
									borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0"
									inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false"
									inkscape:zoom="0.4609375" inkscape:cx="238.64407" inkscape:cy="210.44068"
									inkscape:window-width="1440" inkscape:window-height="837" inkscape:window-x="-8"
									inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g6" />
								<g id="g6" style="fill: #666666" transform="translate(-2.361,-5.814087)">
									<path
										d="m 59.638,29.983 h -1.956 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 1.956 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
										fill="#ffffff" data-original="#000000" id="mediumVolumeSymbol"
										style="fill: #ffffff" sodipodi:nodetypes="sssssss" />
								</g>
							</svg>
						</div>
						<div class="high-volume-button">
							<svg version="1.1" width="474.216" height="418.98331" x="0" y="0"
								viewBox="0 0 59.277 52.372913" xml:space="preserve" class="" id="svg10"
								sodipodi:docname="volume - Copy (4).svg"
								inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
								xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
								xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
								xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
								<defs id="defs14" />
								<sodipodi:namedview id="namedview12" pagecolor="#ffffff" bordercolor="#000000"
									borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0"
									inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false"
									inkscape:zoom="0.4609375" inkscape:cx="238.64407" inkscape:cy="210.44068"
									inkscape:window-width="1440" inkscape:window-height="837" inkscape:window-x="-8"
									inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g6" />
								<g id="g6" style="fill: #666666" transform="translate(-2.361,-5.814087)">
									<path
										d="m 54.082,25.31 c 0.512,0 1.024,-0.195 1.414,-0.586 l 1.389,-1.389 c 0.781,-0.781 0.781,-2.047 0,-2.828 -0.78,-0.781 -2.048,-0.781 -2.828,0 l -1.389,1.389 c -0.781,0.781 -0.781,2.047 0,2.828 0.39,0.39 0.902,0.586 1.414,0.586 z"
										fill="#ffffff" data-original="#000000" id="highVolumeSymbol"
										style="fill: #ffffff" sodipodi:nodetypes="scsccsss" />
								</g>
							</svg>
						</div>
					</div>
					<div class="volume-cross" id="volumeCross">
						<svg version="1.1" width="474.216" height="418.983" x="0" y="0" viewBox="0 0 59.277 52.372875"
							xml:space="preserve" class="" id="svg11" sodipodi:docname="volume-cross.svg"
							inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
							xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
							xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
							xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
							<defs id="defs15" />
							<sodipodi:namedview id="namedview13" pagecolor="#ffffff" bordercolor="#000000"
								borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0"
								inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false"
								inkscape:zoom="0.921875" inkscape:cx="221.28814" inkscape:cy="252.74576"
								inkscape:window-width="1440" inkscape:window-height="837" inkscape:window-x="-8"
								inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg11"
								showguides="false" />
							<g id="g9" style="fill: #ffffff"
								transform="matrix(0.0432537,0,0,0.0432537,45.410256,19.253064)">
								<g id="g7" style="fill: #ffffff">
									<g id="close_1_" style="fill: #ffffff">
										<path
											d="m 30.391,318.583 c -7.86,0.457 -15.59,-2.156 -21.56,-7.288 -11.774,-11.844 -11.774,-30.973 0,-42.817 L 266.643,10.665 c 12.246,-11.459 31.462,-10.822 42.921,1.424 10.362,11.074 10.966,28.095 1.414,39.875 L 51.647,311.295 c -5.893,5.058 -13.499,7.666 -21.256,7.288 z"
											fill="#ffffff" data-original="#000000" class="" id="path2"
											style="fill: #ffffff" />
										<path
											d="m 287.9,318.583 c -7.966,-0.034 -15.601,-3.196 -21.257,-8.806 L 8.83,51.963 C -2.078,39.225 -0.595,20.055 12.143,9.146 c 11.369,-9.736 28.136,-9.736 39.504,0 l 259.331,257.813 c 12.243,11.462 12.876,30.679 1.414,42.922 -0.456,0.487 -0.927,0.958 -1.414,1.414 -6.35,5.522 -14.707,8.161 -23.078,7.288 z"
											fill="#ffffff" data-original="#000000" class="" id="path4"
											style="fill: #ffffff" />
									</g>
								</g>
							</g>
						</svg>
					</div>
				</div>
			</div>
		</section>
	</section>
	<script src="index.js"></script>
</body>

</html>
```

## 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 = [
  {
    trackName: "Losing Control",
    artist: "Villain of the story",
    album: "Divided",
    coverImage: "https://i.postimg.cc/y62Drhym/image.jpg",
    audioSource:
      "https://cdns-preview-4.dzcdn.net/stream/c-465dbacd317d67cc6a4d1adb22355970-2.mp3"
  },
  {
    trackName: "Senden Baska",
    artist: "Serhet Durmus",
    album: "Singles",
    coverImage: "https://i.postimg.cc/cCtNnnKZ/image.jpg",
    audioSource:
      "https://cdns-preview-9.dzcdn.net/stream/c-94e53a428fd9dbf35c5b06d800447c2a-4.mp3"
  },
  {
    trackName: "I don't care",
    artist: "Apocalyptica",
    album: "Singles",
    coverImage: "https://i.postimg.cc/BZj8g7HZ/image.jpg",
    audioSource:
      "https://cdns-preview-d.dzcdn.net/stream/c-dbbdb0dd57e34c52b2379fb69bc7da4f-3.mp3"
  },
  {
    trackName: "Monster",
    artist: "Fight the Fade",
    album: "APOPHYSITIS",
    coverImage: "https://i.postimg.cc/BnS4htk5/image.jpg",
    audioSource:
      "https://cdns-preview-4.dzcdn.net/stream/c-46413a2a74ddd53a2f13ef2b853202f7-3.mp3"
  },

  {
    trackName: "Dance With the Devil",
    artist: "Breaking Benjamin",
    album: "Phobia",
    coverImage: "https://i.postimg.cc/15Xzmj0J/image.jpg",
    audioSource:
      "https://cdns-preview-b.dzcdn.net/stream/c-b2bbd0db3fb9e1314ef56dfc11c86a65-5.mp3"
  },
  {
    trackName: "The Catalyst",
    artist: "Linkin Park",
    album: "A Thousand Sun",
    coverImage: "https://i.postimg.cc/FK3jRqxM/image.jpg",
    audioSource:
      "https://cdns-preview-8.dzcdn.net/stream/c-8930ac6a4a087666b651b8aad5cd4a26-5.mp3"
  },
  {
    trackName: "Lali",
    artist: "Jony",
    album: "Spisok tvoikh mysley",
    coverImage: "https://i.postimg.cc/hvyGBHCW/image.jpg",
    audioSource:
      "https://cdns-preview-0.dzcdn.net/stream/c-095471cd71c784daa9eab6beb69c5848-3.mp3"
  }
];

musics.forEach((item, index) => {
  trackItemsWrapper.innerHTML += `<div class="track-item" data-index="${index}">${
    index + 1
  }. ${item.trackName}</div>`;
});

trackItemsWrapper.firstElementChild.classList.add("active");

function informationUpdate(target) {
  target = target ? target : 0;
  coverImage.src = "";
  coverImage.src = musics[target].coverImage;
  audioTrack.src = musics[target].audioSource;
  trackArtistName.textContent = musics[target].artist;
  trackAlbumName.textContent = musics[target].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 < 10) {
    currentSeconds = "0" + currentSeconds;
  }

  currentTrackTimeNumber.textContent = `${currentMinute}:${currentSeconds}`;

  currentTrackTimeBar.style.width =
    (currentTime / audioTrack.duration) * 100 + "%";

  requestAnimationFrame(currentTimeUpdater);
});

audioTrack.addEventListener("canplay", canPlayEvent);

audioTrack.addEventListener("durationchange", canPlayEvent);

function canPlayEvent(e) {
  let totalTime = audioTrack.duration;

  let totalMinute = Math.trunc(totalTime / 60);
  let totalSeconds = Math.trunc(totalTime % 60);

  if (totalSeconds < 10) {
    totalSeconds = "0" + totalSeconds;
  }

  currentTrackDuration.textContent = `${totalMinute}:${totalSeconds}`;
}

trackProgressBar.addEventListener("pointerdown", (e) => {
  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;
  }
  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[targetIndex].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[targetIndex].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;

      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 < currentVolume:
      highVolumeSymbol.style.fill = "white";
      mediumVolumeSymbol.style.fill = "white";
      lowVolumeSymbol.style.fill = "white";
      wavesVolumeButton.style.opacity = 1;
      volumeCross.style.opacity = 0;
      if (wasPlaying) {
        audioTrack.play();
        wasPlaying = false;
      }
      break;

    case 0.33 < currentVolume && currentVolume < 0.66:
      highVolumeSymbol.style.fill = "#808080";
      mediumVolumeSymbol.style.fill = "white";
      lowVolumeSymbol.style.fill = "white";
      wavesVolumeButton.style.opacity = 1;
      volumeCross.style.opacity = 0;
      if (wasPlaying) {
        audioTrack.play();
        wasPlaying = false;
      }
      break;

    case 0 < currentVolume && currentVolume < 0.33:
      highVolumeSymbol.style.fill = "#808080";
      mediumVolumeSymbol.style.fill = "#808080";
      lowVolumeSymbol.style.fill = "white";
      wavesVolumeButton.style.opacity = 1;
      volumeCross.style.opacity = 0;
      if (wasPlaying) {
        audioTrack.play();
        wasPlaying = false;
      }
      break;

    case currentVolume == 0:
      wavesVolumeButton.style.opacity = 0;
      volumeCross.style.opacity = 1;
      if (!audioTrack.paused) {
        wasPlaying = true;
        audioTrack.pause();
      }
      break;
  }

  volumeNumberUpdate();
});

document.addEventListener("keydown", (e) => {
  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();
  });
});

```