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

来源：互联网发布：js事件源编辑：程序博客网时间：2024/05/17 03:03

最近一段时间在使用js和jQuery，私下就自己动手写了一个网页版的音乐播放器，主要是基于H5的<audio>标签来实现的。先上图片看下效果。这些歌曲和描述都是写死的，不是动态获取的
下面是首页的<html></html>代码，歌曲详情部分我就写了一个，也是写死的，见谅~~

<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"><img src="images/pro.png" height="20"></a></td>                <td>Dream It Possible</td>                <td>张靓颖</td>                <td>Dream It Possible</td>            </tr>            <tr>                <td><a href="#" mp3="music/2.mp3"><img src="images/pro.png" height="20"></a></td>                <td>PDD洪荒之力</td>                <td>泰国歌手</td>                <td>Hoaprox - Ngẫu Hứng</td>            </tr>            <tr>                <td><a href="#" mp3="music/3.mp3"><img src="images/pro.png" height="20"></a></td>                <td>Here We Are</td>                <td>华晨宇</td>                <td>Here We Are</td>            </tr>            <tr>                <td><a href="#" mp3="music/4.mp3"><img src="images/pro.png" height="20"></a></td>                <td>七月上</td>                <td>Jam</td>                <td>七月上</td>            </tr>            <tr>                <td><a href="#" mp3="music/5.mp3"><img src="images/pro.png" height="20"></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"><img height="50" src="images/last.jpg"></a><a id="pp" href="#" flag="0"><img height="50" src="images/pro.png"></a><a id="next" href="#"><img height="50" src="images/next.jpg"></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的代码，css样式表的代码都贴出来，方便大家查看。
这个是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库，这里以截图的形式展示给大家。

其中function.js和text.js是我自己写的js文件，function.js在上面已经给大家贴了出来，text.js在这里就不贴出来了，主要是用来控制描述部分的点击事件，有兴趣的话可以到我的github进行查看。
所有的流程和步骤在function.js文件中都有注释，如果有什么不明白或者疑问可以访问
本项目的Github地址，或者下方留言，因为楼主对jQuery这块并不是很熟练，所以上述代码注释有不当的地方或者错误的地方还请大家谅解，并给我提出来，我会及时进行修改。谢谢！

阅读全文

0 0