JS + HTML5：通過HTML表單上傳音頻blob

我想知道是否可以使用javascript/jQuery創建音頻blob的HTML文件輸入。我是在線錄音，想要在用戶按下表單提交後將錄製文件與其他HTML表單輸入一起發佈。JS + HTML5：通過HTML表單上傳音頻blob

編輯：詮，我已經存儲在會話高速緩存中的音頻斑點。我也有一個HTML表單，其中的文本和文件輸入已經保存了值。我想將blob綁定或合併到表單中，以便在提交HTML表單時將其發佈。

我可以創建從現有的HTML表單FORMDATA並追加BLOB作爲鍵/值，但這似乎「髒」。我現在正在做這件事，但如果有人知道如何將緩存的Blob與現有的HTML表單合併/綁定，那將會很好。

任何幫助將是偉大的，謝謝！

來源

2014-02-11 user1909186

什麼是音頻BLOB？音頻文件的 –

二進制大對象 - [鏈接]（https://developer.mozilla.org/en-US/docs/Web/API/Blob） – user1909186

你可以給它一個字節數組 –

所有你需要做的就是轉換你團塊成ArrayBuffer和張貼，你可以看到這裏的BLOB轉換：

How to go from Blob to ArrayBuffer

注意：您也可以張貼它作爲一個blob，但是然後你的服務器需要知道如何處理它。

至於發送BLOB或ArrayBuffer，看到這一點：

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

乾杯，希望它幫助。

來源

2014-02-11 23:20:08 joseeight

嗨@joseeight謝謝你的建議！我其實可以處理文件，但我有一個更簡單的問題。除了音頻blob之外，我還有一種與blob完全分離的文本和文件形式。我想將緩存中的音頻blob添加到現有的文本和文件輸入中。我試過使用js/jquery，但我已經知道不能設置文件輸入值。所以，我想知道除了重寫表單以提交ajax formdata請求之外，我是否還有其他選項。順便說一下，該網站建立在Django上。有任何想法嗎？ – user1909186

是的，你可以使用表格數據來重建形式和附加文件，看到：https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects – joseeight

是啊，這就是我所做的，但我想避免這種情況。好吧。謝謝！ – user1909186

這裏是上傳一個blob一個方法（另外，這裏採用給ajaxForm和iframe設置爲true原因，我不會進入，但也許你的情況有關）。

 if (audioRecBlob) { 
      var reader = new FileReader(); 
      reader.onload = function(event){ 
       $('#audioData').remove(); 
       var audioData = $('<input type="hidden" id="audioData" name="audioData">'); 
       audioData.val(event.target.result); 
       $('#yourForm').append(audioData); 

       realSubmit(); 
      }; 
      reader.readAsDataURL(audioRecBlob); 
     } else { 
      realSubmit(); 
     }

來源

2015-08-20 04:43:48 Clay

JS + HTML5：通過HTML表單上傳音頻blob

回答

相關問題