从音频块创建单个 blob 文件 - javascript

问题描述

我有这种由 blob 音频块组成的数组。如何创建单个 blob 输出文件，如 mp3 或其他支持的格式？

(10) [Blob,Blob,Blob]
0: Blob {size: 2342195,type: "application/octet-stream"}
1: Blob {size: 2342195,type: "application/octet-stream"}
2: Blob {size: 2342195,type: "application/octet-stream"}
3: Blob {size: 2342195,type: "application/octet-stream"}
4: Blob {size: 2342195,type: "application/octet-stream"}
5: Blob {size: 2342195,type: "application/octet-stream"}
6: Blob {size: 2342195,type: "application/octet-stream"}
7: Blob {size: 2342195,type: "application/octet-stream"}
8: Blob {size: 2342195,type: "application/octet-stream"}
9: Blob {size: 2342195,type: "application/octet-stream"}
10: Blob {size: 2342195,type: "application/octet-stream"}
length: 11

目前我正在以这种方式获取填充数组的 blob 片段：（是的，它是 manifest v2 的 chrome/浏览器扩展，v3 在 chrome 87 中存在一些问题）

let isListening = false;
let stream = [];

const createChunksFromStream = (details) => {
  let chunkUrl = details.url;
  
  fetch(chunkUrl)
  .then( (res) => res.blob() )
  .then( (res) => {
    console.log(res);
    stream.push(res);
  });

}

const processChunks = (stream) => {
  console.log(stream);
  let outputBuffer = null;
  //TODO unire chunk
  stream.forEach( (c) => {
    outputBuffer = URL.createObjectURL(c);
  });
  //TODO aggiungere a popup quando invocato 
  const iframe = document.createElement('<iframe>');
  iframe.src = outputBuffer;

  console.log(outputBuffer);
} 

const initStream = (status) => {
  console.log(status);
  if(status !== true){
      chrome.webRequest.onCompleted.removeListener( createChunksFromStream );
  }else{
    chrome.webRequest.onCompleted.addListener( createChunksFromStream,{
      urls: ['https://audio-file-source-com.host.net/audio/*'],types: ['xmlhttprequest']
    },['responseHeaders']);
  }
}
//Manifest v3: chrome.action.onClicked 
chrome.browserAction.onClicked.addListener( (tab) => {  
  if(isListening !== true){
    isListening = true;
    initStream(isListening);
    alert('Ripping');
  }else{
    isListening = false;
    initStream(isListening);
    if(stream.length > 0){
      processChunks(stream);
    }
    alert('ripping stopped');
  }
});

// ES6 Promises version
//Manifest v3: chrome.action.onClicked 

const startRecord = () => {
 return new Promise((resolve,reject) => {
   isListening = true;
   resolve(true);
  }
 });
}

chrome.browserAction.onClicked.addListener( (tab) => {  
  if(isListening !== true){
    startRecord().then( (status) => {
     initStream(status);
     alert('Ripping');
    });
  }else{
//stopRecord().then( (status) => { ... alert('ripping stopped') });
  }
});

为了避免创建弹出窗口，我将开始和停止绑定到点击操作。我不确定我是否以正确的方式翻录音频块。目前我不知道是否使用 html 音频播放器来重现文件并让用户能够下载文件？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）