内容简介：发表于 2018-10-24 10:29:57 by月小升原理和图片相同，只不过返回的流得头文件不同
发表于 2018-10-24 10:29:57 by月小升
缓存 音乐依靠也是浏览器得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
- H5 localStorage 缓存图片
- H5 本地缓存localStorage缓存机制
- redis缓存wordpress
- 如何缓存wordpress
- php九大缓存技术，你知道几个？
- 多屏自适应的优缺点
- find shell命令来删除过期的缓存
- html5如何在IOS下自动播放音乐
- html5 开发中遇到空白底边有个空白
- HTML5 多图上传
- FireFox chrome 模拟手机浏览器 调试手机网页
- HTML5手机浏览直接给一个号码打电话，发短信
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
算法与数据结构（第二版）
傅清祥、王晓东 / 电子工业出版社 / 2001-8-1 / 34.00
本书是《计算机学科教学计划1993》的配套教材之一。它覆盖了《计算机学科教学计划1993》中开列的关于算法与数据结构主科目的所有知识单元。其主要内容有：算法与数据结构的概念、抽象数据类型（ADT）、基于序列的ADT（如表，栈，队列和串等）。反映层次关系的ADT（如树，堆和各种平衡树等）、关于集合的ADT（如字典，优先队列和共查集等）、算法设计的策略与技巧、排序与选择算法、图的算法、问题的计算复杂性一起来看看 《算法与数据结构（第二版）》 这本书的介绍吧!
