HTML5应用-实现简单播放器的示例代码分享

百变鹏仔 3个月前 (10-18) #H5教程

文章标签播放器

如今html已经是比较热门的了，各种关于html5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持html5标准，以备打赢新的一轮浏览器大战。

话不多说，不知道大家有没有发现，可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试：

这是用谷歌浏览器直接打开mp3文件的情况。其实，许多新的浏览器都开始支持HTML5中标签，使得一些格式的流媒体可以摆脱对插件的依赖。下面我就以标签做一个简易的音乐播放器.

控件可以通过一些内置的JavaSceipt函数和特性进行控制，以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数，paused、ended、currentTime、startTime等属性等.

立即学习“前端免费学习笔记（深入）”；

对于这个简易播放器具有播放\暂停、快进、快退等功能，结合对象绘制图形

<%@language="javascript" %><html><head><title>PlayMusic</title><style type="text/css">    p.s{position:absolute;left:100px;top:200px;width:600px;}    audio{width:600px;position:absolute;left:0px;top:100px;}    canvas{position:absolute;left:0px;top:40px;}    marquee{position:absolute;left:250px;top:180px;}    h1{color:Red;}    h1.a{color:Green;position:absolute;left:200px;top:50px;}</style></head><body><h1 class="a">欢迎使用HTML5播放器</h1><%    var name = Request.QueryString("name");    if (name == "")        name = "";    name1 = "save_music\\" + name + ".mp3";    //Response.Write(name);     %> <marquee behavior=scroll scrolldelay=200 scrollamount=30 width="300" ><h1><%=name %></h1></marquee> <p class="s"> <canvas width="600" height="60" id="MusicCanvas"  onclick="dealclick()"></canvas><audio id="music" src=<%=name1 %> controls>您的浏览器不支持HTML5中的audio标签</audio></p></body></html><script type="text/javascript">    var c = document.getElementById("MusicCanvas");    var con = c.getContext("2d");    var toggle = document.getElementById("music");    drawPS();    drawQuick();       function drawPS() //flag=1表示播放命令，flag=0表示暂停    {        con.save();        con.beginPath();        var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //创建渐变颜色        if (toggle.paused) //暂停状态        {            g.addColorStop(0.2, "#1FD856"); //            g.addColorStop(0.8, "black"); //            toggle.play();        }        else //播放状态        {            g.addColorStop(0.2, "red"); //黄            g.addColorStop(0.8, "black"); //            toggle.pause();        }        con.fillStyle = g;        con.arc(275, 30, 25, 0, Math.PI * 2, true);        con.fill();        con.closePath();        con.restore();             }    function drawQuick() //    {        con.save();        con.beginPath();        con.fillStyle = "grey";        con.fillRect(130, 10, 70, 40);        con.fillStyle = "black";        con.moveTo(130, 30);        con.lineTo(145, 13);        con.lineTo(165, 13);        con.lineTo(150, 30);        con.lineTo(165, 47);        con.lineTo(145, 47);        con.lineTo(130, 30);        con.fill();        con.moveTo(160, 30);         con.lineTo(175, 13);         con.lineTo(195, 13);         con.lineTo(180, 30);         con.lineTo(195, 47);         con.lineTo(175, 47);         con.lineTo(160, 30);        con.fill();        con.closePath();        con.beginPath();        con.fillStyle = "grey";        var x = 350;        con.fillRect(x, 10, 70, 40);        x += 70;        con.fillStyle = "black";        con.moveTo(x, 30);         con.lineTo(x - 15, 13);         con.lineTo(x - 35, 13);         con.lineTo(x - 20, 30);         con.lineTo(x - 35, 47);         con.lineTo(x - 15, 47); con.lineTo(x, 30);        x -= 30;        con.moveTo(x, 30);         con.lineTo(x - 15, 13);         con.lineTo(x - 35, 13);         con.lineTo(x - 20, 30);         con.lineTo(x - 35, 47);         con.lineTo(x - 15, 47);         con.lineTo(x, 30);        con.fill();        //con.moveTo(160, 40);         con.lineTo(175, 23);         con.lineTo(195, 23);         con.lineTo(180, 40);         con.lineTo(195, 57);         con.lineTo(175, 57);         con.lineTo(160, 40);        con.fill();                con.closePath();        con.restore();    }    function dealclick()//处理敲击事件    {        var x = event.clientX;        var y = event.clientY;        var flag = getPos(x, y);        //alert(x.toString() + "  " + y.toString()+"  "+flag.toString());        if(flag==0)        return;    switch (flag)//    {        case 1: drawPS(); break;        case 2: quickOrslow(0); break;        case 3: quickOrslow(1); break;    }    }    function getPos(x, y) //    {       var px=100;       var py=240;       x-=px;       y-=py;       if (x >= 275 && x <= 325 && y >= 15 && y<= 65)           return 1;       if (x >= 130 && x <= 200 && y >= 20 && y <= 60)           return 2;       if (x >= 350 && x <= 420 && y >= 20 && y <= 60)           return 3;       return 0;   }   function quickOrslow(flag) //   {       var total = toggle.duration;       var s = Math.ceil(total*0.05);       if (flag == 1)//kuaijin       {           if (toggle.ended == true)               return;           var now = toggle.currentTime;           if (total - now <= s)               return;           else               toggle.currentTime = now + s;       }       else  //后退       {           var n = toggle.currentTime;           if (n < s)               return;           else               toggle.currentTime = n - s;       }   }</script>

这是全部的源代码，当然其中包含了一些ASP语句，适用于传递歌曲名的，可以不用考虑。

drawPS()是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。

     当然这个播放器是非常简陋的，但是通过加工美化，还是可以做出优秀的播放器的，而且是没有插件的。

文章推荐

HTML5应用-实现简单播放器的示例代码分享

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集