使用余弦定理制作磁盘形状h5音乐播放器

功能实现

　　[1]歌曲播放进度转换成视觉的旋转角度

　　[2]点击磁盘任意位置歌曲跳转到相应进度

效果展示

原理说明

【1】旋转原理

【2】余弦定理

代码实现

HTML

<div class="outer">

    <img src="img/huochai.jpg" alt="match" width="" height="">

    <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: ;

}

img{

    display: block;

    border: none;

}

.outer{

    position: relative;

    width: 122px;

    height: 122px;

    margin: 30px auto;

    overflow: hidden;

    border-radius: %;

}

.box{

    position: absolute;

    top: ;

    left: ;

    width: 122px;

    height: 122px;

    background: url('img/music.png');

}

.box-in{

    position: absolute;

    top: ;

    right: ;

    width: %;

    height: %;

    overflow: hidden;

}

.box-in-in{

    position: absolute;

    margin-left: -61px;

    width: 61px;

    height: %;

    background: black url('img/music.png');

    transform-origin: right;

    transform:rotate(0deg);

}

.box-con{

    position: absolute;

    left: %;

    top: %;

    transform: translate(-%,-%);

    height: 40px;

    width: 40px;

    font: 14px/40px "iconfont";

    color: black;

    text-align: center;

    cursor:pointer;

    background-color: white;

    border-radius: %;

}

@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

/*

功能实现

[1]播放、暂停

[2]调整定位指示

 */

var player = document.getElementById('player');

var control = player.getElementsByClassName('box-con')[];

var rotate =  player.getElementsByClassName('box-in-in')[];

var hidden =  player.getElementsByClassName('box-in')[];

//作为歌曲是否加载完毕的标记

var mark = false;

//作为鼠标是否移入控制按钮区域的标记

var enter = false;

//记录按钮的上一个值

var lastBtn = '';

//当歌曲可以开始不停顿地一直播放时，显示播放按钮

audio.oncanplaythrough = function(){

    mark = true;

    control.innerHTML = ''

};

//当歌曲在播放过程中

audio.ontimeupdate = function(){

    //播放按钮记录当前进度百分比

    if(!enter){

        control.innerHTML = Math.floor(audio.currentTime/audio.duration*) + '%';

    }else{

        control.innerHTML = lastBtn;

    }

    //旋转相应度数

    rotate.style.transform = 'rotate('+ audio.currentTime/audio.duration* + 'deg)';

    if((audio.currentTime/audio.duration)<=0.5){

        hidden.style.cssText = 'overflow:hidden;background:transparent';

    }else{

        hidden.style.cssText = 'overflow:visible;background:black url("img/music.png") 61px 0';

    }

}

//当鼠标点击光盘时，歌曲进度变化到对应进度，div旋转到对应角度

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 = ;

        var b = Math.sqrt(Math.pow(n1-,)+Math.pow(n2-,));

        var c = Math.sqrt(Math.pow(n1-,)+Math.pow(n2,));

        var radial = Math.acos((a*a + b*b - c*c)/(*a*b));

        //记录鼠标点击磁盘时旋转的角度

        var result = ;

        if(n1 >= ){

            result = radial*/Math.PI;

        }else{

            result = -radial*/Math.PI;

        }

        audio.currentTime = audio.duration*result/;

    }

}

//当歌曲播放完毕后

audio.onended = function(){

    //重新加载歌曲

    audio.load();

    //将hidden的样式恢复起始值

    hidden.style.cssText = 'overflow:hidden;background:transparent';

    rotate.style.transform ='rotate(0);';

    //将播放按钮置为'暂停按钮'

    control.innerHTML = '';

}

//给control添加点击事件

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 = '';

        }else{

            audio.pause();

            this.innerHTML = '';

        }

        lastBtn = control.innerHTML;

    }

};

//当鼠标移入control时，标记enter为true

control.onmouseover = function(){

    if(mark){

        enter = true;

    }

}

//当鼠标移出control时，标记enter为false

control.onmouseout = function(){

    if(mark){

        enter = false;

    }

}