最近一段时间在使用js和jQuery，私下就自己动手写了一个静态网页版的音乐播放器，主要是基于H5的
audio标签来实现。废话不多说，先上效果图~~~
1.png
下面是首页布局的代码，歌曲详情部分我就写了一个，也是写死的，有兴趣的朋友可以从网上爬一下数据，完善一下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Music Online</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/text.js"></script>
</head>
<body>
<audio id="audio" src="music/1.mp3" loop="loop"></audio>
<div class="playtable">
<table width="100%" border="1px" class="pt">
<thead>
<tr>
<td>播放</td>
<td>歌名</td>
<td>作者</td>
<td>专辑</td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" mp3="music/1.mp3"></a></td>
<td>Dream It Possible</td>
<td>张靓颖</td>
<td>Dream It Possible</td>
</tr>
<tr>
<td><a href="#" mp3="music/2.mp3"></a></td>
<td>PDD洪荒之力</td>
<td>泰国歌手</td>
<td>Hoaprox - Ngẫu Hứng</td>
</tr>
<tr>
<td><a href="#" mp3="music/3.mp3"></a></td>
<td>Here We Are</td>
<td>华晨宇</td>
<td>Here We Are</td>
</tr>
<tr>
<td><a href="#" mp3="music/4.mp3"></a></td>
<td>七月上</td>
<td>Jam</td>
<td>七月上</td>
</tr>
<tr>
<td><a href="#" mp3="music/5.mp3"></a></td>
<td>Rainbow</td>
<td>B0untya,Ulchero</td>
<td>Rainbow</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="musicImg">
<a id="last" href="#" flaglast="0"></a>
<a id="pp" href="#" flag="0"></a>
<a id="next" href="#"></a>
</div>
<br>
<div id="updatetime" class="time"></div>
<div class="pro" onclick="clickPro(event,this)">
<div class="playball"></div>
</div>
<div id="totaltime" class="time" style="text-align:right"></div>
<div class="hide" flag="0">
<p>歌名：《Dream It Possible》</p>
<p>《Dream It Possible》是华为消费者业务品牌主题曲，由张靓颖演唱，歌曲中文版本为《我的梦》。</p>
</div>
<p class="pull">点我查看歌曲详情</p>
</body>
</html>
这里最重要的就是<audio id="audio" src="music/1.mp3" loop="loop"></audio>这个audio标签，其中的loop是audio的一个属性，是用来在当前歌曲播放完成之后进行自动循环播放的。其它都是通过div来进行展示的。
这个是js的：
var a=null;
var flag=null;
//主方法，所有方法逻辑执行完成之后再执行
$(function(){
//获取dom对象
a=document.getElementById("audio");
//添加播放的监听时间
a.addEventListener("timeupdate",timeupdate);
//点击播放按钮的事件
$("#pp").click(function(){
//获得播放状态
flag = $(this).attr("flag");
if(flag=='0'){
a.play();
//获得播放的图片对象
$(this).find("img").attr("src","images/play.jpg");
//把flag设置成1
$(this).attr("flag","1");
//获得当前播放了多少秒,一共多少秒
}else{
a.pause();
//获得播放的图片对象
$(this).find("img").attr("src","images/pro.png");
//把flag设置成0
$(this).attr("flag","0");
}
})
$(".playtable a").click(function(){
//获得点击播放的MP3的链接地址
var loc=$(this).attr("mp3");
//设置HTML5的音频播放地址
$("#audio").attr("src",loc);
//删除所有tr的背景
$("table tr").removeClass("here")
//获得当前行
$(this).parent().parent().addClass("here");
//获得class="musicImg"div中控制播放的图片
$(" td a img").attr("src","images/pro.png");
//进行替换，修改状态
$(this).find("img").attr("src","images/play.jpg");
$("#pp").click();
var flag= $("#pp").attr("flag");
if(flag=='0'){
$("#pp").click();
}
a.play();
})
//下一曲
$("#next").click(function(){
//跳转到下一曲，改变当前播放歌曲的背景颜色
var tr =$("tbody").find("tr[class='here']");
tr.next("tr").find("a").click();
})
//跳转到上一曲，改变当前播放歌曲的背景颜色
$("#last").click(function(){
var tr =$("tbody").find("tr[class='here']");
//prev是jQuery中的一个方法
tr.prev("tr").find("a").click();
})
})
function timeupdate(){
//获得当前播放时间
var ct = a.currentTime;
//把秒变成分钟
var cmi=Math.floor(ct/60);
var cc=Math.floor(ct%60);
//把秒变成分钟
var du = a.duration;
var dmi=Math.floor(du/60);
var dc=Math.floor(du%60);
$("#updatetime").html(cmi+":"+cc);
$("#totaltime").html(dmi+":"+dc);
//获得播放的长度
var left=Math.floor(ct/du*500)+"px";
$(".playball").css("left",left);
}
//拖拽定位并播放
function clickPro(e,obj){
var l=e.clientX-obj.offsetLeft;
$(".playball").css("left",l);
a.currentTime=(l/500)*a.duration;
}
//循环播放
function loop(){
var b=document.getElementById("audio");
b.loop="loop";
}
下面是css样式表的代码：
@CHARSET "UTF-8";
.pro{
height:8px;
width:500px;
background-color:gray;
cursor:pointer;
}
.playball{
height:8px;
width:8px;
background-color:orange;
position:relative;
}
.time{
width:500px;
height:20px;
border:1px solid black;
}
.musicImg{
width:500px;
text-align:center
}
.hide{
width:500px;
height:150px;
text-align:center;
display:none;
border:solid 2px black;
}
.pull{
width:500px;
background-color:#0af5f5;
text-align:center;
border:solid 2px black;
}
.playtable{
width:500px;
height:160px;
font-size:15px;
color: white;
}
.pt{
border-collapse: collapse;
background-color:#848485;
}
.pt tr{
text-align:center;
}
.pt td{
height:25px;
border-bottom: 1px solid white;
}
//HOVER 选择鼠标指针浮动在其上的元素，并设置其样式
.pt tr:HOVER{
background-color:orange;
}
.here{
background-color:orange;
}
下面是我引用的jQuery库，这里以截图的形式展示给大家。
js.png
其中function.js和text.js是我自己写的js文件，function.js在上面已经给大家贴了出来，text.js在这里就不贴出来了，主要是用来控制描述部分的点击事件，有兴趣的话可以到我的github进行查看。所有的流程和步骤在function.js文件中都有注释，如果有什么不明白或者疑问可以访问本项目的Github地址，或者下方留言，因为楼主对jQuery这块并不是很熟练，所以上述代码注释有不当的地方或者错误的地方还请大家谅解，并给我提出来，我会及时进行修改。谢谢！
