功能实现

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

使用余弦定理制作磁盘形状h5音乐播放器的更多相关文章

  1. Swift - 制作一个在线流媒体音乐播放器(使用StreamingKit库)

    在之前的文章中,我介绍了如何使用 AVPlayer 制作一个简单的音乐播放器(点击查看1.点击查看2).虽然这个播放器也可以播放网络音频,但其实际上是将音频文件下载到本地后再播放的. 本文演示如何使用 ...

  2. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

  3. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

  4. H5音乐播放器源码地址

    源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA      安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...

  5. H5音乐播放器源码共享

    由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w   H5源码!暂时只支持手机适配,电脑端 ...

  6. H5音乐播放器【歌单列表】

    上篇详细描述了播放页歌词如何实现跟随跟单滚动,如何解析歌词,那么歌单页又是如何生成的呢,话不多说,直接上图上代码! 首先需要获取数据,具体获取数据api请转到我跟我大兄弟博客去观看学习去,同时也感谢我 ...

  7. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  8. HTML5网页音乐播放器

    1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...

  9. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

随机推荐

  1. 游戏Loading中的小提示和Loading动画实现

    学习unity1年多了,工作也1年了,因为工作需要,有几个月没接触unity Ngui啦. 学的还是不踏实.继续努力吧.由于下周就要进行新游戏的开发,这几天熟悉熟悉NGUI,今天按照现在公司以前的项目 ...

  2. hdu 5106 组合数学+找规律

    http://acm.hdu.edu.cn/showproblem.php?pid=5106 给定n和r,要求算出[0,r)之间所有n-onebit数的和,n-onebit数是所有数位中1的个数. 对 ...

  3. ios 随记录

    1. 设置全局的就不写了.当单个VC需要的时候.一般是这样子. /* 设置StatusBar的样式,UIStatusBarStyleDefault与UIStatusBarStyleLightConte ...

  4. (转)Windows下的Memcached安装与使用

    WHAT Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memc ...

  5. MyEclipse 常用操作

    1.使用JREBEL插件包实现myeclipse修改类文件后无须重启 在Myeclipse中的window-preferences(搜索tomcat)->然后到tomcatx.x下的-jdk中配 ...

  6. ORACLE 自定义分页存储过程

    一.创建包 CREATE OR REPLACE PACKAGE PKG_JK_LAB_BASIC IS TYPE CURSOR_TYPE IS REF CURSOR; PROCEDURE SP_GET ...

  7. crtmpserver系列(一):流媒体概述

    概述 所谓流媒体按照字面意思理解就是像流一样的媒体,看起来像是废话.流媒体现在司空见惯,所以一般人大概不会有疑问.事实上在流媒体还没有出现的时候,基本上通过网络播放电影就不太现实.通过网络播放电影的时 ...

  8. 使用Immutable优化复制注意事项

    这是Orleans中对于序列化检查类型是否支持Orleans内置的高速序列化时,使用Immutable<>包装和类型声明时,有ImmutableAttribute,效果是一样的.所以无需重 ...

  9. windows系统下的第一个console程序

    窗口+r 键,输入cmd,打开一个命令行窗口 切换到你的目标目录 输入 dotnet new dotnet会自动帮你创建3个文件. NuGet.Config文件主要定义了NuGet获取nupkg包时的 ...

  10. Linux修改环境变量的方法

    在Linux操作系统中,有时候跟着教程安装了一些软件,安装成功后,很高兴的准备运行该软件相应命令,但是偶尔会遇到”Command not found…“的提示.原因是因为你安装的软件需要设置环境变量才 ...