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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
[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
解析csv数据导入mysql的方法
2013/07/01 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
不安全的常用的js写法
2009/09/15 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
vue观察模式浅析
2018/09/25 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
简单了解python PEP的一些知识
2019/07/13 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
.NET方向面试题
2014/11/20 面试题
动态密码技术
2012/10/18 面试题
中专生职业生涯规划书范文
2013/12/29 职场文书
高三毕业寄语
2014/04/10 职场文书
同乡会致辞
2015/07/30 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python