建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > 网页特效 >

HTML5网页播放器,实现播放本地文件

时间:2012-01-03 18:11来源: 作者: 点击:
HTML5网页播放器,主要用到了audio标签,读取本地文件用的是FileReader API(貌似仅支持Chrome)。 还有web audio API应该也能实现播放本地音乐文件,就是本人不才,没有成功! 实例:HTML5网页播放器DEMO  (阿奇arqi.cc关注web,关注前端开发) 看代码,html代码就

HTML5网页播放器,主要用到了audio标签,读取本地文件用的是FileReader API(貌似仅支持Chrome)。

还有web audio API应该也能实现播放本地音乐文件,就是本人不才,没有成功!

实例:HTML5网页播放器DEMO  (阿奇arqi.cc关注web,关注前端开发)

看代码,html代码就只需要audio标签、文件上传按钮:

<audio autoplay="autoplay" controls="controls" src="badday.mp3" loop="loop">      <source src="badday.mp3" type="audio/ogg">      <source src="badday.mp3" type="audio/mpeg">      Your browser does not support the audio tag.  </audio>  <input id="fileurl" type="file" onchange="play()"/>

function play(){try{    var file=document.getElementById('fileurl').files[0];    var reader = new FileReader();    reader.onload = (function(file) {        return function(e){            $("audio").attr('src',e.target.result);            $("source").attr('src',e.target.result);        }    })(file);    reader.readAsDataURL(file); } }catch(e){   alert("同学,该换浏览器啦!!还在忍受龟速浏览器么,用谷歌Chrome吧!");  }

(责任编辑:admin)
织梦二维码生成器
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片