title: JS实现音乐播放器
date: 2017-05-08 22:54:22
categories: blog
tags: blog

回首向来萧瑟处，也无风雨也无穷！

JS+Audio实现简单音乐播放器（-）

H5新增<audio>标签
加之最近一直苦修JS函数及Dom操作，便萌发做一款简单音乐播放器V00版（未来会逐渐完善，比如加入更多资源、新增爬虫爬去音乐库），废话不说直接上程序；

1、Html程序

<div id="Music" class="Music">
    <p id="head" class="head">
        Yesterday once more...
    </p>
    <div id="body" class="body">
        <div class="l" >
            ![](imgs/ZhuHai.jpg)
        </div>
        <p>yestoday once more...</p>
        <ul id="Timer" class="Timer">
            <li>0:00</li>
            <li>
               <div class="chose" id="chose"></div>
            </li>
            <li></li>
        </ul>
    </div>
    <div id="floor" class="floor">
        <audio src="music/McBlog.mp3" ></audio>  //此处放置音乐资源
        <p>Top</p>
        <p>Open</p>
        <p>Next</p>
    </div>
</div>

简单实现如下图：

Music

2、CSS样式如下：

  *{
        padding: 0;
        margin: 0;
    }
  .Music{
      margin: 20px;
      width: 300px;
      height: 450px;
      background-color:white;
      box-shadow: 0 0 5px gray;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: space-between;
  }
    .head{
       display: block;
       text-align: center;
       height: 30px;
       line-height: 30px;
       width: 200px;
       padding: 20px 50px;
       flex-grow: 0;
    }
    .body{
       padding: 20px 60px;
       flex-grow: 1;
         }
    .l{
        width: 180px;
        height: 180px;
        border-radius: 100px;
        overflow: hidden;
    }
    .l img{
        height: 100%;
    }
    ul{
        list-style: none;
        display: flex;
        flex-direction: row;
        height: 20px;
        line-height: 20px;
    }
    ul li:nth-child(1),ul li:nth-child(3){
        width: 40px;
        text-align:center;
        flex-grow: 0;
    }
    ul li:nth-child(2){
        width: 6px;
        padding: 5px;
        border-radius: 3px;
        flex-grow: 1;
    }
    .chose{
        height: 8px;
        border-radius: 3px;
        background-color: green;
        margin: 1px 0;
        width: 0px;
    }
    .body p{
        width: 180px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
    .floor{
        height: 60px;
        padding: 20px;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-grow: 0;
        align-items: center;
    }
    .floor p{
        width:80px ;
        transition: color 1000ms,background-color 1000ms;
    }
    .floor p:hover{
        background-color: green;
        color: white;
    }

3、JS程序如下：核心为audio部分属性；

 window.onload=function () {
        var pop=document.getElementById('floor').getElementsByTagName('p');
        var video=document.getElementsByTagName('audio');
        var Timer=document.getElementById('Timer').getElementsByTagName('li');
        var chose=document.getElementById('chose');
        var l=document.getElementById('l');
        pop[1].addEventListener('click',Music,false);
        video[0].addEventListener('canplay',Timecontrol,false)  //监听音乐就绪后动作改变！
        function Music() {        //此函数判断音乐是否播放！
            if(video[0].paused){
                video[0].play();
                pop[1].innerText="Close";
            }
             else{
                video[0].pause();
                pop[1].innerText="Open";
            }
        }
        function Timecontrol(){     //实现音乐进度条及音乐播放时间； 
            var j=0;
            var long=video[0].duration;
            var longs=parseInt(long/60)+':'+parseInt(long%60);
            var settimer=null;
            clearInterval(settimer);
            var settimer=setInterval(loading,1000);
            function loading(){
               var currenttimer=video[0].currentTime;
               if(currenttimer>long){
                   clearInterval(settimer);
               }
               else {
               var j=(currenttimer/long).toFixed(2)*90;
               if(video[0].paused&&currenttimer==0){
                   Timer[2].innerText="";
               }
               else{
                   Timer[2].innerText=longs;
                   var rot=j*8;
                   console.log(rot);
                   l.style.webkitTransform= "rotate("+rot +"deg)";
               }
                var start=parseInt(currenttimer/60);
                var end=parseInt(currenttimer%60);
                if(end<10){
                    end='0'+end;
                }
                var start=start+':'+end;
               Timer[0].innerText=start;
               chose.style.width=j+'px';
           }
        }
        }
    }

4、下一部分实现重点：

A、歌曲切换功能；
B、完善背景图片随音乐节奏旋转功能；
C、尝试增加各音阶的播放动画；
D、初步的Python爬虫爬取学习笔记及实例；
---以上内容，预计在5/30日更新，下一篇为JS基本缓冲动画；

加油，吾辈当共勉；!!!