bbc / peaks.js

JavaScript UI component for interacting with audio waveforms
https://waveform.prototyping.bbc.co.uk
GNU Lesser General Public License v3.0
3.16k stars 275 forks source link

Demo is not working #493

Closed balbinott closed 1 year ago

balbinott commented 1 year ago

Hi, i tried to get the demo to work but unfortunately no success... I cloned, yarn install and yarn start, when i opened the page i got the following error: Firefox Uncaught TypeError: WaveformData__default.default is undefined xhr waveform-builder.js:194

Chrome Uncaught TypeError: Cannot read properties of undefined (reading 'create') at XMLHttpRequest. (waveform-builder.js:194:39)

Sorry if it was my mistake but it seems some dependencies fault or something like that...

My current OS is a mint 21, firefox 113.0.1 (64-bit) - Chrome Version 113.0.5672.126 (Official Build) (64-bit)

The 'start' process run without error Thanks in advance

chrisn commented 1 year ago

I don't use yarn, so this is untested (and it seems doesn't work...) I recommend using npm instead.

balbinott commented 1 year ago

Hey, thanks for the quick answer, this solve the problem! The demo is running using npm

Another question if you dont mind... i have a vuejs project and im trying to use this component, but i got in both browser: Uncaught TypeError: This waveform data version not supported.

Im using the .dat from the demo, im requesting and loading as a buffer

const data_buffer = await data.arrayBuffer();
      const options = {
        zoomview: {
          container: this.$refs.zoomview
        },
        overview: {
          container: this.$refs.overview
        },
        mediaElement: this.$refs.audio,
        dataUri: {
          arraybuffer: data_buffer
        }
      };
      Peaks.init(options, (err, peaks) => {
        console.log(peaks);
        console.log(err);
      });

if i use the waveform 'pure' works...

this.wave = WaveformData.create(data_buffer);

if you have any suggestions i appreciate it and thanks again

chrisn commented 1 year ago

The dataUri object is expected to contain a URL that Peaks.js will fetch to get the waveform data. As you already have the data in data_buffer, you should use the waveformData option instead.

That is, try changing this option:

dataUri: {
  arraybuffer: data_buffer
}

to:

waveformData: {
  arraybuffer: data_buffer
}
balbinott commented 1 year ago

YEAH, thanks a bunch, sending you a virtual coffee!