欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5打造简易播放器:Chrome运行.mp3

程序员文章站 2023-11-17 23:52:34
如今html已经是比较热门的了,各种关于html5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流也纷纷开始支持html5标准,以备打赢新的一轮浏览器大战。     话不...
如今html已经是比较热门的了,各种关于html5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流也纷纷开始支持html5标准,以备打赢新的一轮浏览器大战。
 
 
话不多说,不知道大家有没有发现,可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试:
 
 HTML5打造简易播放器:Chrome运行.mp3
 
 
  这是用谷歌浏览器直接打开mp3文件的情况。 其实,许多新的浏览器都开始支持html5标签,使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以标签做一个简易的音乐播放器.
 
 HTML5打造简易播放器:Chrome运行.mp3
 
  控件可以通过一些内置的javascript函数和特性进行控制,以及进行二次开发。例如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">欢迎使用www.2cto.com 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 ccon = 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()是控制快退的函数。 
 
当然这个播放器是非常简陋的,但是通过加工美化,还是可以做出优秀的播放器的,而且是没有插件的。