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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.