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

功能實現

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

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

效果展示

原理說明

【1】旋轉原理

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ICgHP287-1579094963730)(https://upload-images.jianshu.io/upload_images/20806814-39738ed2a34f54b2.gif?imageMogr2/auto-orient/strip)]

【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>
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

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