Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                //- Container
.container
	//-- Player
	.player
		.contentWrapper
			//--- Music Switch
			.musicSwitch
				#prev.button._prev
				#next.button._next
			//--- Album
			#jsAlbum
				.album._play
					.album__internal
			//--- Music Info
			.musicInfo
				h1.musicInfo__name Put On Your Sunday
				h2.musicInfo__author Jerry Herman
			//--- Music Time
			.musicTime
				p.musicTime__current 00:00
				p.musicTime__last 05:01
			//--- Music Bar
			#progress.musicBar
				#length.musicBar__length
					.button.musicBar__circle
						.musicBar__circlePoint
			//--- Music Order
			.musicOrder
				#loop.musicOrder__loop._loop
				#shuffle.musicOrder__shuffle
			//--- Music Control
			.musicControl
				#backward.button.musicControl__backward
				#play.button.musicControl__play._play
				#forward.button.musicControl__forward
				
//- Social links
.social
	ul.socialList
		li.socialList__item
			a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
		li.socialList__item
			a.socialList__link(href="https://codepen.io/Astap" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
					line(x1="12" y1="22" x2="12" y2="15.5")
					polyline(points="22 8.5 12 15.5 2 8.5")
					polyline(points="2 15.5 12 8.5 22 15.5")
					line(x1="12" y1="2" x2="12" y2="8.5")
		li.socialList__item
			a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
              
            
!

CSS

              
                /*____________________________________________________________

# Variables
# Auxiliary styles
# Container
	## Player
		### Music Switch
		### Album
		### Music Info
		### Music Time
		### Music Bar
		### Music Order
		### Music Control
# @media
	## @media 433px
	## @media 414px
	## @media 375px
	## @media 320px
	## @media Height 850px
	## @media Height 690px
	## @media Height 530px
	## @media Height 360px
	## @media Height 300px
	## @media Height 230px

____________________________________________________________*/

/*____________________________________________________________
# Variables
____________________________________________________________*/
$palettePrimary: #f5f6e7;
$paletteTitleColor: #424234;
$paletteTextColor:  #a3a496;
$paletteMusicBar:  #efefef;
$paletteControlButtons:  #749064;

$paletteLightShadow: #fff;
$paletteDarkShadow: #ccc;

/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
* {
	padding: 0;
	margin: 0;
	outline: none;
	box-sizing: border-box;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar {
	width: 0;
}

/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
	width: 100%;
	height: 100vh;
	background-color: $palettePrimary;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/bg/bg.png');
}

/*____________________________________________________________
## Player
____________________________________________________________*/
.player {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 433px;
	height: 814px;
	transform: translate(-50%, -50%);
	border-radius: 50px;
	background-color: $palettePrimary;
	box-shadow: -3px -3px 9px 0.1px $paletteLightShadow, 3px 3px 9px 0.1px $paletteDarkShadow;
	overflow: hidden;
}
.contentWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 365px;
	height: 708px;
	transform: translate(-50%, -50%);
}

/*____________________________________________________________
### Music Switch
____________________________________________________________*/
.musicSwitch {
	position: absolute;
	left: 50%;
	height: 44px;
	width: 340px;
	transform: translateX(-50%);

	._prev,
	._next {
		width: 44px;
		height: 44px;
	}
	._prev {
		float: left;

		&:before {
			background-position: 8px center;
			background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/prev.png');
		}
	}
	._next {
		float: right;

		&:before {
			background-position: 10px center;
			background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/next.png');
		}
	}
}

.button {
	background: $palettePrimary;
	border-radius: 50%;
	box-shadow: -3px -3px 9px 0.1px $paletteLightShadow, 3px 3px 9px 0.1px $paletteDarkShadow;
	position: relative;
	cursor: pointer;

	&:before {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		content: "";
		background-color: $palettePrimary;
		width: 85%;
		height: 85%;
		display: inline-block;
		border-radius: 50%;
		box-shadow: -1px -1px 2px 0.1px #fff, 5px 5px 10px 0.1px #ccc;
		background-size: 50%;
		background-repeat: no-repeat;
	}

	&:active:before {
		background-size: 49%;
		box-shadow: inset -3px -3px 5px 0.1px #fff, inset 3px 3px 5px 0.7px #ccc;
	}
}

/*____________________________________________________________
### Album
____________________________________________________________*/
@mixin albumBgMix($albumBgName, $bgPath) {
	.#{$albumBgName} {
		.album:before {
			background-image: url(#{$bgPath});
		}
	}
}

@include albumBgMix('jerryHerman', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jerryHerman.jpg');
@include albumBgMix('elvisPresley', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/elvisPresley.jpg');
@include albumBgMix('royOrbison', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/royOrbison.jpg');
@include albumBgMix('frankSinatra', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/frankSinatra.jpg');
@include albumBgMix('jimCroce', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jimCroce.jpg');
@include albumBgMix('redHotChiliPeppers', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/redHotChiliPeppers.jpg');
@include albumBgMix('stephaneGrappelli', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/stephaneGrappelli.jpg');
@include albumBgMix('evanKing', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/evanKing.jpg');
@include albumBgMix('JR', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/JR.jpg');
@include albumBgMix('theDeli', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/theDeli.png');

.album {
	position: absolute;
	top: 86px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	width: 300px;
	height: 300px;
	border-radius: 100%;
	text-align: center;
	box-shadow: 15px 15px 30px -10px rgba(0,0,0,0.15),
				-20px -20px 20px -10px rgba(255,255,255,1),
				-0.5px -0.5px 0 rgba(255,255,255,1),
				0.5px 0.5px 0 rgba(0,0,0,0.02);
	z-index: 5;
	background-color: $palettePrimary;

	&._pause {
		&:before {
			animation: rotateAlbum 15s linear infinite;
		}
	}

	&:before {
		position: absolute;
		content: '';
		display: block;
		width: 85%;
		height: 85%;
		border-radius: inherit;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.3),
		            inset -4px -4px 6px -1px rgba(0,0,0,0.3);
		background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jerryHerman.jpg');
		background-size: cover;
		background-color: transparent;
		animation: rotateAlbum 15s linear infinite paused;
	}
	&:after {
		position: absolute;
		content: '';
		display: block;
		width: 70%;
		height: 70%;
		border-radius: inherit;
		left: 50%;
		top: 50%;
		background-color: rgba(0,0,0,0.025);
		border: 1px solid rgba(0,0,0,0.01);
		transform: translateX(-50%) translateY(-50%);
		box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.3),
		            inset -4px -4px 6px -1px rgba(0,0,0,0.3);
	}

	&__internal {
		position: relative;
		margin-top: 45px;
		display: inline-block;
		width: 210px;
		height: 210px;
		border-radius: 100%;
		text-align: center;

		&:before {
			position: absolute;
			content: '';
			display: block;
			width: 80%;
			height: 80%;
			border-radius: inherit;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.3),
			            inset -4px -4px 6px -1px rgba(0,0,0,0.3);
		}
	}
}

@keyframes rotateAlbum {
	0% {
		transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) translateY(-50%) rotate(-360deg);
	}
}

/*____________________________________________________________
### Music Info
____________________________________________________________*/
.musicInfo {
	position: absolute;
	top: 451px;
	left: 50%;
	transform: translateX(-50%);
	width: 185px;
	height: 58px;

	&__name {
		font-family: sans-serif;
		font-size: 30px;
		text-align: center;
		font-weight: 500;
		margin-bottom: 8px;
		color: $paletteTitleColor;
	}
	&__author {
		font-family: sans-serif;
		font-size: 15px;
		text-align: center;
		font-weight: 100;
		color: $paletteTextColor;
	}
}

/*____________________________________________________________
### Music Time
____________________________________________________________*/
.musicTime {
	position: absolute;
	top: 544px;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	height: 15px;

	&__current,
	&__last {
		font-family: sans-serif;
		font-size: 15px;
		text-align: center;
		font-weight: 100;
		color: $paletteTextColor;
	}
	&__current {
		float: left;
	}
	&__last {
		float: right;
	}
}

/*____________________________________________________________
### Music Bar
____________________________________________________________*/
.musicBar {
	position: absolute;
	top: 572px;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	height: 7px;
	border-radius: 5px;
	background-color: $paletteMusicBar;
	cursor: pointer;

	&__length {
		display: block;
		width: 0%;
		background-color: $paletteControlButtons;
		height: 100%;
		border-radius: 5px;
		transition: width linear 200ms;
	}
	&__circle {
		margin-top: -10px;
		margin-right: -13px;
		width: 27px;
		height: 27px;
		display: block;
		float: right;
		border-radius: 50%;
	}
	&__circlePoint {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background-color: $paletteControlButtons;
	}
}

/*____________________________________________________________
### Music Order
____________________________________________________________*/
.musicOrder {
	position: absolute;
	bottom: 22.5px;
	width: 100%;
	height: 22px;

	&__loop,
	&__shuffle {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
	}
	&__loop {
		float: left;
	}
	&__shuffle {
		float: right;
	}
	&__loop {
		width: 28.5px;
		height: 100%;
		background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/loop.png');
	}
	&__loop {
		&._repeat {
			background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/repeat.png');
		}
	}
	&__loop {
		&._off {
			opacity: .5;
		}
	}
	&__shuffle {
		width: 28.5px;
		height: 100%;
		background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/shuffle.png');
		opacity: .5;
	}
	&__shuffle {
		&._shuffle {
			opacity: 1;
		}
	}
}

/*____________________________________________________________
### Music Control
____________________________________________________________*/
.musicControl {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 255px;
	height: 67px;

	&__play {
		background-color: $paletteControlButtons;
		box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.2),
					-6px -6px 10px -1px rgba(255,255,255,0.05);

		&._pause,
		&._play {
			&:before {
				background-repeat: no-repeat;
				background-size: 35%;
			}
		}

		&._pause {
			&:before {
				background-position: 18px center;
				background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/pause.png');
			}
		}
		&._play {
			&:before {
				background-position: 20px center;
				background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/play.png');
			}
			&:active:before {
				background-size: 34%;
			}
		}

		&:before {
			background-color: $paletteControlButtons;
			box-shadow: -1px -1px 2px 0.1px rgba(0,0,0,0.2), 5px 5px 10px 0.1px rgba(0,0,0,0.2);
		}
		&:active:before {
			box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
						inset -4px -4px 6px -1px rgba(255,255,255,0.2);
		}
	}

	&__backward,
	&__play,
	&__forward {
		display: block;
		float: left;
	}
	&__backward,
	&__play {
		margin-right: 27px;
	}
	&__backward,
	&__play,
	&__forward {
		width: 67px;
		height: 67px;
	}

	&__backward {
		&:before {
			background-position: 12px center;
			background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/backward.png');
		}
	}
	&__forward {
		&:before {
			background-position: 16px center ;
			background-image: url('https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/icon/forward.png');
		}
	}
}

/*____________________________________________________________
# @media
____________________________________________________________*/
/*____________________________________________________________
## @media 433px
____________________________________________________________*/
@media screen and (max-width: 433px) {
	.player {
		width: 414px;
		height: 736px;
	}
	.contentWrapper {
		width: 350px;
		height: 677px;
	}
	.musicSwitch {
		height: 42px;
		width: 325px;

		._prev,
		._next {
			width: 42px;
			height: 42px;
		}
		._prev {
			&:before {
				background-position: 7px center;
			}
		}
		._next {
			&:before {
				background-position: 9px center;
			}
		}
	}
	.album {
		top: 82px;
		width: 287px;
		height: 287px;

		&__internal {
			margin-top: 43px;
			width: 201px;
			height: 201px;
		}
	}
	.musicInfo {
		top: 431px;
		width: 177px;
		height: 55px;

		&__name {
			font-size: 28px;
			margin-bottom: 7px;
		}
		&__author {
			font-size: 14px;
		}
	}
	.musicTime {
		top: 520px;
		width: 325px;
		height: 14px;

		&__current,
		&__last {
			font-size: 14px;
		}
	}
	.musicBar {
		top: 547px;
		width: 325px;
		height: 7px;

		&__length {
			transition: width linear 175ms;
		}
		&__circle {
			margin-top: -9.5px;
			margin-right: -12px;
			width: 26px;
			height: 26px;
		}
		&__circlePoint {
			width: 10.5px;
			height: 10.5px;
		}
	}
	.musicOrder {
		bottom: 21.5px;
		height: 21px;

		&__loop,
		&__shuffle {
			width: 27px;
		}
	}
	.musicControl {
		width: 244px;
		height: 64px;

		&__play {
			&._pause {
				&:before {
					background-position: 17px center;
				}
			}
		}
		&__play {
			&._play {
				&:before {
					background-position: 19px center;
				}
			}
		}
		&__backward,
		&__play {
			margin-right: 26px;
		}
		&__backward,
		&__play,
		&__forward {
			width: 64px;
			height: 64px;
		}
		&__backward {
			&:before {
				background-position: 11px center;
			}
		}
		&__forward {
			&:before {
				background-position: 15px center;
			}
		}
	}
	
	.social {
		display: none;
	}
}

/*____________________________________________________________
## @media 414px
____________________________________________________________*/
@media screen and (max-width: 414px) {
	.container {
		background-image: none;
	}
	.player {
		border-radius: 0;
		box-shadow: none;
	}
}

/*____________________________________________________________
## @media 375px
____________________________________________________________*/
@media screen and (max-width: 375px) {
	.player {
		width: 375px;
		height: 667px;
	}
	.contentWrapper {
		width: 316px;
		height: 613px;
	}
	.musicSwitch {
		height: 38px;
		width: 294px;

		._prev,
		._next {
			width: 38px;
			height: 38px;
		}
		._prev {
			&:before {
				background-position: 7px center;
			}
		}
		._next {
			&:before {
				background-position: 8.6px center;
			}
		}
	}
	.album {
		top: 74.5px;
		width: 260px;
		height: 260px;

		&__internal {
			margin-top: 39px;
			width: 182px;
			height: 182px;
		}
	}
	.musicInfo {
		top: 390px;
		width: 160px;
		height: 50px;

		&__name {
			font-size: 26px;
			margin-bottom: 7px;
		}
		&__author {
			font-size: 13px;
		}
	}
	.musicTime {
		top: 471px;
		width: 294px;
		height: 13px;

		&__current,
		&__last {
			font-size: 13px;
		}
	}
	.musicBar {
		top: 497px;
		width: 294px;
		height: 6px;

		&__circle {
			margin-top: -8.6px;
			margin-right: -11px;
			width: 23px;
			height: 23px;
		}
		&__circlePoint {
			width: 9.5px;
			height: 9.5px;
		}
	}
	.musicOrder {
		bottom: 19.5px;
		height: 19px;

		&__loop,
		&__shuffle {
			width: 25px;
		}
	}
	.musicControl {
		width: 221px;
		height: 58px;

		&__play {
			&._pause {
				&:before {
					background-position: 15.5px center;
				}
			}
		}
		&__play {
			&._play {
				&:before {
					background-position: 17px center;
				}
			}
		}
		&__backward,
		&__play {
			margin-right: 23.4px;
		}
		&__backward,
		&__play,
		&__forward {
			width: 58px;
			height: 58px;
		}
		&__backward {
			&:before {
				background-position: 10px center;
			}
		}
		&__forward {
			&:before {
				background-position: 14px center;
			}
		}
	}
}

/*____________________________________________________________
## @media 320px
____________________________________________________________*/
@media screen and (max-width: 320px) {
	.player {
		width: 320px;
		height: 568px;
	}
	.contentWrapper {
		width: 270px;
		height: 523px;
	}
	.musicSwitch {
		height: 32.5px;
		width: 251px;

		._prev,
		._next {
			width: 32.5px;
			height: 32.5px;
		}
		._prev {
			&:before {
				background-position: 6px center;
			}
		}
		._next {
			&:before {
				background-position: 7.4px center;
			}
		}
	}
	.album {
		top: 63.6px;
		width: 222px;
		height: 222px;

		&__internal {
			margin-top: 33.3px;
			width: 155px;
			height: 155px;
		}
	}
	.musicInfo {
		top: 333px;
		width: 136.7px;
		height: 43px;

		&__name {
			font-size: 22px;
			margin-bottom: 6px;
		}
		&__author {
			font-size: 11px;
		}
	}
	.musicTime {
		top: 402px;
		width: 251px;
		height: 11px;

		&__current,
		&__last {
			font-size: 11px;
		}
	}
	.musicBar {
		top: 423px;
		width: 251px;
		height: 5px;

		&__circle {
			margin-top: -7.4px;
			margin-right: -9.6px;
			width: 20px;
			height: 20px;
		}
		&__circlePoint {
			width: 8px;
			height: 8px;
		}
	}
	.musicOrder {
		bottom: 16.8px;
		height: 16.3px;

		&__loop,
		&__shuffle {
			width: 20.5px;
		}
	}
	.musicControl {
		width: 188.5px;
		height: 49.5px;

		&__play {
			&._pause {
				&:before {
					background-position: 13.3px center;
				}
			}
		}
		&__play {
			&._play {
				&:before {
					background-position: 14.8px center;
				}
			}
		}
		&__backward,
		&__play {
			margin-right: 20px;
		}
		&__backward,
		&__play,
		&__forward {
			width: 49.5px;
			height: 49.5px;
		}
		&__backward {
			&:before {
				background-position: 8.9px center;
			}
		}
		&__forward {
			&:before {
				background-position: 11.8px center;
			}
		}
	}
}

/*____________________________________________________________
## @media Height 850px
____________________________________________________________*/
@media screen and (min-width: 433px) and (max-height: 850px) {
	.player {
		transform: translate(-50%, -50%) scale(.8);
	}
}

/*____________________________________________________________
## @media Height 690px
____________________________________________________________*/
@media screen and (min-width: 433px) and (max-height: 690px) {
	.player {
		transform: translate(-50%, -50%) scale(.6);
	}
}

/*____________________________________________________________
## @media Height 530px
____________________________________________________________*/
@media screen and (min-width: 433px) and (max-height: 530px) {
	.player {
		transform: translate(-50%, -50%) scale(.4);
	}
}

/*____________________________________________________________
## @media Height 360px
____________________________________________________________*/
@media screen and (min-width: 433px) and (max-height: 360px) {
	.player {
		transform: translate(-50%, -50%) scale(.35);
	}
}

/*____________________________________________________________
## @media Height 300px
____________________________________________________________*/
@media screen and (min-width: 433px) and (max-height: 300px) {
	.player {
		transform: translate(-50%, -50%) scale(.25);
	}
}

/*____________________________________________________________
## @media Height 230px
____________________________________________________________*/
@media screen and (min-width: 433px) and (max-height: 230px) {
	.player {
		transform: translate(-50%, -50%) scale(.15);
	}
}

/*____________________________________________________________
# Social links
____________________________________________________________*/
.social {
	position: fixed;
	bottom: 0;
	left: 30px;
}
.socialList {
	list-style: none;
	
	&:after {
		content: '';
		display: block;
		margin: 0 auto;
		width: 1px;
		height: 40px;
		background: #749064;
	}
}
.socialList__item {
	margin-bottom: 10px;
	width: 20px;
	height: 20px;
	transition: transform .2s;
	
	&:hover {
		transform: translateY(-3px);
		
		.socialList__icon {
			stroke: #7dcbd8;
		}
	}
}

.socialList__icon {
	fill: none;
	stroke: #749064;
}
              
            
!

JS

              
                (function IIFE() {
	const list = [
	{
		id: 1,
		class: 'jerryHerman',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/JerryHerman_PutOnYourSundayClothes.mp3",
		author: "Jerry Herman",
		title: "Put On Your Sunday"
	},
	{
		id: 2,
		class: 'elvisPresley',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/ElvisPresley_CantHelpFallingInLove.mp3",
		author: "Elvis Presley",
		title: "Can't Falling In Love"
	},
	{
		id: 3,
		class: 'royOrbison',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/RoyOrbison_OhPrettyWoman.mp3",
		author: "Roy Orbison",
		title: "Oh, Pretty Woman"
	},
	{
		id: 4,
		class: 'frankSinatra',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/FrankSinatra_ThatsLife.mp3",
		author: "Frank Sinatra",
		title: "That's Life"
	},
	{
		id: 5,
		class: 'jimCroce',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/JimCroce_TimeInABottle.mp3",
		author: "Jim Croce",
		title: "Time In A Bottle"
	},
	{
		id: 6,
		class: 'redHotChiliPeppers',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/RedHotChiliPeppers_DarkNecessities.mp3",
		author: "Red Hot Chili Peppers",
		title: "Dark Necessities"
	},
	{
		id: 7,
		class: 'stephaneGrappelli',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/StephaneGrappelli_laMer.mp3",
		author: "Stephane Grappelli",
		title: "La Mer"
	},
	{
		id: 8,
		class: 'evanKing',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/EvanKing_Overwatch.mp3",
		author: "Evan King",
		title: "Overwatch"
	},
	{
		id: 9,
		class: 'JR',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/JR_SouthSac.mp3",
		author: "JR",
		title: "SouthSac"
	},
	{
		id: 10,
		class: 'theDeli',
		url: "https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/music/TheDeli_Sun.mp3",
		author: "The Deli",
		title: "Sun"
	}
];

let currentId = 0;
let isPlaying = false;
let isLoop = true;
let loopOne = false;
let isShuffle = false;
let currentAudio = "music1";
let timer = null;

const albumWrap = document.querySelector(".album");
const currentTimeIndicator = document.querySelector(".musicTime__current");
const leftTimeIndicator = document.querySelector(".musicTime__last");
const progressBar = document.getElementById("length");
const title = document.querySelector(".musicInfo__name");
const author = document.querySelector(".musicInfo__author");

const albumClass = document.getElementById("jsAlbum");
const playBtn = document.getElementById("play");
const loopBtn = document.getElementById("loop");
const shuffleBtn = document.getElementById("shuffle");
const forwardBtn = document.getElementById("forward");
const backwardBtn = document.getElementById("backward");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const progressDiv = document.getElementById("progress");

// BUTTON PLAY
function play(e) {
	if (!isPlaying) {
		e.target.classList.remove("_play");
		e.target.classList.add("_pause");

		albumWrap.classList.remove("_play");
		albumWrap.classList.add("_pause");

		isPlaying = true;
		document.getElementById(currentAudio).play();
		showTime();
	} else {
		e.target.classList.remove("_pause");
		e.target.classList.add("_play");

		albumWrap.classList.remove("_pause");
		albumWrap.classList.add("_play");

		isPlaying = false;
		document.getElementById(currentAudio).pause();
		clearInterval(timer);
	}
}

// TIME
function changeBar() {
	const audio = document.getElementById(currentAudio);
	const percentage = (audio.currentTime / audio.duration).toFixed(3);
	progressBar.style.transition = "";

	//set current time
	const minute = Math.floor(audio.currentTime / 60);
	const second = Math.floor(audio.currentTime % 60);
	const leftTime = audio.duration - audio.currentTime;
	currentTimeIndicator.innerHTML = ("0" + minute).substr(-2) + ":" + ("0" + second).substr(-2);

	//set left time
	const leftMinute = Math.floor(leftTime / 60);
	const leftSecond = Math.floor(leftTime % 60);

	leftTimeIndicator.innerHTML = ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2);

	//set time bar
	progressBar.style.width = percentage * 100 + "%";
}

function showTime() {
	timer = setInterval(() => changeBar(), 500);
}

// SWITCHING MUSIC
function nextMusic(mode) {
	playBtn.classList.remove("_pause");
	playBtn.classList.add("_play");

	albumWrap.classList.remove("_pause");
	albumWrap.classList.add("_play");

	document.getElementById(currentAudio).pause();
	isPlaying = false;
	clearInterval(timer);

	if (mode === "next") {
		currentId = currentId + 1 > list.length - 1 ? 0 : currentId + 1;
		init();
	} else {
		currentId = currentId - 1 < 0 ? list.length - 1 : currentId - 1;
		init();
	}
}

// STARTING A RANDOM TRACK
function shuffle(e) {
	isShuffle = !isShuffle;
	if (isShuffle) {
		e.target.classList.add("_shuffle");
	} else {
		e.target.classList.remove("_shuffle");
	}
}

// 5 SECONDS AGO
function backward() {
	const audio = document.getElementById(currentAudio);
	audio.currentTime -= 5;
	if (!isPlaying) {
		changeBar();
	}
}

// 5 SECONDS AHEAD
function forward() {
	const audio = document.getElementById(currentAudio);
	audio.currentTime += 5;
	if (!isPlaying) {
		changeBar();
	}
}

// STOP MUSIC
function stopMusic() {
	playBtn.classList.add("_play");
	albumWrap.classList.add("_play");
	isPlaying = false;
}

// THE START OF THE NEXT TRACK
function goToNextMusic() {
	let newId = currentId;
	while (isShuffle && !loopOne && newId === currentId) {
		newId = Math.floor(Math.random() * Math.floor(list.length - 1));
	}

	if (!isShuffle && !loopOne) {
		currentId = currentId + 1 > list.length - 1 ? 0 : currentId + 1;
	}
	if (!isShuffle && loopOne) {
		currentId = currentId;
	}

	if (isShuffle) {
		currentId = newId;
	}
	init();
	document.getElementById(currentAudio).play();
}

// THE PLAYBACK MODE OF THE TRACK
function loop(e) {
	const audio = document.getElementById(currentAudio);

	if (!isLoop && !loopOne) {
		isLoop = true;
		loopOne = false;
		e.target.classList.remove("_off");
		e.target.classList.add("_loop");
		audio.loop = false;
		audio.onended = e => goToNextMusic();
		console.log(isLoop, loopOne);
	} else if (isLoop && !loopOne) {
		isLoop = true;
		loopOne = true;
		e.target.classList.remove("_loop");
		e.target.classList.add("_repeat");
		audio.loop = true;
		audio.onended = e => goToNextMusic();
		console.log(isLoop, loopOne);
	} else {
		isLoop = false;
		loopOne = false;
		e.target.classList.remove("_repeat");
		e.target.classList.add("_off");
		audio.loop = false;
		audio.onended = e => stopMusic();
		console.log(isLoop, loopOne);
	}
}

// PROGRESS 
function progress(e) {
	const audio = document.getElementById(currentAudio);
	const pos = (e.pageX - progressDiv.getClientRects()[0].x) / progressDiv.getClientRects()[0].width;
	audio.currentTime = pos * audio.duration;
	changeBar();
}

function init() {
	const audio = document.getElementById(currentAudio) === null ? new Audio() : document.getElementById(currentAudio);
	audio.src = list[currentId].url;
	audio.id = currentAudio;
	document.getElementById(currentAudio) === null ? document.body.appendChild(audio) : "";

	progressBar.style.transition = "none";
	progressBar.style.width = "0%";
	document.getElementById(currentAudio).currentTime = 0;

	albumClass.classList = (list[currentId].class);
	title.innerHTML = list[currentId].title;
	author.innerHTML = list[currentId].author;

	//set current time
	audio.addEventListener("loadedmetadata", function () {
		const leftMinute = Math.floor(audio.duration / 60);
		const leftSecond = Math.floor(audio.duration % 60);
		currentTimeIndicator.innerHTML = "00:00";
		leftTimeIndicator.innerHTML = ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2);
		progressBar.style.transition = "";
	});

	document.getElementById(currentAudio).onended = e => goToNextMusic(e);
}

	playBtn.addEventListener("click", play);
	loopBtn.addEventListener("click", loop);

	shuffleBtn.addEventListener("click", shuffle);
	forwardBtn.addEventListener("click", forward);
	backwardBtn.addEventListener("click", backward);

	prevBtn.addEventListener("click", e => nextMusic("prev"));
	nextBtn.addEventListener("click", e => nextMusic("next"));
	progressDiv.addEventListener("click", e => {
		progress(e);
	});

	init();
})();
              
            
!
999px

Console