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

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