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


Posted in Javascript onAugust 28, 2017

一、设计目的:

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;

function reducejindutiao(){
         clearInterval(timer1);
         fillbar.style.width="0";
       }

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

function addtime(){
         timer2=setInterval(function(){
           cur=parseInt(play[index].currentTime);//秒数
           vartemp=cur;
           minute=parseInt(temp/60);
           if(cur%60<10){
            time.innerHTML=""+minute+":0"+cur%60+"";
           }else{
            time.innerHTML=""+minute+":"+cur%60+"";
           }
         },1000);
       }

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

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

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

function adjust(e){
         var bar=e.target;
         var x=e.offsetX;
         varlenth=play[index].duration;
         fillbar.style.width=x+"px";
         play[index].currentTime=""+parseInt(x*lenth/300)+"";
         play[index].play();
       }

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

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

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

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

functionshunxu(e){
         var img=e.target;
         img1.style.border="";
         img.style.border="1pxsolid red";
         clearInterval(suijiplay);
         shunxuplay=setInterval(function(){
           if(play[index].ended){
             add();
           }
         },1000);
       }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
jquery text()要注意啦
Oct 30 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 #Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
[js高手之路]原型式继承与寄生式继承详解
Aug 28 #Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 #Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 #Javascript
js排序与重组的实例讲解
Aug 28 #Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 #Javascript
You might like
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python中super的用法实例
2015/05/28 Python
python中正则的使用指南
2016/12/04 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
如何利用python生成MD5并去重
2020/12/07 Python
nohup的用法
2014/08/10 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
最新会计专业求职信范文
2014/01/28 职场文书
经典英文广告词
2014/03/18 职场文书
医药销售自我评价200字
2014/09/11 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
初三英语教学计划
2015/01/23 职场文书
院系推荐意见
2015/06/05 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python