chrome音乐html,HTML5打造简易播放器：Chrome运行.mp3

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

2018年11月06日

| 萬仟网IT编程

 | 我要评论

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

话不

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

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

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

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

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

playmusic

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

欢迎使用www.2cto.com html5播放器

var name = request.querystring("name");

if (name == "")

name = "";

name1 = "save_music\\" + name + ".mp3";

//response.write(name);

%>

controls>

您的浏览器不支持html5中的audio标签

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;

}

}

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

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

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

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

相关文章:

H5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访...

突破canvas语法限制,有很多的朋友可能还不相信，本文将详细介绍如何让canvas支持链式语法，需要了解的朋有可以参考下... 12-12-24

本篇文章主要介绍了canvas 实现 github404动态效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

......

概述：

在前文中分别讲到了在Arcgis for js、Openlayers2中去加载天地图，同时也讲到了天地图的离线加载方式。在本文，讲...

这篇文章主要介绍了使用Canvas操作像素的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-06-14

Html5移动端网页端适配(js+rem)这篇文章主要介绍了Html5移动端网页端适配(js+rem)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具...

这篇文章主要介绍了h5使用canvas画布实现手势解锁的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 19-01-...

form表单 使用时机当前后端有数据交互的时候用form表单 form表单提交数据的几个注意事项: 1.所有获取用户输入的标签都必须放在form表单...

本文简单介绍利用Html5的FormData实现文件的异步上传，还可以实现上传进度条和文件大小验证等，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考...

最近看了《CSS3揭秘》一书，里面真的是干货满满呀，现将常用到的一些技巧归纳总结，便于日后用到查找。不得不感叹学无止境哦~ 1、边框与背景 半透明边...

网友评论

验证码：