神奇的H5本地文件读取（FileReader，Blob，AudioContext）

H5提供了很多内置函数对象，供我们对本地文件进行读取，个人玩的比较多的是对本地图片，视频，音乐进行读取，在页面上显示或者播放。研究的不是很深，但我想做个笔记。

一、FileReader

FileReader是一个构造函数，翻译为文件读取器，通过const reader = new FileReader可以创造一个文件读取器对象，可看作是一个上下文对象，对象身上包含了readAsDataURL、readAsArrayBuffer

等方法对文件以不同形式进行读取，readAsDataURL读取的形式是data:url，可以直接作为src属性的值。以readAsArrayBuffer形式读取，读取后是ArrayBuffer对象，那么需要用Blob转换一下，然后利用

window.URL.createObjectURL(blob)创建一个blob地址，供src属性使用。reader实例身上的onload方法可见听读取器的读取完成时的状态，也可通过readyState状态码判断。

 1       <div id="upload">
 2           <input type="file" id="file" />
 3       </div>
 4       <script>
 5           file.onchange = async function(e){
 6               const file = e.target.files[0]
 7               const reader = new FileReader();
 8               // 读取文件内容，结果用data:url的字符串形式表示
 9               reader.readAsDataURL(file);
10               reader.onload = function(e) {
11                  console.log(e.target.result);  // 上传的图片的编码
12                  const img = new Image()
13                  img.src = e.target.result
14                      img.onload = function(){
15                      upload.appendChild(this)
16                  }
17              }
18          }
19       </script>

以上代码可以上传一张图片至页面。

二、Blob

　　通过reader.readAsDataURL获取的文件元数据会比较长，插入到src属性里面太冗余，性能不好，另外一种方式是通过Blob对象，new Blob([...])第一个参数接收一个数组，把文件对象放到数组里面，

第二个参数接收文件类型，把上传的文件直接通过Blob转换成blob对象，window.URL.createObjectURL(blob)创建一个blob地址，供src属性使用，这种url比较简洁。

 1     <div id="upload">
 2         <input type="file" id="file" />
 3     </div>
 4     <script>
 5         file.onchange = async function(e){
 6             const file = e.target.files[0]
 7             const blob = new Blob([file])
 8             const img = new Image()
 9             img.src = window.URL.createObjectURL(blob)
10             img.onload = function(){
11                 upload.appendChild(this)
12             }
13         }
14     </script>

同样，上面代码也能打开一张本地图片显示在网页中。

三、AudioContext

　　AudioContext是一个构造函数，new AudioContext能够创建一个音频上下文对象，对象的decodeAudioData方法可对音频文件进行解码，createBufferSource方法可以创建数据源对象，

这里我是用了Ajax请求本地文件，实现了网页背景音乐效果，打开网页自动播放，并非使用audio标签的autoplay属性。此实例我是在php服务环境下运行的，本地好像跑不起来，哪怕安装了服务端环境插件也没能行。

 1         const audioCxt = new AudioContext()//创建音频上下文对象 内涵众多属性和方法
 2         const xhr = new XMLHttpRequest()
 3         xhr.responseType = 'arraybuffer' //指定原始数据类型
 4         
 5         xhr.onload = function(){
 6             //对音频进行解码,获得音频buffer数据，注意，第一个参数只能是arrybuffer对象，这里我设置了响应类型是arraybuffer，所以请求过来的本地mp3文件变成了arraybuffer对象
 7             audioCxt.decodeAudioData(xhr.response,function(buffer){
 8                 //创建音频的数据源对象
 9                 let sourceNode = audioCxt.createBufferSource()
10                 //把解码后的数据绑定到音频的数据源上
11                 sourceNode.buffer = buffer
12                 //将数据源和音频对象连接起来，准备播放
13                 sourceNode.connect(audioCxt.destination)
14                 //播放
15                 sourceNode.start()
16             })
17         }
18         xhr.open('post','111.mp3',true)
19         xhr.setRequestHeader('Content-Type', 'audio/mpeg');
20         xhr.send()

　　哈哈，H5真是令我喜欢有令我烦，隐藏的功能太多啦，我得慢慢去发现，也可能我没有真正意义上的专门学习H5吧。H5特性还有很多，例如拖拽文件至网页会获得文件数据，对文件解码后的操作还有很多，后面我想实现一个拖拽图片之网页，首先能够在页面预览，然后能够上传到服务器。