Audio Player WIP

Developer
Rachel McGrane
Size
4,845 Kb
Views
42,504
  1. Audio Player WIP Previews
  2. Audio Player WIP HTML Codes
  3. Audio Player WIP CSS Codes
  4. Audio Player WIP JS Codes

How do I make an audio player wip?

What is a audio player wip? How do you make a audio player wip? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Audio Player WIP Previews
IQ Test

Audio Player WIP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Audio Player WIP</title> <link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" /> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="player">	<h1 class="station-name">Top 40</h1>	<div class="player-content">	<div class="album-art">	<img src="http://ecx.images-amazon.com/images/I/91HyHkWzyeL._SL1500_.jpg" />	</div>	<div class="stream-control stop">	<i class="fa control-icon fa-stop"></i>	</div>	<div class="song-info">	<h1 class="song">Boom Clap</h1>	<h2 class="artist">Charli XCX - The Fault In Our Stars: Music From The Motion Picture</h2>	<div class="rating">	<i class="fa fa-star"></i>	<i class="fa fa-star"></i>	<i class="fa fa-star"></i>	<i class="fa fa-star"></i>	<i class="fa fa-star-o"></i>	</div>	</div>	<footer class="controls cf">	<div class="song-controls">	<i class="fa fa-shopping-cart icon buy-open"><span class="tooltip">Buy Now</span></i>	<i class="fa fa-music icon"><span class="tooltip">Lyrics</span></i>	<i class="fa fa-share-alt icon share-open"><span class="tooltip">Share</span></i>	</div>	<div class="player-controls">	<span class="stream-time">5:17</span>	<i class="fa fa-list icon last-played-open"><span class="tooltip">Last Played</span></i>	<i class="fa fa-volume-down icon volume"></i>	<span class="volume-control"></span>	</div>	</footer>	<div class="banner">	<img src="http://placehold.it/728x90" />	</div>	<div class="last-played">	<i class="fa fa-times close"></i>	<section class="previous-song">	<img class="album-art" src="http://upload.wikimedia.org/wikipedia/en/1/18/Nightwish_imaginaerum_cover.jpg" alt="" />	<div class="song-info">	<h2 class="song">Taikatalvi</h2>	<span class="artist">Nightwish - Imaginaerum</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://yamilahmed.files.wordpress.com/2010/09/muse-the-resistance.jpg" alt="" />	<div class="song-info">	<h2 class="song">Uprising</h2>	<span class="artist">Muse - The Resistance</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://dftba.com/media/dynamic/image/a4c3b933a99e5c45ad68948860b7751e.png" alt="" />	<div class="song-info">	<h2 class="song">DFTBA</h2>	<span class="artist">Hank Green - This Machine Pwns n00bs</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://upload.wikimedia.org/wikipedia/en/9/9a/Jgreatesthits.jpg" alt="" />	<div class="song-info">	<h2 class="song">Separate Ways (Worlds Apart)</h2>	<span class="artist">Journey - Greatest Hits</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="https://3.bp.blogspot.com/-iuxb9-7-LZs/UlFysZI0DlI/AAAAAAABrlc/I5L0SeJlSbw/s1600/JUANES+LP+2.png" alt="" />	<div class="song-info">	<h2 class="song">La Noche</h2>	<span class="artist">Juanes - Un Dia Normal</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://www.musicpilgrimages.com/imgs/articles/439_1266708987._SL500_.jpg" alt="" />	<div class="song-info">	<h2 class="song">I'm Gonna Be (500 Miles)</h2>	<span class="artist">The Proclaimers - Sunshine on Leith</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://dftba.com/media/dynamic/image/a4c3b933a99e5c45ad68948860b7751e.png" alt="" />	<div class="song-info">	<h2 class="song">DFTBA</h2>	<span class="artist">Hank Green - This Machine Pwns n00bs</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://upload.wikimedia.org/wikipedia/en/9/9a/Jgreatesthits.jpg" alt="" />	<div class="song-info">	<h2 class="song">Separate Ways (Worlds Apart)</h2>	<span class="artist">Journey - Greatest Hits</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="https://3.bp.blogspot.com/-iuxb9-7-LZs/UlFysZI0DlI/AAAAAAABrlc/I5L0SeJlSbw/s1600/JUANES+LP+2.png" alt="" />	<div class="song-info">	<h2 class="song">La Noche</h2>	<span class="artist">Juanes - Un Dia Normal</span>	</div>	</section>	<section class="previous-song">	<img class="album-art" src="http://www.musicpilgrimages.com/imgs/articles/439_1266708987._SL500_.jpg" alt="" />	<div class="song-info">	<h2 class="song">I'm Gonna Be (500 Miles)</h2>	<span class="artist">The Proclaimers - Sunshine on Leith</span>	</div>	</section>	</div>	</div>	<aside class="side-content">	<div class="banner-right">	<img src="http://placehold.it/300x250" />	</div>	<div class="station-socials">	<a class="facebook" href="https://facebook.com"><i class="fa fa-facebook"></i></a>	<a class="twitter" href="https://twitter.com"><i class="fa fa-twitter"></i></a>	</div>	<span class="powered-by">Powered by: <a href="http://mystreamplayer.com">MyStreamPlayer.com</a></span>	</aside>	<div class="share-overlay overlay">	<i class="fa fa-times close"></i>	<section class="overlay-content">	<h2 class="song">Share This On</h2>	<div class="share-icons">	<a class="facebook" href="https://facebook.com"><i class="fa fa-facebook"></i></a>	<a class="twitter" href="https://twitter.com"><i class="fa fa-twitter"></i></a>	</div>	</section>	</div>	<div class="buy-overlay overlay">	<i class="fa fa-times close"></i>	<section class="overlay-content">	<h2 class="song">Buy This Song</h2>	<div class="share-icons">	<a class="amazon" href="http://amazon.com"><i class="zocial-amazon"></i></a>	<a class="itunes" href="http://itunes.com"><i class="fa fa-apple"></i></a>	</div>	</section>	</div>	</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ryanmcgrane.com/demos/mediaplayer/modernizr.js'></script> <script src="js/index.js"></script>
</body>
</html>

Audio Player WIP - Script Codes CSS Codes

* {	box-sizing: border-box;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);
@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before { font-family: 'zocial', sans-serif;
}
body {	margin: 4rem 0;	font-family: "Open Sans", Arial, sans-serif;
}
.player {	width: 1140px;	margin: 0 auto;	position: relative;	overflow: hidden;	color: #fff;	padding: 2rem 2rem 2rem;	box-shadow: inset 0 0 20px rgba(0,0,0,.5);	border: 20px solid #fff;
}
.player:before {	content: "";	position: absolute;	background: rgba(0,0,0,.4);	width: 100%;	height: 100%;	z-index: -1;	top: 0;	left: 0;
}
.no-cssfilters .player:before {	background: rgba(0,0,0,.75);
}
.no-cssfilters .player:after {	content: "";	position: absolute; width: 105%;	height: 105%;	width: calc(100% + 10px);	height: calc(100% + 10px);	top: -10px;	left: -10px;	background: url(http://ecx.images-amazon.com/images/I/91HyHkWzyeL._SL1500_.jpg) center center;	background-size: cover;	z-index: -2;
}
.cssfilters .player:after {	content: "";	position: absolute; width: 105%;	height: 105%;	width: calc(100% + 10px);	height: calc(100% + 10px);	top: -10px;	left: -10px;	-webkit-filter: blur(10px);	filter: blur(10px);	background: url(http://ecx.images-amazon.com/images/I/91HyHkWzyeL._SL1500_.jpg) center center;	background-size: cover;	z-index: -2;
}
.station-name {	background: rgba(0,0,0,.6);	padding: 1rem 2rem;	margin: -2rem -2rem 2rem;
}
.album-art {	float: left;	margin-top: -20px;	margin: -20px 20px 0 0;
}
.album-art img {	width: 80px;	height: 80px;	border-radius: 10px;
}
.stream-control {	width: 40px;	height: 40px;	border: 2px solid #fff;	border-radius: 50%;	line-height: 36px;	text-align: center;	left: 0;	margin-right: 1.5rem;	float: left;	position: relative;	cursor: pointer;
}
.fa-play {	position: relative;	left: 2px;
}
.stream-control:hover {	background: #fff;
}
.stream-control:hover .control-icon {	color: rgba(0,0,0,.8);
}
h1, h2 {	font-weight: 400;	margin: 0;
}
.song {	font-size: 1.75rem;	margin-top: -5px;	font-weight: 300;
}
.artist {	font-size: .875rem;	margin-top: -5px;	font-weight: 700;	color: rgba(255,255,255,.6);
}
.song-info {	float: left;	margin-bottom: 2rem;	margin-top: -.875rem;
}
.controls {	clear: both;	background: rgba(0,0,0,.6);	border-radius: 10px;	padding: 10px;	position: relative;	top: 3px;
}
.icon {	padding: 10px;	font-weight: 300;	cursor: pointer;	color: rgba(255,255,255,.7);	position: relative;
}
.tooltip {	display: none;	position: absolute;	background: #000;	padding: 8px 5px;	border-radius: 5px;	bottom: -38px;	left: 50%;	margin-left: -40px;	width: 80px;	text-align: center;	font-family: "Open Sans", Arial, sans-seirf;	font-size: .75rem;	font-weight: 700;	color: rgba(255,255,255,.7);
}
.tooltip:before {	content: "";	position: absolute;	width: 0;	height: 0;	border-left: 5px solid transparent;	border-right: 5px solid transparent;	border-bottom: 5px solid #000;	top: -5px;	left: 50%;	margin-left: -5px;
}
.icon:hover {	background: rgba(255,255,255,.1);	border-radius: 50%;	color: #fff;
}
.icon:hover .tooltip {	display: block;
}
.song-controls {	float: left;
}
.player-controls {	float: right;
}
.stream-time {	float: left;	padding: 10px;	line-height: 1;
}
.volume {	float: left;
}
.volume:hover {	background: none;	color: rgba(255,255,255,.7);	cursor: default;
}
.volume-control {	height: 6px;	width: 90px;	background: rgba(255,255,255,.3);	border-radius: 10px;	position: relative;	float: left;	margin: 14px 10px 10px 0;
}
.volume-control:after {	content: "";	height: 6px;	width: 60px;	background: #75A310;	position: absolute;	border-radius: 10px;
}
.last-played-open {	float: left;
}
.last-played {	display: none;	overflow-y: scroll;	overflow-x: hidden;	height: 100%;	position: absolute;	top: 0;	left: 0;	width: 100%;	background: #333;	padding: 1rem;	border-radius: 3px;
}
.previous-song:last-child {	margin-bottom: 0;
}
.last-played .close {	position: fixed;	margin: -1rem 0 0 640px;
}
.overlay .close {	position: absolute;	top: 0;	right: 10px;
}
.close {	padding: 10px 12px;	background: #733426;	background: rgba(227,79,45,.7);	cursor: pointer;
}
.close:hover {	background: #662e22;
}
.last-played .album-art {	float: left;	width: 40px;	height: 40px;	border-radius: 3px;	margin-top: 0px;
}
.previous-song {	clear: both;	background: rgba(0,0,0,.7);	overflow: hidden;	padding: 1rem;	margin: 0 0 .5rem;	border-radius: 3px;
}
.last-played .song-info {	margin: 2px 0 0 .5rem;
}
.last-played .song {	font-size: 1.25rem;
}
.last-played .artist {	margin-top: -2px;	display: block;	color: rgba(255,255,255,.4);	font-size: .75rem;
}
.banner {	text-align: center;	margin-top: 2rem;
}
.banner img {	max-width: 100%;
}
.player-content {	float: left;	width: 68.52%;	padding-top: 104px;	position: relative;
}
.banner-right {	float: left;	margin-bottom: .875rem;
}
.banner-right img {	max-width: 100%;
}
.overlay {	display: none;	height: 100%;	position: absolute;	top: 0;	left: 0;	width: 100%;	background: rgba(0,0,0,.8);	padding: 1rem;	text-align: center;	z-index: 1000;
}
.overlay-content {	display: -webkit-flex;	display: flex;	-webkit-justify-content: center;	justify-content: center;	-webkit-align-items: center;	align-items: center;	-webkit-flex-direction: column;	flex-direction: column;	height: 100%;
}
.no-flexbox .overlay-content {	margin-top: 191px;
}
.twitter, .facebook {	width: 40px;	height: 40px;	line-height: 40px;	text-align: center;	border-radius: 50%;	color: #fff;	display: inline-block;	margin: .5rem;
}
.twitter {	background: #55acee;
}
.facebook {	background: #3b579d;
}
.twitter:hover {	background: #478fc5;
}
.facebook:hover {	background: #2c4074;
}
.share-overlay h2 {	margin-bottom: .5rem;	overflow: hidden;
}
.side-content {	width: 31.48%;	padding-left: 2rem;	float: left;
}
.station-socials {	text-align: center;	margin-bottom: .875rem;
}
.powered-by {	font-size: .875rem;	color: rgba(255,255,255,.6);	display: block;	text-align: center;
}
.powered-by a {	color: rgba(255,255,255,.6);	text-decoration: none;
}
.powered-by a:hover { color: #fff;
}
.amazon, .itunes {	width: 40px;	height: 40px;	line-height: 36px;	text-align: center;	border-radius: 50%;	color: #fff;	display: inline-block;	margin: .5rem;	border: 2px solid #fff;	text-decoration: none;
}
.amazon i, .itunes i {	font-style: normal;
}
.amazon:hover, .itunes:hover {	background: #fff;	color: rgba(0,0,0,.8);
}
.stream-time {	color: rgba(255,255,255,.7);	font-size: .875rem;	padding-right: 5px;
}
.cf:before,
.cf:after {	content: " ";	display: table;
}
.cf:after {	clear: both;
}

Audio Player WIP - Script Codes JS Codes

$(document).ready(function() {	$('.last-played-open').on("click", function() {	$('.last-played').show();	});	$('.share-open').on("click", function() {	$('.share-overlay').show();	});	$('.buy-open').on("click", function() {	$('.buy-overlay').show();	});	$('.last-played .close').on("click", function() {	$('.last-played').hide();	});	$('.share-overlay .close').on("click", function() {	$('.share-overlay').hide();	});	$('.buy-overlay .close').on("click", function() {	$('.buy-overlay').hide();	});	/********************************/	$('.stream-control').click(function() {	if($(this).is('.stop')) {	$(this).removeClass('stop').addClass('play');	$(this).children('.control-icon').removeClass('fa-stop').addClass('fa-play');	} else if($(this).is('.play')) {	$(this).removeClass('play').addClass('stop');	$(this).children('.control-icon').removeClass('fa-play').addClass('fa-stop');	}	});
});
Audio Player WIP - Script Codes
Audio Player WIP - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 4,845 Kb
Views 42,504
Do you need developer help for Audio Player WIP?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Rainbow Preloader with Offset-Path
Ship Name Lookup
Greensock Light Switch
Kerbal Space Program Buy Button
SVG Audio Wave Loader
Wireframe Concept
Site Header
Angular-Meteor Showcase
Bumble Coming Soon Page
Gmail Icon Animation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!