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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 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中英混合字符串截取函数代码
2011/07/17 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php实现搜索类封装示例
2016/03/31 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
档案检查欢迎词
2014/01/13 职场文书
法制宣传月活动方案
2014/05/11 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers