html5 localStorage缓存音乐和视频

栏目: Html5 · 发布时间: 5年前

内容简介：发表于 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

html5 localStorage缓存音乐和视频

首发地址：–

无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

算法统治世界——智能经济的隐形秩序

徐恪、李沁 / 清华大学出版社有限公司 / 2017-11-15 / CNY 69.00

今天，互联网已经彻底改变了经济系统的运行方式，经济增长的决定性要素已经从物质资料的增加转变成为信息的增长。但是，只有信息的快速增长是不够的，这些增长的信息还必须是“有序”的。只有“有序”才能使信息具有价值，能够为人所用，能够指导我们实现商业的新路径。这种包含在信息里的隐形秩序才是今天信息世界的真正价值所在。经济系统的运行确实是纷繁复杂的，但因为算法的存在，这一切变得有律可循，算法也成为新经济系统里......一起来看看《算法统治世界——智能经济的隐形秩序》这本书的介绍吧!

码农工具

html5 localStorage缓存音乐和视频

算法统治世界——智能经济的隐形秩序

HTML 压缩/解压工具

JS 压缩/解压工具

CSS 压缩/解压工具