没有合适的资源?快使用搜索试试~ 我知道了~
js制作简单的音乐播放器的示例代码
3 下载量 68 浏览量
2020-12-07
11:54:04
上传
评论
收藏 51KB PDF 举报
温馨提示
试读
2页
一、设计目的: 1、随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器。 2、主要功能: 1 支持循环自动播放 2 支持图片的旋转 3 支持调整播放的位置,以及调整声音的大小 4 歌词滚动效果 5 每秒显示音乐的播放时间 二 、设计思路: 1、向浏览器中添加背景音乐: 首先应该向网页中添加几首好听的背景音乐。添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有几首歌就添加几个audo标签,然后获取所有的北京音乐(先添加三首音乐,放到一个数
资源详情
资源评论
资源推荐
js制作简单的音乐播放器的示例代码制作简单的音乐播放器的示例代码
一、设计目的:一、设计目的:
1、随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音
乐,于是突发奇想,制作一个音乐播放器。
2、主要功能:
1 支持循环自动播放
2 支持图片的旋转
3 支持调整播放的位置,以及调整声音的大小
4 歌词滚动效果
5 每秒显示音乐的播放时间
二二 、设计思路:、设计思路:
1、向浏览器中添加背景音乐:
首先应该向网页中添加几首好听的背景音乐。添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一
个数组中,第二种方式是,有几首歌就添加几个audo标签,然后获取所有的北京音乐(先添加三首音乐,放到一个数组中);
play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];
1、播放音乐的时候图片惊醒旋转
2、播放音乐的时候滚动条滚动
3、播放音乐的时候是事件随着背景音乐的播放时间增加
图片转动的函数,当音乐播放的时候调用rotate()函数
functionrotate(){
vardeg=0;
flag=1;
timer=setInterval(function(){
image.style.transform="rotate("+deg+"deg)";
deg+=5;
if(deg>360){
deg=0;
}
},30);
}
清除定时器的函数,当音乐暂停的时候调用imagePause(),图片旋转的定时器被清除掉
functionimagePause(){
clearInterval(timer);
flag=0;
}
2:先定义两个宽度长度大小一样颜色不同的两个div,利用currenttime属性来过去当前的播放的时间,设一个div一开始的长
度为零,然后通过当前播放的事件来调整div长度大小就能实现滚动条的效果了。
functionjindutiao(){
//获取当前歌曲的歌长
varlenth=play[index].duration;
timer1=setInterval(function(){
cur=play[index].currentTime;//获取当前的播放时间
fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
},50)
}
将进度条滚动的定时器清除掉,然后div的长度还原为0;
weixin_38645198
- 粉丝: 5
- 资源: 959
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0