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" >
</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&¤ttimer==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基本缓冲动画；
