利用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