当前第2页 返回上一页
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html>
<body>
<input type="file" id="file" onchange="onInputFileChange()">
<audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("audio_id").src = url;
}
</script>
</body>
</html>
|
该代码在Chrome 30和Firefox 24上测试通过，在IE上应该存在一定的兼容性问题（据我所知IE8及以前的版本肯定是不能工作的），因为IE对HTML5的支持不好，不知道IE10有没有实现相关的API。
相关推荐：
HTML中的<meta>标签的使用详解
以上就是HTML5 Video/Audio播放本地文件的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
HTML5加载时的等待动画效果制作
介绍HTML5+canvas调用手机拍照功能实现图片上传（上篇）
如何使用插件数字滚动插件numberanimate.js？
HTML5实现一个简单的在线画板
HTML5怎样做出图片转圈的动画效果
关于HTML5你不得不知的事
HTML5的头部head的详解
h5页面如何调用摄像头代码分享
一个完整的html对象是什么样的，如何生成？
详细介绍精选HTML5/css3动画应用源码分享
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML5 Video/Audio播放本地文件
