Generate waveform while audio is playing

[MerinAlex23]

Is there a way to generate waveform while playing an audio.

    <div id="waveform" style="width: 1000px; height: 300px"></div>
   <audio id="audio" src={{ url_for('static', filename="audio_0.5.mp3") }}></audio>

 <script type="text/javascript">

var wf = new WFPlayer({

                  container: document.querySelector('#waveform'),
                  mediaElement: document.querySelector('#audio'),
              scrollable: true,
              useWorker: true,
              refreshDelay: 50,
              wave: true,
              waveColor: 'rgba(255, 255, 255, 0.1)',
              backgroundColor: 'rgb(28, 32, 34)',
              cursor: true,
              cursorColor: '#ff0000',
              progress: true,
              progressColor: 'rgba(255, 255, 255, 0.5)',
              grid: true,
              gridColor: 'rgba(255, 255, 255, 0.05)',
              ruler: true,
              rulerColor: 'rgba(255, 255, 255, 0.5)',
              rulerAtTop: true,
              pixelRatio: window.devicePixelRatio,
              channel: 0,
              duration: 10,
              padding: 5,
              waveScale: 0.8,

              });

   wf.load('static/audio_0.5.mp3');

I tried the above code, couldn't seem to generate it. Could you help me on this.

[zhw2590582]

You open the console of chrome and see what error message there is

[MerinAlex23]

got error:

Uncaught (in promise) DOMException: Unable to decode audio data

I can see the grid and the ruler is moving but cannot see the waves.

can you help..