加入收藏 | 设为首页 | RSS
您当前的位置:首页 > 网页特效

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

时间:2012-03-31 21:36:00  来源:  作者:虾谷

 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吧!");  }


来顶一下
返回首页
返回首页
推荐资讯
10步征服web2.0链轮第四步,决定链轮模式
10步征服web2.0链轮第
10步征服web2.0链轮第三步,消除“电子足迹”
10步征服web2.0链轮第
10步征服web2.0链轮第一步,理解链轮的概念
10步征服web2.0链轮第
小贺店铺
小贺店铺
相关文章
    无相关信息
栏目更新
栏目热门