音乐吧 - www.1327.net

 找回密码
 注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 307|回复: 0

音乐播放器js制作简单代码

[复制链接]

1017

主题

1028

帖子

9210

积分

管理员

Rank: 9Rank: 9Rank: 9

音乐币
102
贡献
519
金钱
3339
威望
2111
相册
1

推广达人宣传达人突出贡献荣誉管理最佳新人活跃会员

QQ
发表于 2017-11-7 23:53:32 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
1、向浏览器中添加背景音乐:

首先应该向网页中添加几首好听的背景音乐。添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有几首歌就添加几个audo标签,然后获取所有的北京音乐(先添加三首音乐,放到一个数组中)

  1. play1=document.getElementById("play1");
  2. play2=document.getElementById("play2");
  3. play3=document.getElementById("play3");
  4. play=[play1,play2,play3];
复制代码

1、播放音乐的时候图片惊醒旋转

2、播放音乐的时候滚动条滚动

3、播放音乐的时候是事件随着背景音乐的播放时间增加

图片转动的函数,当音乐播放的时候调用rotate()函数

  1. functionrotate(){
  2.         vardeg=0;
  3.         flag=1;
  4.         timer=setInterval(function(){
  5.           image.style.transform="rotate("+deg+"deg)";
  6.           deg+=5;
  7.           if(deg>360){
  8.            deg=0;
  9.           }
  10.         },30);
  11.       }
复制代码

清除定时器的函数,当音乐暂停的时候调用imagePause(),图片旋转的定时器被清除掉

  1. functionimagePause(){
  2.        clearInterval(timer);
  3.        flag=0;
  4.      }
复制代码

2:先定义两个宽度长度大小一样颜色不同的两个div,利用currenttime属性来过去当前的播放的时间,设一个div一开始的长度为零,然后通过当前播放的事件来调整div长度大小就能实现滚动条的效果了。

  1. functionjindutiao(){
  2.         //获取当前歌曲的歌长
  3.         varlenth=play[index].duration;
  4.         timer1=setInterval(function(){
  5.           cur=play[index].currentTime;//获取当前的播放时间
  6.           fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
  7.         },50)
  8.       }
复制代码

将进度条滚动的定时器清除掉,然后div的长度还原为0;

  1. function reducejindutiao(){
  2.          clearInterval(timer1);
  3.          fillbar.style.width="0";
  4.        }
复制代码

3,背景音乐的播放时间也是利用currenttime来随时改变,不过应该注意currenttime的计时单位为秒

  1. function addtime(){
  2.          timer2=setInterval(function(){
  3.            cur=parseInt(play[index].currentTime);//秒数
  4.            vartemp=cur;
  5.            minute=parseInt(temp/60);
  6.            if(cur%60<10){
  7.             time.innerHTML=""+minute+":0"+cur%60+"";
  8.            }else{
  9.             time.innerHTML=""+minute+":"+cur%60+"";
  10.            }
  11.          },1000);
  12.        }
复制代码

二、实现通过进度条来调整歌曲的播放位置:

首先应该理清一下逻辑:当点击进度条的时候,滚动条的宽度应该跟鼠标的offsetX一样长,然后根据进度条的长度来调整听该显示的时间

(1) 给滚动条的div添加一个事件,当滚动条长度变化的时候歌曲的当前播放的时间调整,300是滚动条的总长度

  1. function adjust(e){
  2.       var bar=e.target;
  3.       var x=e.offsetX;
  4.       varlenth=play[index].duration;
  5.       fillbar.style.width=x+"px";
  6.       play[index].currentTime=""+parseInt(x*lenth/300)+"";
  7.       play[index].play();
  8.     }
复制代码

(2) 改变声音大小的滚动条,跟改变播放时间类似,利用volume属性(值为零到一)

  1. function changeVolume(e){
  2.          var x=e.offsetX+20;
  3.          play[index].volume=parseFloat(x/200)*1;
  4.          //改变按钮的位置
  5.          volume3.style.left=""+x+"px";
  6.        }
复制代码

(3)随机跟顺序播放音乐

顺序播放音乐的时候,直接index++当index的范围超过歌曲的长度的时候,index=0重新开始。随机播放的函数类似,当歌曲播放完毕的时候,随机产生一个0到play.length的数字就可以了

  1. unctionshunxu(e){
  2.          var img=e.target;
  3.          img1.style.border="";
  4.          img.style.border="1pxsolid red";
  5.          clearInterval(suijiplay);
  6.          shunxuplay=setInterval(function(){
  7.            if(play[index].ended){
  8.              add();
  9.            }
  10.          },1000);
  11.        }
复制代码

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|Archiver|版权声明|音乐吧 1327.net ( 桂IPC 网站备案中... )

GMT+8, 2019-12-16 04:15 , Processed in 0.033735 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 1327.Net Inc.

快速回复 返回顶部 返回列表