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/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢
您的评论是我写作的动力.