Use concat to add additional silent time to waveform

[EZWrighter]

I have a binary dat file I would like to add silence to on the front and back in the browser. Is there an easy way to use concat and create x seconds of "silence" in front of the waveform and after it? My goal is to use the data in peaks.js to show the waveform under a longer video and want the user to see the audio waveform where it's blank and allow the peaks library to show progress across the entire waveform. I figured adding the blank/silence to fill the gap where there wasn't actual audio would be the easiest solution to this problem.

Thanks for any advice.

[chrisn]

You could create a WaveformData object for the silence and concat this with your other waveform:

const sample_rate = 44100;
const samples_per_pixel = 256;
const length = Math.floor(seconds * sample_rate / samples_per_pixel);

const data = {
  version: 2,
  channels: 1,
  sample_rate: sample_rate,
  samples_per_pixel: samples_per_pixel,
  bits: 8,
  length: length,
  data: new Array(length * 2).fill(0)
};

const silence = WaveformData.create(data);

const result = waveform.concat(silence);

[EZWrighter]

You could create a WaveformData object for the silence and concat this with your other waveform:

const sample_rate = 44100;
const samples_per_pixel = 256;
const length = Math.floor(seconds * sample_rate / samples_per_pixel);

const data = {
  version: 2,
  channels: 1,
  sample_rate: sample_rate,
  samples_per_pixel: samples_per_pixel,
  bits: 8,
  length: length,
  data: new Array(length * 2).fill(0)
};

const silence = WaveformData.create(data);

const result = waveform.concat(silence);

This worked absolutely perfect. I can add silence and force the waveform to match the duration of the player now.

[EZWrighter]

@chrisn Just realized the concat worked perfectly when adding silence to the end, but if I try to add silence to the beginning I can funky behavior in peaks.js visualization of the waveform. It seems to only show the first 3.5 seconds of visualization of the waveform data no matter how much "silence" I add to the start of the data.

To state another way mywaveform.concat(silence) produces a great bufferarray that I can use in peaks.js. But silence.contact(mywaveform) gives me a buffer array that only visualizes out at 3.5 seconds for any duration silence or waveform.

const sample_rate = 44100;
const samples_per_pixel = 256;
const length = Math.floor(seconds * sample_rate / samples_per_pixel);

const data = {
  version: 2,
  channels: 1,
  sample_rate: sample_rate,
  samples_per_pixel: samples_per_pixel,
  bits: 8,
  length: length,
  data: new Array(length * 2).fill(0)
};

const silence = WaveformData.create(data);

const result = silence.concat(waveform);

This result doesn't work in peaks.js

Any pointers?

[EZWrighter]

Actually using the new slice function gave me a better clue to the issue. It seems the data buffer size and length are not aligned after concat. If I use slice after concat (start:0, end: concatedwaveform.length), I get an array index out of bounds in the output loop 4 bytes before the end of where the buffer should be. Just slicing off these last 4 bytes in the concatenated array, fixes the issue with peaks rendering and the slice error.

result.slice({startIndex:0,endIndex: result.length - 4}).toArrayBuffer();

Fixes the issue.

Would be nice to resolve what is going wrong with concat, but I have a workaround for now.