Question: How do you use getDecodedData?

[doctor30309]

I recently converted tot he beta version. I was using exportPCM to get the peak data. I converted to getDecodedData as instructed. But I don't understand how to use it now..

Here is the js code: wavesurfer.getDecodedData().then( send json data to service api to save on disc);

I am getting an error "wavesurfer.getDecodedData(...).then is not a function". This worked with exportPCM.

Could use some guidance on what I need to change with the Beta version to get this to work...

Thanks in advance!

[katspaugh]

It’s a synchronous function, just assign it to a variable like so:

const data = wavesurfer.getDecodedData()

Keep in mind it’s an AudioBuffer that is returned. So to get the peaks:

const peaks = data.getChannelData(0)

[doctor30309]

Thanks! I did find my way into the documentation on AudioBuffer and resting code now.

[doctor30309]

@katspaugh - So I have been messing around to get this to work for a couple of days.

Here is the code snippet.. However, when the post occurs, the value of the parameter MyJson is null. So something is happening with the json string being passed. I can pass the word "test" just fine...

You'll notice I write the data to the log. This looks like a valid JSON object.

This code worked fine when exportPCM function was in the library. What am I missing??

var data = wavesurfer.getDecodedData().getChannelData(0);
console.log(JSON.stringify(pcmArray));

$.ajax({
    type: "POST",
    dataType: "json",
    url: 'Admin/SavePeakFile/',
    data: { myJson: JSON.stringify(data)},
    done: function (result) {
        console.log("Peak File saved successfully.");
    },
    fail: function (result) {
        console.log("Error saving Peak File: " + result.value);
    }
});

[doctor30309]

I'll give that a try.

Before I head down this road to figure out how to re-create your export{CM function, is there any plans to bring back the exportPCM function to the library?

[katspaugh]

Feel free to create a PR for it.

I can imagine it should be something like:

exportPeaks: (): Array<Float32Array | number[]> => {
  const buffer = wavesurfer.getDecodedData()
  const peaks = [ buffer.getChannelData(0) ]
  if (buffer.numberOfChannels > 1) {
    peaks.push(buffer.getChannelData(1))
  }
  return peaks
}

As you can see it would still be quite different from the old one:

• returns an array, not a promise
• in fact, it would return an array of arrays of floats (the first one or two channels)

[robots4life]

@katspaugh I also recently started using version 7 and have some questions on how to properly use it. The new site looks nice, the examples are cool to explore, the docs are also there, however I am still missing some pieces. Thank you to you and all the contributes that put so much work into this. 👍

		wavesurfer = WaveSurfer.create({
			container: container,
			waveColor: 'green',
			progressColor: 'yellow',
			cursorWidth: 2,
			cursorColor: 'red',
			responsive: true
			// url: audio
		});

		wavesurfer.load(audio);

Do I need to use the "url" key to pass the audio to WaveSurfer or can I use the load method ?

2. on the peaks..

		wavesurfer.on('ready', () => {
			console.log('ready');

			const buffer = wavesurfer.getDecodedData();
			// console.log(buffer);

			let channel0Peaks = buffer.getChannelData(0);
			console.log('channel0Peaks : ', channel0Peaks);

			let channel1Peaks = buffer.getChannelData(1);
			console.log('channel1Peaks : ', channel1Peaks);

			console.log('buffer length : ', buffer.length);
			console.log('buffer duration : ', buffer.duration);
			console.log('buffer sampleRate : ', buffer.sampleRate);
			console.log('buffer numberOfChannels : ', buffer.numberOfChannels);
		});

What is the correct event to use in order to get the channel data ? ready, load, decode or interaction ?

3. How can I pass the generated peaks to WaveSurfer ?

Ok from here https://wavesurfer-js.org/docs/classes/wavesurfer.WaveSurfer#load I can see it accepts a Float32Array, does that mean I can just pass it like I get it from getChannelData ?

But how do I pass the data to the load method when I have more than 1 channel ? Do I need to combine the data from both channels I get back from each channel ? How do I combine it into something that the load method will accept ? Like this ?

const peaks = [ [channel_1_DataFloat32Array], [channel_2_DataFloat32Array] ];

A single Float32Array has 1127025 items, I also wonder if there is some optimization that can be used to store the data in a database ? I think this might cause some issues when sending the the data to the database. Is there something that can be done about it ? Like the exportPCM method had 4 parameters.

wavesurfer.exportPCM(1024, 10000, true, 0)

I think the 1024 stood for the array items to be stored, no ? Is there something similar I can do with the Float32Array to be able to better handle the storing and fetching of this PCM data on page load ?

Long story short, could you please be so kind as to provide an example of how getChannelData can be used on each channel of the buffer and then passed back to the load method ?

Thank you very much for any help with this. 😄 👍

[katspaugh]

Appreciate the feedback!

1. Load, URL and peaks

Regarding the url and peaks properties, both can be passed as either a create option or as arguments to load.

As create options:

const wavesurfer = WaveSurfer.create({
  container: '#container',
  url: 'https://...',
  peaks: [[...], [...]]
})

As load arguments:

const wavesurfer = WaveSurfer.create({
  container: '#container',
})

wavesurfer.load('https://...', [[...], [...]])

2. Exporting peaks

Yes, correct, you can pass channelData arrays directly as peaks, one array per channel.

E.g.

const exportPeaks = (): Array<Float32Array> => {
  const buffer = wavesurfer.getDecodedData()
  const peaks = []
  for (let i = 0; i < buffer.numberOfChannels; i++) {
    peaks.push(buffer.getChannelData(i))
  }
  return peaks
}

The best event for that is decode, it will be fired as soon as it's decoded but before it's rendered:

wavesurfer.on('decode', () => {
  const peaks = exportPeaks()
  saveToDb(peaks)
})

I should probably restore exportPCM indeed, as it seems the new method isn't super straight-forward to use.
Edit: added an issue for it: #3007.