html5 localStorage缓存音乐和视频
利用ajax XHR对象可以创建获取音频流，将一个音频文件转换成DATAURL的模式存储到本地
注意地址要是本地服务器地址
http://localhost/javaer/h5/hfiles.html
或者线上地址
http://java-er.com/hfiles.html
否则XHR会因为跨域问题，无法访问
缓存音乐依靠浏览器得Blob对象, 当然用这个机制也可以缓存图片文件，视频文件
<!DOCTYPE HTML>
<html>
<body>
<figure>
<audio id="music" controls="controls"><source src="" type="audio/mpeg">Your browser does not support the audio tag.</audio>
mp3
</figure>
<script type="text/javascript">
// 获取文件
var musicStorage = localStorage.getItem("music"),
music = document.getElementById("music");
if (musicStorage) {
//如果已经存在则直接重用已保存的数据
console.log("From Cache");
music.setAttribute("src", musicStorage);
}else{
// 创建XHR, BlobBuilder 和FileReader 对象
var xhr = new XMLHttpRequest();
var fileReader = new FileReader();
xhr.open("GET", "usa.mp3", true);
xhr.responseType = 'blob';
//https://developer.mozilla.org/zh-CN/docs/Web/API/Blob Blob可以用于存贮对象
//https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
var blob = this.response;
fileReader.onload = function (evt) {
// 用Data URI的格式读取文件内容
var result = evt.target.result;
// 将图片的src指向Data URI
music.setAttribute("src", result);
//保存到本地存储中
try {
localStorage.setItem("music", result);
}
catch (e) {
console.log("Storage failed: " + e);
}
};
// 以Data URI的形式加载blob
fileReader.readAsDataURL(blob);
}
}, false);
// 发送异步请求
xhr.send();
}
</script>
</body>
</html>下图音乐流出来得格式
data:audio/mpeg;base64,SUQzAwAA
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址：月小升博客 – https://java-er.com/blog/html5-localstorage-music/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢
您的评论是我写作的动力
About Me
静水流深，水滴石穿
近期文章
最新评论
- 天上碑开区一条龙服务端40fp.comQQ1292124634 发表在 屏蔽youku,搜狐,6间房,各大视频网站视频广告
- 传世sf一条龙803sf.comQQ2488130950 发表在 屏蔽youku,搜狐,6间房,各大视频网站视频广告
- Lester Waldon 发表在 wordpress 不用ftp更新系统和插件
- 墨香私服一条龙服务端46em.comQQ1124999543 发表在 免费的手机号查询API接口
- 微信 发表在 mysql not in 和 null的冲突
- 骑士开区一条龙服务端07cg.comQQ1325876192 发表在 免费的手机号查询API接口
- 老董博客 发表在 勾搭友情链接
- 英文网站优化软件 发表在 buy AWS Host EBS or S3
- 传奇3私服一条龙制作40ie.comQQ1292124634 发表在 免费的手机号查询API接口
- 决战sf一条龙48pn.comQQ2488130950 发表在 ecshop调用user_info没有登陆状态