<div id="wrapper">
 <div id="iphone">
  <div id="camera">
   <span></span>
   <span></span>
  </div>
  <div id="screen">
   <div id="content-wrap">
    <div id="background"></div>
    <div id="content">
     <div id="header">
      <span id="menu-btn"><img src="https://emilcarlsson.se/assets/svg/menu.svg" alt="" class="svg"></span>
      <span id="options-btn"><img src="https://emilcarlsson.se/assets/svg/more.svg" alt="" class="svg"></span>
     </div>
     <div class="jcarousel">
      <ul id="songs">
      	<li class="song" data-audio="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Leo%20-%20Trying.mp3" data-color="#f38578">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/trying-album-cover.jpg">
					<p class="song-title">Trying</p>
					<p class="song-artist">Leo</p>
				</li>
      </ul>
     </div>
     <audio crossorigin>
				<source src="" type="audio/mpeg">
			</audio>
     <div id="controls">
      <span id="previous-btn"><i class="fa fa-step-backward fa-fw" aria-hidden="true"></i></span>
      <span id="play-btn"><i class="fa fa-play fa-fw" aria-hidden="true"></i></span>
      <span id="next-btn"><i class="fa fa-step-forward fa-fw" aria-hidden="true"></i></span>
     </div>
     <div id="timeline">
      <span id="current-time">--:--</span>
      <span id="total-time">--:--</span>
      <div class="slider" data-direction="horizontal">
				<div class="progress">
					<div class="pin" id="progress-pin" data-method="rewind"></div>
				</div>
			</div>
     </div>
     <div id="sub-controls">
      <i class="fa fa-random" aria-hidden="true"></i>
      <i class="fa fa-refresh" aria-hidden="true"></i>
      <i class="fa fa-bluetooth-b active" id="bluetooth-btn" aria-hidden="true"></i>
      <i class="fa fa-heart-o" id="heart-icon" aria-hidden="true"></i>
     </div>
    </div>
    <div id="overlay"></div>
   </div>
   <div id="sidemenu">
    <ul>
     <li>
      <i class="fa fa-search fa-fw" aria-hidden="true"></i>
			 Search
     </li>
     <li>
      <img class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/music-player.svg" alt="">
			 Playlists
     </li>
     <li>
      <img id="album-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/album-icon.svg" alt="">
      Albums
     </li>
     <li>
      <i class="fa fa-microphone fa-fw" aria-hidden="true"></i>
      Artists
     </li>
			<li>
				<i class="fa fa-podcast fa-fw" aria-hidden="true"></i>
				Podcasts
			</li>
			<li>
				<i class="fa fa-cog fa-fw" aria-hidden="true"></i>
				Settings
			</li>
    </ul>
   </div>
	 <div id="bluetooth-devices" class="menu">
			<span class="close-btn"><span>&times;</span> Close</span>
			<h3>Devices nearby</h3>
			<ul>
				<li class="connected">
					<img id="headphones-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/headphone.svg" alt="">
					<p>
						Major II Bluetooth
						<span>Connected</span>
					</p>
				</li>
				<li>
					<img id="headphones-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/loudspeaker.svg" alt="">
					<p>
						Sonos One
						<span>Connected</span>
					</p>
				</li>
				<li>
					<img id="headphones-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/car.svg" alt="">
					<p>
						Kia Motors
						<span>Connected</span>
					</p>
				</li>
			</ul>
			<p class="info-text">
				Make sure your bluetooth device is turned on and in range.
			</p>
		</div>
	 <div id="song-options" class="menu">
		 <span class="close-btn"><span>&times;</span> Close</span>
		 <div id="song-info">
		 	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg" alt="">
			 <div class="artist-wrap">
			 	<p>
			 		<span class="title">rockstar</span>
					<span class="artist">Post Malone, 21 Savage</span>
			 	</p>
			 </div>
		 </div>
	 	<ul>
	 		<li>
        <i class="fa fa-music fa-fw add" aria-hidden="true"></i>
				Add to playlist
			</li>
			<li>
				<i class="fa fa-microphone fa-fw" aria-hidden="true"></i>
				View Artist
			</li>
     <li>
      <img id="album-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/compact-disc.svg" alt="">
      View Album
     </li>
			<li>
				<i class="fa fa-share-square-o fa-fw" aria-hidden="true"></i>
				Share
			</li>
	 	</ul>
	 </div>
	 <div id="home-screen">
		<div class="home-content">
			<h2>Music Player App</h2>
			<p id="made-by">Made by <a href="https://codepen.io/emilcarlsson">@emilcarlsson</a></p>
			<div class="app-icon">
				<img class="svg" src="https://emilcarlsson.se/assets/svg/music-note.svg" alt="">
			</div>
			<p id="icons-by">Icons by <a href="http://fontawesome.io/" title="Font Awesome">Font Awesome</a>, <a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a>,<br /><a href="https://www.flaticon.com/authors/epiccoders" title="EpicCoders">EpicCoders</a> & <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a></p>
		</div>
	 </div>
  </div>
  <div id="home-btn"></div>
 </div>
</div>
$iphone-color: white;
$primary-color: $alizarin;

body {
	color: white;
	display: flex;
	align-items: center;
  justify-content: center;
	height: 100vh;
	width: 100vw;
	background: lighten($alizarin, 15%);
	font-family: $font;
	@include transition(background 0.25s ease);
}

.svg {
	path {
		fill: white;
	}
}

h3 {
	cursor: default;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	margin: 0 0 15px;
	text-transform: uppercase;
}

p {
	cursor: default;
	
	&.info-text {
		color: darken(white, 30%);
		font-size: 10px;
	}
}

.fa.add {
	position: relative;
	
	&::after {
		background: #444444;
		border-radius: 100px;
		content: '\f055';
		font-size: 10px;
		left: 2px;
		position: absolute;
		top: -1px;
		width: 10px;
		height: 11px;
	}
}

div#iphone {
	background: $iphone-color;
	border: 4px solid darken($iphone-color, 7.5%);
	border-radius: 30px;
	max-width: 257px;
	padding: 10px;
	@include box-shadow(0px 10px 25px rgba(51, 51, 51, 0.3));
	
	div#camera {
		cursor: default;
		margin: 5px auto 20px;
		width: 100%;
		text-align: center;
		@include user-select(none);
		
		span {
			background: darken($iphone-color, 7.5%);
			display: inline-block;
			
			&:nth-child(1) {
				$camera-size: 7px;
				border-radius: $camera-size;
				height: $camera-size;
				margin-right: 7px;
				position: relative;
				top: 1px;
				width: $camera-size;
			}
			&:nth-child(2) {
				border-radius: 5px;
				height: 5px;
				width: 35px;
			}
		}
	}
	
	div#screen {
		background: darken($iphone-color, 60%);
		border: 2px solid darken($iphone-color, 5%);
		border-radius: 4px;
		height: 400px;
		overflow: hidden;
		position: relative;
		width: 225px;
		z-index: 1;
		
		&::after {
			background: darken($iphone-color, 50%);
			content: '';
			display: block;
			height: 130%;
			left: 60%;
			opacity: 0.15;
			position: absolute;
			pointer-events: none;
			top: -25%;
			width: 100%;
			@include transform(rotate(-20deg));
		}
	}
	
	div#home-btn {
		$button-size: 35px;
		border: 3px solid darken($iphone-color, 7.5%);
		border-radius: $button-size;
		cursor: pointer;
		height: $button-size;
		margin: 10px auto 5px;
		width: $button-size;
	}
}

div#content-wrap {
	background: #333;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 5;
	@include transition(transform 0.25s ease);
	
	&.minimized {
		@include transform(scale(0));
	}
	
	&.inactive {
		@include transform(scale(0.85) translate(0, 60%));
		
		div#overlay {
			display: block;
		}
	}
}

div#overlay {
	cursor: pointer;
	display: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 3;
}

div#content {
	padding: 15px;
	position: relative;
	z-index: 2;
}

div#background {
	background-size: cover;
	background-position: center;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	@include filter(blur, 10px);
	@include transition(background-image 0.25s ease);
	
	&::before {
		background: #333;
		content: '';
		display: block;
		height: 100%;
		opacity: 0.5;
		position: absolute;
		width: 100%;
	}
	
	&::after {
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		width: 100%;
		@include linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(50, 50, 50, 1) 100%);
	}
}

div#header {
	color: white;
	@extend .clearfix;
	
	span {
		cursor: pointer;
		font-size: 20px;
		
		.svg {
			height: 16px;
			width: 16px;
		}
		
		&#menu-btn {
			float: left;
		}
		&#options-btn {
			float: right;
		}
	}
}

div.jcarousel {
	left: -15px;
	width: calc(100% + 30px);
	position: relative;
	overflow: hidden;
	
	ul#songs {
		width: 20000em;
		position: relative;
		
		li.song {
			float: left;
			margin: 10px 15px;
			text-align: center;
			width: calc(225px - 30px);

			img {
				width: 92.5%;
				@include box-shadow(0px 5px 25px rgba(50, 50, 50, 0.5));
			}

			p {
				color: white;
				text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);

				&.song-title {
					font-size: 16px;
					font-weight: 600;
					margin: 10px 0 5px;
				}
				&.song-artist {
					color: darken(white, 30%);
					font-size: 12px;
					margin: 0;
				}
			}
		}
	}
}

div#controls {
	color: white;
	display: table;
	margin: 10px auto 25px;
	text-align: center;
	width: 75%;
	
	span {
		display: table-cell;
		font-size: 20px;
		vertical-align: middle;
		
		&#play-btn {
			font-size: 34px;
		}
		
		i {
			cursor: pointer;
		}
	}
}

div#sub-controls {
	color: darken(white, 40%);
	cursor: default;
	font-size: 14px;
	margin: 15px 0 0;
	text-align: center;
	@include user-select(none);
	
	.svg {
		height: 14px;
		position: relative;
		top: 2px;
		width: 14px;
		
		path {
			fill: darken(white, 40%);
		}
	}
	
	i, .svg {
		cursor: pointer;
		margin: 0 15px;
		
		&.active {
			color: $primary-color;
		}
	}
}

div#timeline {
	position: relative;
	margin: 0 auto;
	width: 92.5%;
	
	span {
		color: darken(white, 30%);
		font-size: 7px;
		position: absolute;
		top: -10px;
		
		&#current-time {
			left: 0;
		}
		&#total-time {
			right: 0;
		}
	}
	
	div.slider {
		background-color: darken(white, 50%);
		border-radius: 2px;
		cursor: pointer;
		height: 2px;
		position: relative;
		width: 100%;
		
		div.progress {
			background-color: $primary-color;
			height: 100%;
			pointer-events: none;
			position: absolute;
			width: 0;
			
			div.pin {
				background-color: white;
				border-radius: 8px;
				height: 8px;
				position: absolute;
				pointer-events: all;
				right: -5px;
				top: -3px;
				width: 8px;
				@include box-shadow(0px 1px 1px 0px rgba(0,0,0,0.32));
				@include transition(transform 0.25s ease);
				
				&:active {
					@include transform(scale(1.5));
				}
			}
		}
	}
}

div#sidemenu {
	background: #444;
	box-sizing: border-box;
	height: 100%;
	left: 0;
  padding: 20px 10px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	
	&.active {
		ul {
			@include transform(scale(1));
		}
	}
	
	ul {
		color: white;
		font-size: 18px;
		@include transition(transform 0.25s ease);
		@include transform(scale(0.8));
		
		li {
			cursor: pointer;
			font-weight: 300;
			padding: 8px 5px;
			
			&:nth-child(1) {
				margin-top: -8px;
			}
			
			&:hover {
				background: lighten(#444, 5%);
				border-radius: 5px;
				
				.svg, i {
					opacity: 1;
				}
			}
		
			.svg {
				display: inline-block;
				height: 16px;
				padding: 0 0.2em;
				position: relative;
				top: 2px;
				width: 16px;
			}
			
			.svg, i {
				margin-right: 5px;
				opacity: 0.75;
				@include transition(opacity 0.25s ease);
			}
		}
	}
}

div#song-options {
	div#song-info {
		margin: 0 0 20px;
		position: relative;
		@extend .clearfix;
		
		img {
			float: left;
			width: 50px;
			@include box-shadow(0 2px 5px rgba(50, 50, 50, 0.2));
		}
		
		div.artist-wrap {
			box-sizing: border-box;
			float: right;
			padding: 0 0 0 8px;
			width: calc(100% - 50px);
			
			p {
				bottom: 4px;
				font-size: 16px;
				position: absolute;
				
				span {
					display: block;
					
					&.artist {
						font-size: 12px;
						font-weight: 300;
						margin: 4px 0 0;
					}
				}
			}
		}
	}
	
	ul {
		font-size: 16px;
	}
}

div#bluetooth-devices {
	ul {
		margin: 5px 0 15px;
		
		li {
			&.connected {
				border: 1px solid rgba(255, 255, 255, 0.2);
				font-size: 14px;
				
				span {
					display: block;
				}
				
				i {
					color: $primary-color;
				}
				
				.svg path {
					fill: $primary-color !important;
				}
				
				.svg, i {
					opacity: 1;
					position: relative;
					top: -5px;
				}
			}
			
			p {
				display: inline-block;
				
				span {
					display: none;
					font-size: 10px;
					margin: 2px 0 0;
					opacity: 0.75;
				}
			}
		}
	}
}

div.menu {
	background: #444;
	box-sizing: border-box;
	display: block;
	height: 100%;
	padding: 0 20px;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 10;
	@include transition(top 0.25s ease);
	
	&.active {
		top: 0;
	}
	
	span.close-btn {
		color: darken(white, 30%);
		cursor: pointer;
		display: block;
		font-size: 14px;
		margin: 5px auto 15px;
		padding: 0 8px 4px;
		text-align: center;
		width: 50px;
		@include transition(color 0.25s ease);
		
		&:hover {
			color: darken(white, 10%);
		}
		
		span {
			font-size: 1.6em;
			position: relative;
			top: 3px;
		}
	}
	
	li {
		border-radius: 5px;
		cursor: pointer;
		font-weight: 300;
		margin-bottom: 4px;
		padding: 8px 5px;

		&:nth-child(1) {
			margin-top: -8px;
		}

		&:hover {
			background: lighten(#444, 5%);

			.svg, i {
				opacity: 1;
			}
		}
		
		.svg {
				display: inline-block;
				height: 14px;
				padding: 0 0.2em;
				position: relative;
				top: 2px;
				width: 14px;
			}

		.svg, i {
			margin-right: 5px;
			opacity: 0.75;
			@include transition(opacity 0.25s ease);
		}
		
		i {
			position: relative;
			top: 1px;
		}
	}
}

div#home-screen {
	@include linear-gradient(to bottom, lighten($wet-asphalt, 15%), lighten($wet-asphalt, 5%));
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	visibility: hidden;
	z-index: 2;
	@extend .flex-center;
	
	&.active {
		visibility: visible;
	}
	
	div.home-content {
		margin: 15px;
		padding-bottom: 80px;
		text-align: center;
		
		h2 {
			font-size: 22px;
			font-weight: 600;
		}
		
		p {
			font-size: 13px;
			line-height: 1.5;
			margin: 5px 0;
			
			&#made-by {
				
				a {
					color: white;
				}
			}
			
			&#icons-by {
				color: lighten($wet-asphalt, 30%);
				bottom: 15px;
				font-size: 11px;
				left: 0;
				position: absolute;
				text-align: center;
				width: 100%;
			}
			
			a {
				color: lighten($wet-asphalt, 40%);
				border-bottom: 1px solid lighten($wet-asphalt, 30%);
				text-decoration: none;
				padding: 0 1px;
				@include transition(border-color 0.25s ease, color 0.25s ease);
				
				&:hover {
					color: lighten($wet-asphalt, 50%);
					border-color: lighten($wet-asphalt, 50%);
				}
			}
		}
		
		div.app-icon {
			cursor: pointer;
			border-radius: 10px;
			height: 40px;
			margin: 30px auto 0;
			position: relative;
			width: 40px;
			@extend .flex-center;
			@include linear-gradient(to bottom, $primary-color, darken($primary-color, 10%));
			
			&:hover {
				@include linear-gradient(to bottom, darken($primary-color, 5%), darken($primary-color, 15%));
			}
			
			&::after {
				content: 'Music Player';
				font-size: 10px;
				position: absolute;
				top: 45px;
				white-space: nowrap;
			}
			
			.svg {
				height: 60%;
				width: 60%;
			}
		}
	}
}
View Compiled
/*
 * Icons by:
 * Font Awesome – http://fontawesome.io/
 * Those Icons – https://www.flaticon.com/authors/those-icons
 * EpicCoders – https://www.flaticon.com/authors/epiccoders
 * Smashicons – https://www.flaticon.com/authors/smashicons
 */

$(document).ready(function () {
	var songs = [
		{
			title: "rockstar",
			artist: "Post Malone, 21 Savage",
			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg",
			audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Post%20Malone%20-%20rockstar%20ft.%2021%20Savage%20(1).mp3",
			color: "#c3af50"
		},
		{
			title: "Let You Down",
			artist: "NF",
			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/perception-album-cover.png",
			audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/NF%20-%20Let%20You%20Down.mp3",
			color: "#25323b"
		},
		{
			title: "Silence",
			artist: "Marshmello, Khalid",
			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/silence-album-cover.jpg",
			audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Marshmello%20-%20Silence%20ft.%20Khalid.mp3",
			color: "#c1c1c1"
		},
		{
			title: "I Fall Apart",
			artist: "Post Malone",
			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/stoney-cover-album.jpg",
			audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Post%20Malone%20-%20I%20Fall%20Apart.mp3",
			color: "#cd4829"
		},
		{
			title: "Fireproof",
			artist: "VAX, Teddy Sky",
			cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/fireproof-album-cover.jpeg",
			audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/VAX%20-%20Fireproof%20Feat%20Teddy%20Sky.mp3",
			color: "#5d0126"
		}
	];
	
	for (let song of songs) {
		$("#songs").append('<li class="song" data-audio="' + song.audioFile + '" data-color="'+ song.color +'">' + 
			'<img src="' + song.cover + '">' +
			'<p class="song-title">' + song.title + '</p>' +
			'<p class="song-artist">' + song.artist + '</p>' + 
			'</li>');
	}
	
	$('.jcarousel').jcarousel({
			wrap: 'circular'
	});
});

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img[src$=".svg"]').each(function(){
	var $img = jQuery(this);
	var imgID = $img.attr('id');
	var imgClass = $img.attr('class');
	var imgURL = $img.attr('src');

	jQuery.get(imgURL, function(data) {
		// Get the SVG tag, ignore the rest
		var $svg = jQuery(data).find('svg');

		// Add replaced image's ID to the new SVG
		if(typeof imgID !== 'undefined') {
			$svg = $svg.attr('id', imgID);
		}
		// Add replaced image's classes to the new SVG
		if(typeof imgClass !== 'undefined') {
			$svg = $svg.attr('class', imgClass+' replaced-svg');
		}

		// Remove any invalid XML tags as per http://validator.w3.org
		$svg = $svg.removeAttr('xmlns:a');

		// Replace image with new SVG
		$img.replaceWith($svg);

	}, 'xml');

});

// Current slide
$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
	let cover = $(this).find("img").attr("src");
	let songTitle = $(this).find("p.song-title").html();
	let songArtist = $(this).find("p.song-artist").html();
	let audioSrc = $(this).attr("data-audio");
	let backgroundColor = $(this).attr("data-color");
	$("body").css('background', backgroundColor)
	$("#background").css('background-image', 'url('+cover+')');
	$("audio").find("source").attr("src", ""+audioSrc+"");
	player.load();
	player.currentTime = 0;
	$("#song-info").find("img").attr("src", cover);
	$("#song-info .artist-wrap p").find("span.title").html(songTitle);
	$("#song-info .artist-wrap p").find("span.artist").html(songArtist);
});

// Previous slide
$('#previous-btn').click(function() {
	$('.jcarousel').jcarousel('scroll', '-=1');
	$('#play-btn i').removeClass('fa-pause');
	player.pause();
});

// Next slide
$('#next-btn').click(function() {
	if ($(".fa-random").hasClass('active')) {
		let songs = $("#songs li").length - 1;
		let randomSong = Math.floor(Math.random() * songs) + 1;
		$('.jcarousel').jcarousel('scroll', '+=' + randomSong);
	} else {
		$('.jcarousel').jcarousel('scroll', '+=1');
	}
	$('#play-btn i').removeClass('fa-pause');
	player.pause();
});

// Play Icon Switcher
$('#play-btn').click(function() {
	$(this).find('i').toggleClass('fa-pause');
});

// Menu
$("#menu-btn").click(function() {
	$("#content-wrap").addClass('inactive');
	$("#sidemenu").addClass('active');
});

// Home Button
$("#home-btn").click(function() {
	$("#home-screen").addClass('active');
	$(".menu").removeClass('active');
	$("#content-wrap").addClass('minimized');
});

// App
$(".app-icon").click(function() {
	$("#content-wrap").removeClass('minimized');
	setTimeout(function(){ $("#home-screen").removeClass('active'); }, 300);
});

// Overlay
$("#overlay").click(function () {
	$("#content-wrap").removeClass('inactive');
	$("#sidemenu").removeClass('active');
});

// Options
$("#options-btn").click(function() {
	$("#song-options").addClass('active');
});

// Bluetooth
$("#bluetooth-btn").click(function() {
	$("#bluetooth-devices").addClass('active');
});

// Bluetooth Menu
$("#bluetooth-devices ul li").click(function() {
	$(this).toggleClass('connected');
	$(this).siblings().removeClass('connected');
	
	if ($("#bluetooth-devices ul li").hasClass('connected')) {
		$("#sub-controls i.fa-bluetooth-b").addClass('active');
	} else {
		$("#sub-controls i.fa-bluetooth-b").removeClass('active');
	}
});

// Close Menu
$(".close-btn").click(function() {
	$(".menu").removeClass('active');
});

$('#sub-controls i').click(function () {
	if(!$(this).hasClass('fa-bluetooth-b')) {
		$(this).toggleClass('active');
	}
	
	if ($("#heart-icon").hasClass('active')) {
		$("#heart-icon").removeClass('fa-heart-o');
		$("#heart-icon").addClass('fa-heart');
	} else {
		$("#heart-icon").removeClass('fa-heart');
		$("#heart-icon").addClass('fa-heart-o');
	}
});

/*
 * Music Player
 * By Greg Hovanesyan
 * https://codepen.io/gregh/pen/NdVvbm
 */

var audioPlayer = document.querySelector('#content');
var playpauseBtn = audioPlayer.querySelector('#play-btn');
var progress = audioPlayer.querySelector('.progress');
var sliders = audioPlayer.querySelectorAll('.slider');
var player = audioPlayer.querySelector('audio');
var currentTime = audioPlayer.querySelector('#current-time');
var totalTime = audioPlayer.querySelector('#total-time');

var draggableClasses = ['pin'];
var currentlyDragged = null;

window.addEventListener('mousedown', function(event) {
  
  if(!isDraggable(event.target)) return false;
  
  currentlyDragged = event.target;
  let handleMethod = currentlyDragged.dataset.method;
  
  this.addEventListener('mousemove', window[handleMethod], false);

  window.addEventListener('mouseup', () => {
    currentlyDragged = false;
    window.removeEventListener('mousemove', window[handleMethod], false);
  }, false);  
});

playpauseBtn.addEventListener('click', togglePlay);
player.addEventListener('timeupdate', updateProgress);
player.addEventListener('loadedmetadata', () => {
  totalTime.textContent = formatTime(player.duration);
});
player.addEventListener('ended', function(){
  player.currentTime = 0;
	
	if ($(".fa-refresh").hasClass('active')) {
		togglePlay();
	} else {
		if ($(".fa-random").hasClass('active')) {
			let songs = $("#songs li").length - 1;
			let randomSong = Math.floor(Math.random() * songs) + 1;
			$('.jcarousel').jcarousel('scroll', '+=' + randomSong);
		} else {
			$('.jcarousel').jcarousel('scroll', '+=1');
		}
		togglePlay();
	}
});

sliders.forEach(slider => {
  let pin = slider.querySelector('.pin');
  slider.addEventListener('click', window[pin.dataset.method]);
});

function isDraggable(el) {
  let canDrag = false;
  let classes = Array.from(el.classList);
  draggableClasses.forEach(draggable => {
    if(classes.indexOf(draggable) !== -1)
      canDrag = true;
  })
  return canDrag;
}

function inRange(event) {
  let rangeBox = getRangeBox(event);
  let direction = rangeBox.dataset.direction;
	let screenOffset = document.querySelector("#screen").offsetLeft + 26;
	var min = screenOffset - rangeBox.offsetLeft;
	var max = min + rangeBox.offsetWidth;   
	if(event.clientX < min || event.clientX > max) { return false };
  return true;
}

function updateProgress() {
  var current = player.currentTime;
  var percent = (current / player.duration) * 100;
  progress.style.width = percent + '%';
  
  currentTime.textContent = formatTime(current);
}

function getRangeBox(event) {
  let rangeBox = event.target;
  let el = currentlyDragged;
  if(event.type == 'click' && isDraggable(event.target)) {
    rangeBox = event.target.parentElement.parentElement;
  }
  if(event.type == 'mousemove') {
    rangeBox = el.parentElement.parentElement;
  }
  return rangeBox;
}

function getCoefficient(event) {
  let slider = getRangeBox(event);
	let screenOffset = document.querySelector("#screen").offsetLeft + 26;
  let K = 0;
	let offsetX = event.clientX - screenOffset;
	let width = slider.clientWidth;
	K = offsetX / width;
  return K;
}

function rewind(event) {
  if(inRange(event)) {
    player.currentTime = player.duration * getCoefficient(event);
  }
}

function formatTime(time) {
  var min = Math.floor(time / 60);
  var sec = Math.floor(time % 60);
  return min + ':' + ((sec<10) ? ('0' + sec) : sec);
}

function togglePlay() {
	player.volume = 0.5;
	
  if(player.paused) {
    player.play();
  } else {
    player.pause();
  }  
}
Run Pen

External CSS

  1. https://emilcarlsson.se/assets/variables.scss

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://use.fontawesome.com/15af25ac7b.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js