Use cosine theorem to create a disk shape h5 music player, cosine h5

Use cosine theorem to create a disk shape h5 music player, cosine h5
Directory [1] function implementation [2] effect display [3] principle description cosine theorem of rotation principle [4] Code Implementation html css js [5] source code viewing function implementation

[1] converting the playing progress of a song into a visual Rotation Angle

[2] Click any location on the disk to jump to the desired progress

 

Effect display

 

Principles

[1] rotating principle

[2] cosine theorem

Code Implementation

HTML

<div class="outer">        <div id="player" class="box">        <div class="box-in">            <div class="box-in-in"></div>        </div>        <div class="box-con"></div>    </div>    </div><audio id="audio" src="myocean.mp3"></audio>

CSS

body{    margin: 0;}img{    display: block;    border: none;}.outer{    position: relative;    width: 122px;    height: 122px;    margin: 30px auto;        overflow: hidden;    border-radius: 50%;}.box{    position: absolute;    top: 0;    left: 0;     width: 122px;    height: 122px;    background: url('img/music.png');}.box-in{    position: absolute;    top: 0;    right: 0;    width: 50%;    height: 100%;    overflow: hidden;}.box-in-in{    position: absolute;    margin-left: -61px;    width: 61px;    height: 100%;    background: black url('img/music.png');    transform-origin: right;    transform:rotate(0deg);    }.box-con{    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    height: 40px;    width: 40px;    font: 14px/40px "iconfont";    color: black;    text-align: center;    cursor:pointer;    background-color: white;    border-radius: 50%;}@font-face {font-family: 'iconfont';    src: url('font/iconfont.eot'); /* IE9*/    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('font/iconfont.woff') format('woff'), /* chrome、firefox */    url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}

JS

/* Function: [1] Play and pause [2] adjust positioning instructions */var player = document. getElementById ('player'); var control = player. getElementsByClassName ('box-con') [0]; var rotate = player. getElementsByClassName ('box-in-in') [0]; var hidden = player. getElementsByClassName ('box-in') [0]; // mark whether the song has been loaded var mark = false; // mark var enter = false as whether the mouse is moved into the control button area; // record the previous value of the button var lastBtn = '& # xe61d ;'; // when a song can start playing without pause, the play button audio is displayed. oncanplaythrough = Function () {mark = true; control. innerHTML = '& # xe61d;'}; // when the song is playing audio. ontimeupdate = function () {// The percentage of current progress recorded by the play button if (! Enter) {control. innerHTML = Math. floor (audio. currentTime/audio. duration* 100) + '%';} else {control. innerHTML = lastBtn;} // rotate the rotate. style. transform = 'rotate ('+ audio. currentTime/audio. duration * 360 + 'deg) '; if (audio. currentTime/audio. duration) <= 0.5) {hidden.style.css Text = 'overflow: hidden; background: transparent ';} else {hidden.style.css Text = 'overflow: visible; background: black url ("img/music.png") 61px 0';} // when you click the CD, the progress of the Song Changes to the corresponding progress, and the div rotates to the corresponding angle player. onclick = function (e) {if (mark) {var e = e | event; var n1 = e. clientX-this.parentNode.offsetLeft; var n2 = e. clientY-this.parentNode.offsetTop; var a = 61; var B = Math. sqrt (Math. pow (n1-61, 2) + Math. pow (n2-61, 2); var c = Math. sqrt (Math. pow (n1-61, 2) + Math. pow (n2, 2); var radial = Math. acos (a * a + B * B-c * c)/(2 * a * B); // records the angle of rotation when the mouse clicks the disk. var result = 0; if (n1> = 61) {result = radial * 180/Math. PI;} else {result = 360-radial * 180/Math. PI;} audio. currentTime = audio. duration * result/360;} // audio after the song is played. onended = function () {// reload the song audio. load (); // restore the start value of the hidden style. hidden.style.css Text = 'overflow: hidden; background: transparent '; rotate. style. transform = 'rotate (0); '; // set the playback button to 'pause click' control. innerHTML = '& # xe61d;';} // Add a click event control to the control. onclick = function (e) {var e = e | event; if (e. stopPropagation) {e. stopPropagation ();} else {e. cancelBubble = true;} if (mark) {if (audio. paused) {audio. play (); this. innerHTML = '& # xe662;';} else {audio. pause (); this. innerHTML = '& # xe61d;';} lastBtn = control. innerHTML ;}}; // when the mouse moves to control, mark enter as truecontrol. onmouseover = function () {if (mark) {enter = true ;}// when the mouse moves out of control, mark enter as falsecontrol. onmouseout = function () {if (mark) {enter = false ;}}

 

View Source Code