原生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 相关文章推荐
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
详解Vue的ref特性的使用
Jan 24 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php 无法载入mysql扩展
2010/03/12 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
PHP7修改的函数
2021/03/09 PHP
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Python struct模块解析
2014/06/12 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
寒假思想汇报
2014/01/10 职场文书
村官学习十八大感想
2014/01/15 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年新学期寄语
2015/02/26 职场文书
实习证明模板
2015/06/16 职场文书
高三生物教学反思
2016/02/22 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript