神奇的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狀態碼判斷。

      <div id="upload">
          <input type="file" id="file" />
      </div>
      <script>
          file.onchange = async function(e){
              const file = e.target.files[0]
              const reader = new FileReader();
              // 讀取文件內容，結果用data:url的字符串形式表示
              reader.readAsDataURL(file);
              reader.onload = function(e) {
                 console.log(e.target.result);  // 上傳的圖片的編碼
                 const img = new Image()
                 img.src = e.target.result
                     img.onload = function(){
                     upload.appendChild(this)
                 }
             }
         }
      </script>  

以上代碼可以上傳一張圖片至頁面。

二、Blob

　　通過reader.readAsDataURL獲取的文件元數據會比較長，插入到src屬性里面太冗余，性能不好，另外一種方式是通過Blob對象，new Blob([...])第一個參數接收一個數組，把文件對象放到數組里面，

第二個參數接收文件類型，把上傳的文件直接通過Blob轉換成blob對象，window.URL.createObjectURL(blob)創建一個blob地址，供src屬性使用，這種url比較簡潔。

    <div id="upload">
        <input type="file" id="file" />
    </div>
    <script>
        file.onchange = async function(e){
            const file = e.target.files[0]
            const blob = new Blob([file])
            const img = new Image()
            img.src = window.URL.createObjectURL(blob)
            img.onload = function(){
                upload.appendChild(this)
            }
        }
    </script>

同樣，上面代碼也能打開一張本地圖片顯示在網頁中。

三、AudioContext

　　AudioContext是一個構造函數，new AudioContext能夠創建一個音頻上下文對象，對象的decodeAudioData方法可對音頻文件進行解碼，createBufferSource方法可以創建數據源對象，

這里我是用了Ajax請求本地文件，實現了網頁背景音樂效果，打開網頁自動播放，並非使用audio標簽的autoplay屬性。此實例我是在php服務環境下運行的，本地好像跑不起來，哪怕安裝了服務端環境插件也沒能行。

        const audioCxt = new AudioContext()//創建音頻上下文對象 內涵眾多屬性和方法
        const xhr = new XMLHttpRequest()
        xhr.responseType = 'arraybuffer' //指定原始數據類型
        
        xhr.onload = function(){
            //對音頻進行解碼,獲得音頻buffer數據，注意，第一個參數只能是arrybuffer對象，這里我設置了響應類型是arraybuffer，所以請求過來的本地mp3文件變成了arraybuffer對象
            audioCxt.decodeAudioData(xhr.response,function(buffer){
                //創建音頻的數據源對象
                let sourceNode = audioCxt.createBufferSource()
                //把解碼后的數據綁定到音頻的數據源上
                sourceNode.buffer = buffer
                //將數據源和音頻對象連接起來，准備播放
                sourceNode.connect(audioCxt.destination)
                //播放
                sourceNode.start()
            })
        }
        xhr.open('post','111.mp3',true)
        xhr.setRequestHeader('Content-Type', 'audio/mpeg');
        xhr.send()

   　　哈哈，H5真是令我喜歡有令我煩，隱藏的功能太多啦，我得慢慢去發現，也可能我沒有真正意義上的專門學習H5吧。H5特性還有很多，例如拖拽文件至網頁會獲得文件數據，對文件解碼后的操作還有很多，后面我想實現一個拖拽圖片之網頁，首先能夠在頁面預覽，然后能夠上傳到服務器。