|
|
聽如今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等属性等.
对于这个简易播放器具有播放暂停、快进、快退等功能，结合对象绘制图形
<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鈥 |
|
窥视卡
雷达卡
发表于 2018-8-7 09:39:07
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡