使用餘弦定理製做磁盤形狀h5音樂播放器

功能實現

　　[1]歌曲播放進度轉換成視覺的旋轉角度

　　[2]點擊磁盤任意位置歌曲跳轉到相應進度

 

效果展現

 

原理說明

【1】旋轉原理

【2】餘弦定理

代碼實現

HTML

<div class="outer">
    <img src="img/huochai.jpg" alt="match" width="122" height="122">
    <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

/*
功能實現
[1]播放、暫停
[2]調整定位指示
 */    
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];
//做爲歌曲是否加載完畢的標記
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*100) + '%';
    }else{
        control.innerHTML = lastBtn;
    }
    //旋轉相應度數
    rotate.style.transform = 'rotate('+ audio.currentTime/audio.duration*360 + '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 = 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));
        //記錄鼠標點擊磁盤時旋轉的角度
        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.onended = function(){
    //從新加載歌曲
    audio.load();
    //將hidden的樣式恢復起始值
    hidden.style.cssText = 'overflow:hidden;background:transparent';
    rotate.style.transform ='rotate(0);';
    //將播放按鈕置爲'暫停按鈕'
    control.innerHTML = '&#xe61d;';
}
//給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 = '&#xe662;';
        }else{
            audio.pause();
            this.innerHTML = '&#xe61d;';
        }    
        lastBtn = control.innerHTML;    
    }
};    
//當鼠標移入control時，標記enter爲true
control.onmouseover = function(){
    if(mark){
        enter = true;
    }
}    
//當鼠標移出control時，標記enter爲false
control.onmouseout = function(){
    if(mark){
        enter = false;
    }
}