如今html已经是比较热门的了，各种关于html5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持html5标准，以备打赢新的一轮浏览器大战。
话不多说，不知道大家有没有发现，可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试：
这是用谷歌浏览器直接打开mp3文件的情况。 其实，许多新的浏览器都开始支持html5中b97864c2e0ef2353a16c4d64c7734e92 39000f942b2545a5315c57fa3276f220标签，使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以b97864c2e0ef2353a16c4d64c7734e92标签做一个简易的音乐播放器.
b97864c2e0ef2353a16c4d64c7734e92控件可以通过一些内置的javasceipt函数和特性进行控制，以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数，paused、ended、currenttime、starttime等属性等.
对于这个简易播放器具有播放\暂停、快进、快退等功能，结合5ba626b379994d53f7acf72a64f9b697对象绘制图形
<%@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应用-实现简单播放器的示例代码分享的详细内容。