PaymentOne将推出HTML5营运支付应用

如今HTML已经是比较热门的了，各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准，以备打赢新的一轮浏览器大战。请查看：谷歌Chrome打造Web平台新航母:拭目以待（http://tech.it168.com/a2012/0217/1313/000001313414.shtml）

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

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

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

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

<%@language='javascript'%>
<html>
<head>
<title>PlayMusic</title>
<styletype=”text/css”>
div.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>
<h1class=”a”>欢迎使用HTML5播放器</h1>
<%
varname=Request.QueryString(“name”);
if(name==”")
name=”";
name1=”save_music”+name+”.mp3″;
//Response.Write(name);
%>
<marqueebehavior=scrollscrolldelay=200scrollamount=30width=”300″><h1><%=name%></h1></marquee>
<divclass=”s”>
<canvaswidth=”600″height=”60″id=”MusicCanvas”onclick=”dealclick()”></canvas>
<audioid=”music”src=http://www.shancun.net/skin/default/image/nopic.gif style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">您的浏览器不支持HTML5中的audio标签
</audio>
</div>
</body>
</html>
<scripttype=”text/javascript”>
varc=document.getElementById(“MusicCanvas”);
varcccon=c.getContext(“2d”);
vartoggle=document.getElementById(“music”);
drawPS();
drawQuick();
functiondrawPS()//flag=1表示播放命令，flag=0表示暂停
{
con.save();
con.beginPath();
varg=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();
}
functiondrawQuick()//
{
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”;
varx=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();
}
functiondealclick()//处理敲击事件
{
varx=event.clientX;
vary=event.clientY;
varflag=getPos(x,y);
//alert(x.toString()+””+y.toString()+””+flag.toString());
if(flag==0)
return;
switch(flag)//
{
case1:drawPS();break;
case2:quickOrslow(0);break;
case3:quickOrslow(1);break;
}
}
functiongetPos(x,y)//
{
varpx=100;
varpy=240;
x-=px;
y-=py;
if(x>=275&&x<=325&&y>=15&&y<=65)
return1;
if(x>=130&&x<=200&&y>=20&&y<=60)
return2;
if(x>=350&&x<=420&&y>=20&&y<=60)
return3;
return0;
}
functionquickOrslow(flag)//
{
vartotal=toggle.duration;
vars=Math.ceil(total*0.05);
if(flag==1)//kuaijin
{
if(toggle.ended==true)
return;
varnow=toggle.currentTime;
if(total-now<=s)
return;
else
toggle.currentTime=now+s;
}
else//后退
{
varn=toggle.currentTime;
if(n<s)
return;
else
toggle.currentTime=n-s;
}
}
</script>

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

drawPS()是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。
当然这个播放器是非常简陋的，但是通过加工美化，还是可以做出优秀的播放器的，而且是没有插件的。

• 玩转HTML5移动页面（动效篇）	• 利用HTML5中的Canvas绘制一张笑脸的教程
• 使用HTML5的Notification API制作web通知的教程	• 介绍HTML5中的文件导入
• HTML5中的Canvas结合公式绘制粒子运动的教程	• 使用分层画布来优化HTML5渲染的教程
• Html加载网页的方式	• 利用HTML5 Canvas制作一个简单的打飞机游戏
• 利用HTML5绘制点线面组成的3D图形的示例	• 用HTML5制作一个简单的弹力球游戏

PaymentOne将推出HTML5营运支付应用

移动开发中HTML5能否替代本地程序？

HTML5漫谈（4）--HTML5应用平台:PhoneGAP