HTML5 Ring Music Player

Through HTML5, music is a comeback on the web. Adding audio files is as simple as inserting an image, and users can play music outside the browser for an amazing music experience. The introduction of <audio> tags eliminates the need for external music players to achieve true sound fusion on the site.
With the advent of HTML5, there have been some major changes, especially in music and audio. Developers no longer require web surfers to use special players such as Adobe Flash, Apple QuickTime, or Microsoft Windows Media Player. This means that users do not have to worry about having the latest compatible plug-ins (or any player plug-ins). They simply open their favorite browser and listen to anything that makes a sound, such as music, audiobooks, FX sound effects, or messages recorded by friends and family.

Well, look directly at the code:

<! DOCTYPE html>
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);/** * Pause Playback */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 (); }}/** * Set Volume */function SetVolume () {audio.volume = Volume.value;} /** * Update Progress */function updateprogress () {var percent = Math.floor ((100/audio.duration) * audio.currenttime);p Rogress.valu E = Percent;var Canvas = document.getElementById (' progress '); var context = Canvas.getcontext (' 2d '); var CenterX = CANVAS.W Idth/2;var CenterY = Canvas.height/2;varRadius = 150;var Circ = Math.PI * 2;var quart = Math.pi/2;var cpercent = percent/100; 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> ';}
/* Font Awesome */@import URL (http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);/* Roboto Condensed */@import URL (http://fonts.googleapis.com/css?family=Roboto+Condensed:300);/* Basic */*, *:before, *:after {Box-sizing:border-box;} body {margin:0; min-height:100%; background: #EEE; font-family: ' Roboto condensed ', Sans-serif; font-weight:300;} A {color: #FFF; text-decoration:none;} a:hover {color: #26C5CB;} 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: #fff;  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: #4D4D4D;  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: #fff;  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: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: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;} /* MediaQueries */@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;}}
OK, look at the effect:
If you do not understand, please add QQ Group: 135430763 Study together!
HTML5 Ring Music Player