2017年10月聚合文章--基于H5<audio>标签并通过js和jQuery实现网页版音乐播放器

最近一段时间在使用js和jQuery，私下就自己动手写了一个静态网页版的音乐播放器，主要是基于H5的

audio标签来实现。废话不多说，先上效果图~~~

1.png

下面是首页布局的代码，歌曲详情部分我就写了一个，也是写死的，有兴趣的朋友可以从网上爬一下数据，完善一下。

<html>

<head>

<title>Music Online</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</a></td>

<td>Dream It Possible</td>

<td>Dream It Possible</td>

</tr>

<tr>

</a></td>

<td>PDD洪荒之力</td>

<td>Hoaprox - Ngẫu Hứng</td>

</tr>

<tr>

</a></td>

</tr>

<tr>

</a></td>

</tr>

<tr>

</a></td>

<td>Rainbow</td>

<td>B0untya,Ulchero</td>

<td>Rainbow</td>

</tr>

</tbody>

</table>

</div>

</a>

</a>

</a>

</div>

</div>

<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.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这块并不是很熟练，所以上述代码注释有不当的地方或者错误的地方还请大家谅解，并给我提出来，我会及时进行修改。谢谢！

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] 基于H5<audio>标签并通过js和jQuery实现网页版音乐播放器