Task.

The goal is to offload data from Web Audio API presented as a produced spectrogram, in a .csv array by dividing by 10 parts (that is by 10% of area along vertical axis - this is frequency), then load data from array into StreamGraph, see pic-1

Source codes:

https://codepen.io/lolliuym/pen/GREjwNR?editors=1010

Tries.

1 - Define online and offline audio context

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
const offlineCtx = new OfflineAudioContext(2,44100*40,44100);

source = offlineCtx.createBufferSource();

2 - Use XHR to load the audio track and decodeAudioData to decode it and insert the data into the buffer. Then place the buffer in the source. Unfortunately, the Web Audio API does not provide an option to create a new .csv file. Example here:

function getData() {
  request = new XMLHttpRequest();
  request.open('GET', 'audio.ogg', true);
  request.responseType = 'arraybuffer';
  request.onload = function() {
    let audioData = request.response;
    audioCtx.decodeAudioData(audioData, function(buffer) {
    myBuffer = buffer;
    source.buffer = myBuffer;
    source.connect(offlineCtx.destination);
    source.start();
    offlineCtx.startRendering();
  },
  function(e){"Error with decoding audio data" + e.err})}
request.send()}

I found a way to create a .csv using existing.csv (defaults to NULL), but I think there is no way compatibility can affect Web Audio API. Is there any other way?

Total.

In all my attempts, I have failed to create the contents of a .csv file through which to offload data from the Web Audio API to a graph that could play in a browser.

Questions.

1. What is the ability to create a new .csv file by dividing 10 by parts of an area?
2. What method can be used to unload?
3. How can Streamgraph schedule connect to .csv