create single blob file from audio chunks - javascript

Question

I have this kind of array that is composed from blob audio chunks. How I can create a single blob output file like mp3 or other supported formats??

(10) [Blob, Blob, Blob, Blob, Blob, Blob, Blob, 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

At the moment I'm getting the blob fragments that fill the array in this way: (yes, it's a chrome/browser extension for manifest v2, v3 have some problems in 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') });
  }
});

To avoid to create a popup, I've binded the start and stop to the click action. I'm not sure if I'm ripping the audio chunk in the correct way. At the moment I don't know if to use an html audio player to reproduce the file and give to the user the ability to download file?

Do the ideas in this [link]https://stackoverflow.com/questions/44687026/is-it-possible-to-merge-multiple-webm-blobs-clips-into-one-sequential-video-clie help? — A Haworth, Dec 31 '20 at 22:15
I've readed the question you have linked, it's very interesting but vary different needings. In my case the stream chunk are taken after that an url is queried. See the updated question — newbiedev, Jan 01 '21 at 00:08

create single blob file from audio chunks - javascript

0 Answers0