收起左侧

PaymentOne将推出HTML5营运支付应用

0
回复
536
查看
[复制链接]

尚未签到

7

主题

0

帖子

40

积分

游客

积分
40
发表于 2018-8-7 09:39:07 | 显示全部楼层 |阅读模式
聽如今HTML已经是比较热门的了,各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准,以备打赢新的一轮浏览器大战。请查看:谷歌Chrome打造Web平台新航母:拭目以待(http://tech.it168.com/a2012/0217/1313/000001313414.shtml聽)
话不多说,不知道大家有没有发现,可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试:
dlbEyfwh9FYb9VBV.jpg
这是用谷歌浏览器直接打开mp3文件的情况。 其实,许多新的浏览器都开始支持HTML5中聽标签,使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以标签做一个简易的音乐播放器.
c5t8hz8mb6Ihp3n6.jpg
控件可以通过一些内置的JavaScript函数和特性进行控制,以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数,paused、ended、currentTime、startTime等属性等.
对于这个简易播放器具有播放暂停、快进、快退等功能,结合对象绘制图形
<div style="white-space: normal; text-transform: none; word-spacing: 0px; color: rgb(51,51,51); padding-bottom: 0px; padding-top: 0px; font: 14px/28px Verdana, 'Microsoft YaHei', SimSun; padding-left: 0px; margin: 0px; orphans: 2; widows: 2; letter-spacing: normal; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" id="div_code">聽
<ol style="list-style-type: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="dp-xml"><li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">PlayMusic聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">div.s{position:absolute;left:100px;top:200px;width:600px;}聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">audio{width:600px;position:absolute;left:0px;top:100px;}聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">canvas{position:absolute;left:0px;top:40px;}聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">marquee{position:absolute;left:250px;top:180px;}聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">h1{color:Red;}聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">h1.a{color:Green;position:absolute;left:200px;top:50px;}聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">欢迎使用HTML5播放器聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">您的浏览器不支持HTML5中的audio标签聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt">聽<li style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">var聽c聽=聽document.getElementById(鈥淢usicCanvas鈥
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫描微信二维码

查看官方公众号

了解更多详情

2241998733

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:成都市锦江区通汇街342号
电邮:wxcydz#qq.com(#换成@)
微信:2241998733

无限创意电子仅提供平台服务,如有贷款产品及展示信息均为互联网采集。贷款属于借贷行为,本社区不提供任何代办服务。借款有风险,申请需谨慎,风险自理,责任自担。 © 2018-现在 VIP团队( 蜀ICP备17006511号-1 )