CodePen Embed - Mini Audio Player

<html>
	<head>
		<title>AudioPlayer</title>
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'/>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <!--[if IE 9]>
		<style type="text/css">
			.slice-content:nth-child(4) {
				-ms-transform: scaleY(1);
			}
			.flip{
				-ms-transform-origin: center top;
				-ms-transform: scaleY(0.6) !important;
			}
		</style>
		<![endif]-->
	</head>

	<body>
		<div class="container">
			<div class="this-wrapper">				
				<div class="this">	
					<div class="wrapper">
						<div class="likescreen">
							<div class="likecounter"></div>
						</div>						
						<div class="blackscreen"></div>
						<img src="" alt=""/>
					</div>
					<div class="sharescreen">
						<div class="sharetext">Share :</div>
						<div class="socialicons">
							<a href="https://www.facebook.com/share.php?u=http%3A%2F%2Fryanbishop.me%2Faudioplayer%2F&title=COLORBLIND mix player.">
							<div class="icon facebook"></div>
							</a>
							<a href="https://twitter.com/home?status=COLORBLIND mix player.+http%3A%2F%2Fryanbishop.me%2Faudioplayer%2F">
							<div class="icon twitter">
								<div class="lineone"></div>
								<div class="linetwo"></div>
							</div>
							</a>
							<a href="http://dribbble.com/RyanBishop" target="_blank">
							<div class="icon dribbble"></div>
							</a>
						</div>
					</div>
					<div class="menu">
						<div class="share"><span></span> </div>
						<ul>
							<li class="previous"><span></span></li>
							<li class="play pause"><span></span> </li>
							<li class="next"><span></span> </li>
						</ul>
						<div class="like"><span></span> </div>
					</div>
				</div>				
			</div>
		</div>
    <img class="thumbnail" src="https://i.imgur.com/SkJg63Y.jpg" alt=""/>
		<audio >
			 <source src="http://k002.kiwi6.com/hotlink/v3p042i826/grayscale-_colorblind_005.mp3" type="audio/mp3"/>
			  <source src="http://k002.kiwi6.com/hotlink/j07888sy9y/grayscale-colorblind_005.ogg" type="audio/ogg"/>
        	Your browser does not support HTML5 audio.
		</audio>
      <img class="thumbnail" src="https://i.imgur.com/6cwiVtD.jpg" alt=""/>		
		<audio >
			 <source src="http://k002.kiwi6.com/hotlink/kvbeuv1q84/grayscale-colorblind_006.mp3" type="audio/mp3"/>
			 <source src="http://k002.kiwi6.com/hotlink/993urfsw1d/grayscale-colorblind_006.ogg" type="audio/ogg"/>
        	Your browser does not support HTML5 audio.
		</audio>
      <img class="thumbnail" src="https://i.imgur.com/bUIkoni.png" alt=""/>
		<audio >
			 <source src="http://k002.kiwi6.com/hotlink/837u7mqv4x/grayscale-colorblind_007.mp3" type="audio/mp3"/>
			 <source src="http://k002.kiwi6.com/hotlink/1nf3683kj8/grayscale-colorblind_007.ogg" type="audio/ogg"/>
        	Your browser does not support HTML5 audio.
		</audio>
	</body>
</html>

body{
	margin: 0;
	padding: 0;
	background: url(https://i.imgur.com/SbiFOLW.png);
}
audio{
	position: relative;
	display: block;
	margin: 0 auto;
	width:500px;
	height: 40px;
}
.container{
	position: relative;
	width:100%;
	height: 304px;
}
.this-wrapper{
	position: absolute;
	height: 222px;
	width: 222px;
	margin:auto;
	top:0;bottom:0;left:0;right:0;
}
.this{
	border-radius: 8px;
	box-shadow:
		0 1px 6px rgba(0,0,0,0.4),
		0 1px rgba(55,55,55,1)		
	;
	position: absolute;
	height: 222px;
	width: 220px;	
	-webkit-perspective: 650px;
	-moz-perspective: 650px;
	-ms-perspective: 650px;
	-o-perspective: 650px;
	perspective: 650px;
			
}
.sharescreen{
	width: 222px;
	height: 222px;
	z-index: 997;
	position: absolute;
	top: 0px;
}
.likescreen,
.blackscreen{
	border-radius: 8px;
	position: absolute;
	top:-1px;
	height: 224px;
	width: 222px;
	z-index: 997;
}
.blackscreen{	
	background-color: rgba(0,0,0,0.8);
	z-index: 996;
}
.likecounter{
	width: 52px;
	height: 52px;
	margin: auto;
	position: absolute;
	z-index: 999;
	top:0;left:0;right:0;bottom: 0;
	background: url(https://i.imgur.com/wNPFrma.png);	
}

.socialicons{
	width: 100%;
	position: absolute;
	margin: auto;
	height: 46px;
	top:0;left:0;right:0;bottom: 0;
}
.dropdown{
	bottom:auto;
	-o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
	transform: translateY(87px);
	-webkit-transform: translateY(87px);
	-moz-transform: translateY(87px);
	-ms-transform: translateY(87px);
	-o-transform: translateY(87px);
}
.sharetext{
	position: absolute;
	color:#fff;
	font-family: 'Oswald';
	font-weight: 300;
	text-align: center;
	width: 100%;
	top:46px;
	text-transform: uppercase;
	font-size: 1em;
}
.facebook,
.twitter,
.dribbble{	
	border-radius: 23px;	
	cursor: pointer;
	width: 46px;
	height: 46px;
	margin: 0 auto;
	right: 0; left: 0;
	position:absolute;
	box-shadow: 0 0 0 1px #fff;
	-o-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    -ms-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    -moz-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    -webkit-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
}

.icon:after {	
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	content: '';
	top: -1px;
	left: -1px;
	padding: 1px;
	z-index: -1;
	opacity: 0;
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s ease-out;
	transition: transform 0.3s, opacity 0.3s ease-out;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}
.icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.facebook{
	opacity: 0;
	background: url(https://i.imgur.com/3AzFfdn.png) no-repeat center center;
}
.twitter{
	background: url(https://i.imgur.com/zCUAFPE.png) no-repeat center center;
}
.twitter .lineone{
	content: ' ';
	position: absolute;
	margin: auto;
	bottom: 0; top: 0; right: 46px;
	width: 0px;
	height: 1px;
	background-color: #fff;
	-o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.twitter .linetwo{
	content: ' ';
	position: absolute;
	margin: auto;
	bottom: 0; top: 0; left: 46px;
	width: 0px;
	height: 1px;
	background-color: #fff;
	-o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.dribbble{
	opacity: 0;
	background: url(https://i.imgur.com/pASuBLd.png) no-repeat center center;
}
.facebook:after{
	background: #3b5998;
}
.twitter:after{
	background: #00acee;
}
.dribbble:after{
	background: #ea4c89;
}
.wrapper{
	position: absolute;
	height: 222px;
	width: 222px;
}
.thumbnail{
	display: none;
}
img{
	border-radius: 8px;
	width: 100%;
	height: 100%;
}
.slice-content{
	overflow: hidden;
	position: absolute;
	opacity: 1;
   cursor:pointer;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	-ms-transform-origin: center top;
	-o-transform-origin: center top;
	transform-origin: center top;
  -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
	width: 222px;
	height:111px;
}
.slice-content:first-child {
	border-top: 1px solid #161616;
	border-left: 1px solid #161616;
	border-right: 1px solid #000;
	border-radius: 8px 8px 0 0;
	top: 0px;
}

.slice-content:nth-child(4) {
	border-bottom: 1px solid #161616;
	border-left: 1px solid #161616;
	border-right: 1px solid #000;
	top: 112px;
	z-index: 100;
	border-radius: 0 0 8px 8px;
	-o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
  	transform-style: preserve-3d;
    
}
.flip {
    -webkit-transform: rotateX(62deg) !important;
    -moz-transform: rotateX(62deg) !important;
    -ms-transform: rotateX(62deg) !important;
    transform: rotateX(62deg) !important;
    border-bottom: 2px solid #161616 !important;

  }

 .menu{
 	position: absolute;
 	z-index: 2;
 	height:52px;
 	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #151616;
 	padding:11px;
 	width: 222px;
 	bottom: 0;
 	margin: 0 auto;
 	border-radius: 0 0 8px 8px;
 	left:0;right:0;
 	background-color: #1e1e1e;
 }
 .menu ul{
 	float: left;
 	box-shadow:
		inset 0 1px 2px rgba(0,0,0,0.6),
		0 1px rgba(50,50,50,0.5)
	;
 	margin:0 0 0 10px;
 	padding: 0;
 	list-style: none;
 	height:30px;
 	width:120px;
 	display: block;
 	border-radius: 15px;
 	background-color: #171717;
 }
 .menu li{
 	float: left;
 	position: relative;
 	cursor: pointer;
 	width: 40px;
 	height: 30px;
 	-o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
 }
 .menu span{
	position: absolute;
 	top:0;bottom:0;right:0;left:0;
 }
 .menu li:hover,
 .menu .share:hover,
 .menu .like:hover{
 	background-color: rgba(0,0,0,0.4);
 }
 .menu .previous{
 	border-radius:15px 0 0 15px;
 	background: url(https://i.imgur.com/n2ER0Dd.png) no-repeat center center;
 }
 .previous span{ 	
 	background: url(https://i.imgur.com/vDIdKpi.png) no-repeat center center;
 }
 .menu .play{
 	background: url(https://i.imgur.com/dU17ZRl.png) no-repeat center center;
 }
 .play span{
	background: url(https://i.imgur.com/hyUlL2r.png) no-repeat center center;
 }
 .menu .pause{
 	background: url(https://i.imgur.com/D1iTyjp.png) no-repeat center center;
 }
 .pause span{
	background: url(https://i.imgur.com/dBQOlg1.png) no-repeat center center;
 }
  .menu .next{
  	border-radius:0 15px 15px 0;
 	background: url(https://i.imgur.com/d4yYfGs.png) no-repeat center center;
 }
 .next span{
	background: url(https://i.imgur.com/JyDNjL9.png) no-repeat center center;
 }
 .menu .share,
 .menu .like{
 	position: relative;
 	height: 30px;
 	width: 30px;
 	cursor: pointer;
 	border-radius: 15px;
 	box-shadow:
		inset 0 1px 2px rgba(0,0,0,0.6),
		0 1px rgba(50,50,50,0.5)
		;
	-o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
 }
 .menu .like{
 	float: right;
 	background: #171717 url(https://i.imgur.com/APpk31d.png) no-repeat center center;
 }
 .like span{
 	background: url(https://i.imgur.com/BUoeur6.png) no-repeat center center;
 }
 .menu .share{ 	
 	float: left;
 	background: #171717 url(https://i.imgur.com/aGosymG.png) no-repeat center center;
 }
 .share span{ 
 	background: url(https://i.imgur.com/sVrgiY0.png) no-repeat center center;
 }

     /*////Created by Ryan Bishop./////
     --Check out more of my work at:--- 
     --http://dribbble.com/RyanBishop-- 
     ---------------OR----------------
     ------Follow me on twitter:------
     -------------@abletroner----------
     --------Find the music on:--------
     soundcloud.com/colorblind-official
     ////////////////////////////////*/

    

$(document).ready(function(){
	var cssStyle = { 'margin-top' : - $('.this').size.height / 2 + 'px'	};
	var imgx = $('thumbnail').length;
	var x = $('audio').length;
	var z=0;
	$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
}); 
	$( ".wrapper" ).wrap($('<div class="slice-content"/>'))
	.parent()
	.clone()
	.appendTo( ".this" )
	.find( '.wrapper' )
	.css('margin-top','-111px');
	$('.slice-content').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
	});
	
	$('.play').click(function(){
		$('audio')[z].play();						
		$(this).toggleClass('pause');
		if($(this).hasClass('pause')){
		$('audio')[z].pause();
		}
	});
	$('.next').click(function(){
		$('audio')[z].pause();
		$('.play').removeClass('pause');
		$('audio')[z].currentTime=0;
		z++;
		if(z>=x){z=0}
		$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
		$('audio')[z].play();
	});
	$('.previous').click(function(){
		$('audio')[z].pause();
		$('.play').removeClass('pause');
		$('audio')[z].currentTime=0;
		z--;
		if(z<0){z=x-1}
		$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
		$('audio')[z].play();
	});
	$('audio').bind("ended",function(){
		z++;
		if(z>=x){z=0}
		$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
		$('audio')[z].play();
	});
	// Like & Share screens fade
	$('.likescreen, .sharescreen, .blackscreen, .sharetext').hide();
	$('.like').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
		$('.blackscreen').fadeIn(1000);
		$('.likescreen').fadeIn(500);
		$('.likecounter').addClass('dropdown');
	});
	$('.likescreen').click(function(){
		$('.likescreen, .blackscreen').fadeOut(300);
		$('.likecounter').removeClass('dropdown');
	});
	$('.share').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
		$('.blackscreen').fadeIn(1000);
		$('.sharescreen').fadeIn(500);
		$('.socialicons').addClass('dropdown');
		setTimeout(function(){
			$('.sharetext').fadeIn(300);
			$('.facebook').css('right','130px').css('opacity','1');
			$('.dribbble').css('left','130px').css('opacity','1');
			setTimeout(function(){
				$('.lineone, .linetwo').css('width','19px');
			},300);
		},1000);
	});
	$('.sharescreen').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
		$('.sharescreen, .blackscreen, .sharetext').fadeOut();
		$('.socialicons').removeClass('dropdown');
		$('.lineone, .linetwo').css('width','0px');
		$('.facebook').css('right','0').css('opacity','0');
		$('.dribbble').css('left','0').css('opacity','0');
	});



	$("ul > li, .share, .like").find('span').hide().end()
	.hover(function(){
		$(this).find('span').stop(true, true).fadeIn(200)
	}, function(){
		$(this).find('span').stop(true, true).fadeOut(200)
	});

});

This Pen is owned by Lucian Radu on CodePen.

See more by @ryanbishop on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.