原生JS实现小小的音乐播放器


Posted in Javascript onOctober 16, 2017

前  言         

最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~

主要功能:

       1、支持循环、随机播放

2、在播放的同时支持图片的旋转

       3、支持点击进度条调整播放的位置,以及调整音量

       4、显示音乐的播放时间

       5、支持切歌:上一首、下一首、点击歌名切歌;暂停播放等~

添加音乐有两种方式:

①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中;

②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到一个数组中,当然,大家可以挑选自己喜欢的任何歌曲)。

<audio id="play1">
   <source src="auto/旅行.mp3"></source>
</audio>
<audio id="play2">
   <source src="auto/薛明媛,朱贺 - 非酋.mp3"></source>
</audio>
<audio id="play3">
   <source src="auto/杨宗纬 - 越过山丘.mp3"></source>
</audio>
play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];

1点击播放、暂停

首选我们应该清楚的是,在点击按钮播放的时候应该实现的有:

①音乐开始播放;

②进度条开始随歌曲的播放往前走;

③图片开始随歌曲播放旋转;

④播放时间开始计时;

那么相对应的,再次点击播放按钮的时候,我们就可以让它实现暂停:

①歌曲暂停;

②让进度条同时暂停;

③让播放时间计时同时暂停;

④图片停止旋转;

注意:上述开始暂停操作一定要同步!

理清楚我们的思路以后,就可以来一 一实现了~

点击播放/暂停

//点击播放、暂停
  function start(){
   minute=0;
    if(flag){
      imagePause();
      play[index].pause();
     }else{
      rotate();
      play[index].play();
      reducejindutiao();
      addtime();
      jindutiao();
      for (var i=0;i<play.length;i++) {
        audioall[i].style.color="white";
         }
      audioall[index].style.color="red";
     }
 }

因为播放和暂停在同一个按钮上,所以都会调用上述方法,我们来详细看一下各个函数都实现了怎样的功能:

图片旋转

//图片旋转,每30毫米旋转5度
  function rotate(){
    var deg=0;
    flag=1;
    timer=setInterval(function(){
    image.style.transform="rotate("+deg+"deg)";
      deg+=5;
       if(deg>360){
        deg=0;
        }
    },30);
 }

上述是图片转动的函数,当音乐播放的时候调用rotate()函数,就可以实现图片的旋转!

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

function imagePause(){
    clearInterval(timer);
    flag=0;
 }

这样图片旋转的功能我们就已经实现了~

进度条

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

function jindutiao(){
   //获取当前歌曲的歌长
   var lenth=play[index].duration;
    timer1=setInterval(function(){
    cur=play[index].currentTime;//获取当前的播放时间
     fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
      },50)
}

这样,进度条就完成啦~

播放时间

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

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

2切歌
我做了两种方式实现切歌:

①点击上一曲、下一曲按钮实现切歌;

//上一曲
  function reduce(){
          qingkong();
          reducejindutiao();
          pauseall();
          index--;
          if(index==-1){
            index=play.length-1;
          }
          start();
        }
        //下一曲
        function add(){
          qingkong();
          reducejindutiao();
          pauseall();
          index++;
          if(index>play.length-1){
            index=0;
          }
          start();
        }

②点击歌名,实现歌曲的切换;

//点击文字切歌
        function change(e){
          var musicName=e.target;
          //先清空所有的
          for (var i=0;i<audioall.length;i++) {
            audioall[i].style.color="white";
            if(audioall[i]==musicName){
              musicName.style.color="red";
              qingkong();
              reducejindutiao();
              pauseall();
              index=i;
              start();
            }
          }
        }

注意:在切歌时不要忘了我们的进度条!

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

//将进度条置0
 function reducejindutiao(){
     clearInterval(timer1);
      fillbar.style.width="0";
 }

同时音乐停止:

//音乐停止
   function pauseall(){
        for (var i=0;i<play.length;i++) {
            if(play[i]){
              play[i].pause();
            }
          }
        }

清空所有定时器:

function qingkong(){//清空所有的计时器
    imagePause();
    clearInterval(timer2);
 }

3点击进度条调整播放进度及音量

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

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

//调整播放进度
 function adjust(e){
   var bar=e.target;
   var x=e.offsetX;
   var lenth=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";
}

4随机、循环播放

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

//随机播放歌曲
  function suiji(e){
          var img=e.target;
          img2.style.border="";
          img.style.border="1px solid red";
        }
        //顺序播放
        function shunxu(e){
          var img=e.target;
          img1.style.border="";
          img.style.border="1px solid red";
          clearInterval(suijiplay);
          shunxuplay=setInterval(function(){
            if(play[index].ended){
              add();
            }
          },1000);
        }

这样我们整个音乐播放器就完成了,大家可以自己写一个好看的界面,就更完美了。

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

Javascript 相关文章推荐
简单实用的全选反选按钮例子
Oct 18 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 #Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 #Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
JS继承与闭包及JS实现继承的三种方式
Oct 15 #Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 #Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 #Javascript
You might like
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
大型会议接待方案
2014/03/01 职场文书
入党综合考察材料
2014/06/02 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
产品委托授权书范本
2014/09/16 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
新闻通讯稿范文
2015/07/22 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技