Circular rotating music player with menu on back with html5 javascript and css3

Developer
Stan Williams
Size
5,572 Kb
Views
34,408
  1. Circular rotating music player with menu on back with html5 javascript and css3 Previews
  2. Circular rotating music player with menu on back with html5 javascript and css3 HTML Codes
  3. Circular rotating music player with menu on back with html5 javascript and css3 CSS Codes
  4. Circular rotating music player with menu on back with html5 javascript and css3 JS Codes

How do I make an circular rotating music player with menu on back with html5 javascript and css3?

Circular rotating music player with menu on back with html5 javascript and css3. What is a circular rotating music player with menu on back with html5 javascript and css3? How do you make a circular rotating music player with menu on back with html5 javascript and css3? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.

Circular rotating music player with menu on back with html5 javascript and css3 Previews
IQ Test

Circular rotating music player with menu on back with html5 javascript and css3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular rotating music player with menu on back with html5 javascript and css3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="UTF-8"> <title>Circular rotating music player with menu on back with html5 javascript and css3</title> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body> <div id="container">	<label class="to-back-label" for="to-back"><i class="fa fa-bars fa-lg">Flip</i></label>	<input type="checkbox" id="to-back"><!-- playlist toggle -->	<canvas id="progress" width="320" height="320"></canvas><!-- progress bar -->	<div id="player">	<audio id="audio" controls>	<source src="https://ia700204.us.archive.org/2/items/OriginalMemphisFive-HowComeYouDoMeLikeYouDo/Original_Memphis_Five-How_Come_You_Do_Me_Like_You_Do-1924.ogg" type="audio/mpeg" codecs="mp3"></source>	</audio>	<img src="https://farm4.staticflickr.com/3180/3093562978_7f69c4663d.jpg"><!-- album cover -->	<label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg"></i></label>	<input type="checkbox" id="to-lyrics"><!-- lyrics toggle -->	<div class="cover">	<div class="controls">
<!-- <button id="backward" title="Backward"><i class="fa fa-retweet fa-lg"></i></button>	<button id="backward" title="Backward"><i class="fa fa-backward fa-2x"></i></button> --->	<button id="play-pause" title="Play" onclick="togglePlayPause()"><i class="fa fa-play fa-3x"></i></button>	<!-- <button id="forward" title="Forward"><i class="fa fa-forward fa-2x"></i></button> --->	<!-- <button id="backward" title="Backward"><i class="fa fa-random fa-lg"></i></button> --->	<input id="volume" name="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />	</div><!-- #controls -->	<div class="info">	<p class="song"><a href="http://stanwilliams.net/circular-rotating-music-player-with-menu-on-back-with-html5-and-css3/" target="_blank">Back to article</a></p>	<p class="author"><a href="https://archive.org/details/OriginalMemphisFive-HowComeYouDoMeLikeYouDo" target="_blank">Original Memphis Five</a></p>	</div><!-- #info -->	<div class="lyrics">	<p>Early Jazz group The Original Memphis Five perform "How Come You Do Me Like You Do?" in this recording from October 1st, 1924. From the original 78rpm disk.
This audio is part of the collection: 78 RPMs & Cylinder Recordings
It also belongs to collection: Music, Arts & Culture</p>	</div><!-- #lyrics -->	<p class="scroll">scroll down</p> </div><!-- #cover -->
</div><!-- #player -->
<div id="flip-back"> <ul class="playlist">	<h3>Links</h3>	<li><a href="https://twitter.com/StansSongs/" target="_blank"> Twitter</a></li>	<li><a href="https://facebook.com/stanwilliamsmusic/" target="_blank"> Facebook</a></li>	<li><a href="http://stanwilliams.net/circular-rotating-music-player-with-menu-on-back-with-html5-javascript-and-css3/" target="_blank" style="color:#26C5CB;"><i class="fa fa-play" style="margin-right:4px;"></i> www.Stanwilliams.net</a></li>	<li><a href="http://stanwilliamsmusic.com/" target="_blank""> Official Music Website</a></li>	<li><a href="https://plus.google.com/u/0/+StanWilliams/" target="_blank"> Google +</a></li>	<li><a href="http://stans-songs.com" target="_blank"> Stans-Songs.com</a></li>	<li><a href="http://myspace.com/stanwilliams/" target="_blank"> Stan on Myspace</a></li>	<li><a href="https://soundcloud.com/stanwmusic" target="_blank">Sound Cloud</a></li>	<li><a href="https://www.pinterest.com/stanssongs/" target="_blank"> Pinterest</a></li>	<li><a href="http://www.last.fm/music/Stan+Williams/Peace+Pipe" target="_blank"> Last FM</a></li>	</ul>	</div><!-- #flip-back -->
</div><!-- #container -->
<div class="credits"> <p>MUSIC — "<a href="https://archive.org/details/OriginalMemphisFive-HowComeYouDoMeLikeYouDo" target="_blank">Original Memphis Five &nbsp;October 1, 1924 &nbsp;&nbsp;78 RPM Disk</a><br>Music source: &nbsp<a href="https://archive.org/details/OriginalMemphisFive-HowComeYouDoMeLikeYouDo" target="_blank">Archive.org</a>&nbsp; Photo credit: <a href="https://www.flickr.com/photos/muohio_digital_collections/3093562978/sizes/m/" target="_blank">Flickr Commons</a></p>
</div><!-- #credits --> <script src="js/index.js"></script>
</body>
</html>

Circular rotating music player with menu on back with html5 javascript and css3 - Script Codes CSS Codes

/* Font Awesome */
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
/* Roboto Condensed */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
/* Basic */
*, *:before, *:after { box-sizing: border-box; }
body { margin: 0; min-height: 100%; background: #222; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }
a { color: #000; text-decoration: none; }
a:hover { color: #26C5dB; }
p { margin: 0; }
.credits { position: absolute; left: 20px; bottom: 20px; color: #ccc; font-size: 14px; }
.credits a { color: #26C5CB; }
/* Centering */
#container, #progress, #player, #flip-back, .cover, .playlist { position: absolute; margin: auto; top: 0; left: 0; right: 0;	bottom: 0;
}
#container { width: 320px; height: 320px; perspective: 550px; -webkit-perspective: 550px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
}
#player {	width: 300px; height: 300px; background: #f333;	border-radius: 50%; overflow: hidden; box-shadow: 2px 2px 20px 0 rgba(0,0,0,.3); z-index: 300;
}
#progress { width: 320px; height: 320px; z-index: 200; transform: rotate(147deg); -webkit-transform: rotate(147deg); filter: blur(1px); -webkit-filter: blur(1px); transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
}
#flip-back { width: 300px; height: 300px; background: #313131; border: 4px solid #AEAEAE; border-radius: 50%; overflow: hidden; box-shadow: inset 0 -10px 10px -5px rgba(0,0,0,.3), 2px 2px 20px 0 rgba(0,0,0,.3); /* inner + outer */ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);
}
/* Album Cover */
img {	width: 100%; height: 100%; background: #333; opacity: .75; transition: .3s all ease-in-out; -webkit-transition: .3s all ease-in-out;
}
/* Fade */
#container:hover .cover,
#container:hover .to-lyrics-label,
#container:hover .to-back-label { opacity: .9;
}
.cover,
.to-lyrics-label,
.to-back-label { opacity: .3; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;
}
/* Player Buttons */
.controls { position: relative; width: 100%; color: #fff; text-align: center;
}
button { margin: 10px; color: #fff; background: transparent; border: 0; outline: 0; cursor: pointer; text-align: center; text-shadow: 1px 1px 3px #000; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;
}
button:hover { color: #26C5CB;
}
#play-pause { width: 46px; height: 46px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;	}
/* Song Info */
.info {	position: relative; margin-top: 28px; bottom: 10px; color: #fff; text-align: center; text-shadow: 1px 1px 3px #000;
}
.song { font-size: 18px;
}
.author { font-size: 14px; margin-bottom: -8px;
}
/* ... */
.song,
.author,
.playlist a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Volume */
input[type='range'] { display: block; margin: 14px auto; width: 80px; height: 2px; outline: 0; cursor: pointer; box-shadow: 1px 1px 3px 0 #000; -webkit-appearance: none !important;
}
input[type='range']::-webkit-slider-thumb { background: #AEAEAE; height: 6px; width: 6px; border-radius: 50%; transition: .1s all linear; -webkit-transition: .1s all linear; -webkit-appearance: none !important;
}
input[type='range']:hover::-webkit-slider-thumb {	background: #26C5CB; -webkit-transform:scale(2);
}
/* Checkboxes */
input[type=checkbox] {	position: absolute; top: -9999px; left: -9999px;
}
label { text-shadow: 1px 1px 3px #000;
}
.to-back-label:hover,
.to-lyrics-label:hover { color: #26C5CB;
}
label:active,
label:focus { top: 0; opacity: 0;
}
label.to-back-label { position: absolute; top: 20px; left: 50%; width: 30px; height: 30px; margin-left: -15px; color: #fff; text-align: center; cursor: pointer; z-index: 500;
}
label.to-lyrics-label { position: absolute; top: 276px; left: 50%; width: 20px; height: 20px; margin-left: -5px; color: #fff; cursor: pointer; z-index: 500;
}
/* Flip Back */
#player, #flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; -webkit-transition: -webkit-transform .5s ease-in-out;
}
#to-back:checked ~ #flip-back { z-index: 400; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
}
#to-back:checked ~ #player { z-index: -1; transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
#to-back:checked ~ #progress { opacity: 0; transform: rotate(0); -webkit-transform: rotate(0);
}
#to-back:checked ~ #flip-back .playlist { transform: translateY(0); -webkit-transform: translateY(0);
}
/* Lyrics */
.lyrics { position: relative; width: 100%; height: 96px; margin-top: 30px; padding: 4px 24px; color: #000; background: rgba(255,255,255,.3); font-size: 12px; text-align: center; overflow-y: scroll; box-shadow: inset 0 -3px 5px 0 rgba(0,0,0,.5);	transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
}
.lyrics:hover {	background: rgba(255,255,255,.8);
}
.lyrics::-webkit-scrollbar { display: none;
}
.scroll { color: #fff; text-align: center; font-size: 9px; font-weight: bold; text-shadow: 1px 1px 3px #000;
}
.cover { padding-top: 130px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
}
#to-lyrics:checked ~ .cover { padding-top: 40px;
}
#to-lyrics:checked ~ .cover .lyrics { margin-top: 0px;
}
#to-lyrics:checked ~ .cover button { margin: 4px;
}
/* Playlist */
.playlist {	margin-top: 20px; padding: 14px 20px; font-size: 12px; text-align: center; list-style: none; overflow-y: auto; z-index: 9999; transform: translateY(300px); -webkit-transform: translateY(300px); transition: -webkit-transform .5s ease-in-out .3s; transition: transform .5s ease-in-out .3s; transition: transform .5s ease-in-out .3s, -webkit-transform .5s ease-in-out .3s; -webkit-transition: -webkit-transform .5s ease-in-out .3s;
}
.playlist h3 { color: #aeaeae;
}
.playlist li { display: block; padding: 4px 0; color: #AEAEAE; cursor: pointer; text-decoration: none;
}
.playlist li:hover { color: #26C5CB;
}
.playlist li:nth-child(1) { padding: 0 24px;
}
.playlist::-webkit-scrollbar { display: none;
}
/* Media Queries */
@media all and (max-width: 768px) { #container, #player { width: 150px; height: 150px;} #progress { width: 160px; height: 160px; margin-top: -5px; margin-left: -5px; } label, .lyrics, .scroll { display: none; } .cover { padding-top: 46px; } button { margin: 4px; } button:first-of-type, button:last-of-type { display: none; } input[type='range'] { display: block; margin-top: -76px; height: 1px; } .info { margin-top: 70px; } .song { font-size: 12px; } .author { font-size: 10px; }
}

Circular rotating music player with menu on back with html5 javascript and css3 - Script Codes JS Codes

var audio = document.getElementById('audio');
var progress = document.getElementById('progress');
var playpause = document.getElementById("play-pause");
var volume = document.getElementById("volume");
audio.controls = false;
audio.addEventListener('timeupdate', function() {	updateProgress();
}, false);
function togglePlayPause() { if (audio.paused || audio.ended) { playpause.title = "Pause"; playpause.innerHTML = '<i class="fa fa-pause fa-3x"></i>'; audio.play(); } else { playpause.title = "Play"; playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>'; audio.pause(); }
}
function setVolume() { audio.volume = volume.value;
}
function updateProgress() {	var percent = Math.floor((100 / audio.duration) * audio.currentTime);	progress.value = percent;	var canvas = document.getElementById('progress');	var context = canvas.getContext('2d');	var centerX = canvas.width / 2;	var centerY = canvas.height / 2;	var radius = 150;	var circ = Math.PI * 2;	var quart = Math.PI / 2;	var cpercent = percent / 100; /* current percent */	context.beginPath();	context.arc(centerX, centerY, radius, 0, ((circ) * cpercent), false);	context.lineWidth = 10;	context.strokeStyle = '#26C5CB';	context.stroke();	if (audio.ended) resetPlayer();
}
function resetPlayer() { audio.currentTime = 0; context.clearRect(0,0,canvas.width,canvas.height); playpause.title = "Play"; playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
}
// thx to: http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html
/* Circular rotating music player with menu on back with html5 javascript and css3 is MIT licensed: https://opensource.org/licenses/MIT
*/
Circular rotating music player with menu on back with html5 javascript and css3 - Script Codes
Circular rotating music player with menu on back with html5 javascript and css3 - Script Codes
Home Page Home
Developer Stan Williams
Username Stanssongs
Uploaded September 08, 2022
Rating 3.5
Size 5,572 Kb
Views 34,408
Do you need developer help for Circular rotating music player with menu on back with html5 javascript and css3?

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!

Stan Williams (Stanssongs) Script Codes
Name
Animated button effects using jquery, css, javascript and effeckts.js
Cursor following menu demo
Horizontal Menu Demo
A Pen by Stan Williams
3D Hover Effect for Images
Record Player with CSS3 Anims and HTML5 Audio
Blog Page
Draggy Bits
Mouse Position Background Focus Effect
HTML5 Player with Flash fallback for non supporting browsers.
Create amazing web content 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!