内容简介：发表于 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手机浏览直接给一个号码打电话，发短信
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
人工智能+：AI与IA如何重塑未来
[美]韩德尔·琼斯（Handel Jones） [中]张臣雄 / 机械工业出版社 / 2018-10 / 55.00
当深度学习模型引发了全世界对人工智能的再次关注时，人工智能迎来第三次高速增长，人工智能（AI）、增强现实（AR）和虚拟现实（VR）正把人类带向新的“智能增强时代”（IA），我们将在不知不觉中接纳机器智能。 针对人类社会长期存在的众多复杂的动态的难题，人机融合智能将会提供全新的解决方案，谷歌、Facebook、微软、亚马逊、腾讯、阿里巴巴、百度等平台巨头纷纷斥千亿巨资布局人工智能的尖端技术；智......一起来看看 《人工智能+：AI与IA如何重塑未来》 这本书的介绍吧!
