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

更新时间:2023-04-03 02:00:52 阅读：评论：0

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

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

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

　　控件可以通过一些内置的javascript函数和特性进行控制，以及进行二次开发。例如load()、play()、pau()等控制音频播放的函数，paud、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”;

//respon.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.cre法务工作总结ateradialgradient(275, 30, 0, 275, 30, 25); //创建渐变颜色

if (toggle.paud) //暂停状态

{

g.addcolorstop(0.2, “#1fd856”); //

g.addcolorstop(0.8, “black”); //

toggle.play();

}

el //播放状态

{

g.addcolorstop(0.2, “red”); //黄

g.addcolorstop(0.8, “black”); //

toggle.pau();

}

con.fillstyle = g;

con.arc(275, 30, 25, 0, math.pi * 2, true);

con.fill();

con.clopath();

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.clopath();

con.beginpath();

co含辛茹苦是什么意思n.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.clopath();

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)//

{

ca 1: drawps(); break;

ca 2: quickorslow(0); break;

ca 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;

el

toggle.currenttime = now + s;

}

el //后退

{

var n = toggle.currenttime;

if (n < s)

return;

el

toggle.currenttime = n – s;

}

}

</script>

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

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

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