Peaks.JS not working with Angular

[Arjun021]

I am trying to integrate Peaks.js library in my Angular Project but the same error is coming: export 'init' (imported as 'Peaks') was not found in 'peaks.js' (possible exports: default)

I followed the steps as per document only.

.ts file

import * as Peaks from 'peaks.js';

ngAfterViewInit(): void {
    let myAudioContext = new AudioContext();
       const options: any = {
      zoomview: {
        container: document.getElementById('zoomview-container')
      },
      overview: {
        container: document.getElementById('overview-container')
      },
      mediaElement: document.querySelector('audio'),
      webAudio: {
        audioContext: myAudioContext
      },
      dataUri: {
        json: '../../../assets/json/audio-data.json' // or json: 'sample.json'
      }
    };

    Peaks.init(options, function(err: any, peaks: any) {
      // Do something when the waveform is displayed and ready
    });

.HTML file

<div id="zoomview-container"></div>
<div id="overview-container"></div>
<audio>
  <source src="../../../assets//json/audio-file.mp3" type="audio/mpeg">
</audio>

I tried everything but no luck. Please let me know if anyone has any solution for this

@chrisn

[chrisn]

Thanks for reporting this. The problem seems to be with the TypeScript declarations. As a workaround, you can go into node_modules/peaks.js/package.json and delete the "types" line. You can then use:

import Peaks from 'peaks.js';

I'm not sure what the root cause is yet...

[chrisn]

Please try updating Peaks.js to v2.0.5, does this change fix your issue?

[Arjun021]

@chrisn Yes it's working fine now. Thanks for the quick help. :)

[chrisn]

Thanks!