wavesurfer and large size mp3 : json and backend:'MediaElement'

[frederictaieb]

Hello, I am trying to use wavesurfer on a big mp3: 1h30 length.
Since it takes too long to load, im trying to use backend:'MediaElement' with a JSON file from my MP3 using audiowavform.

it loads correctly, instantly; but when i click to play the sound; it always start at beginning of the track and not where I clicked.
Does anyone know why?

in my HTML file i just have 2 div :

• waveform : which is a simple div
• ap which is audio element with src=file.mp3

and in my js code
`

<script type="module">                                                                                                                                                                                            
  import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'                                                                                                                    
                                                                                                                                                                                                                  
  const apEl = document.getElementById("ap");                                                                                                                                                                     
                                                                                                                                                                                                                  
  const wavesurfer = WaveSurfer.create({                                                                                                                                                                          
    container: '#waveform',                                                                                                                                                                                       
    waveColor: '#4F4A85',                                                                                                                                                                                         
    progressColor: '#383351',                                                                                                                                                                                     
    backend: 'MediaElement,'                                                                                                                                                                                      
  })                                                                                                                                                                                                              
                                                                                                                                                                                                                  
  fetch('/file.json')                                                                                                                                                                                             
  .then(response => {                                                                                                                                                                                             
    if (!response.ok) {                                                                                                                                                                                           
      throw new Error("HTTP error " + response.status);                                                                                                                                                           
    }                                                                                                                                                                                                             
   return response.json();                                                                                                                                                                                        
  })                                                                                                                                                                                                              
  .then(peaks => {                                                                                                                                                                                                
    console.log('loaded peaks! sample_rate: ' + peaks.sample_rate);                                                                                                                                               
    wavesurfer.load(ap.src, peaks.data);                                                                                                                                                                          
  })                                                                                                                                                                                                              
  .catch((e) => {                                                                                                                                                                                                 
    console.error('error', e);                                                                                                                                                                                    
  });                                                                                                                                                                                                             
                                                                                                                                                                                                                  
  wavesurfer.on('interaction', () => {                                                                                                                                                                            
    wavesurfer.play()                                                                                                                                                                                             
  })                                                                                                                                                                                                              
</script>                                                                                                                                                                                                         

`

Thanks for your help

[katspaugh]

Make sure your web server supports range requests.

[frederictaieb]

I understand better now why it was working well on npm and not on Django...
Would you have any recommandations to make range requests supported on Django or Nginx?
Thank you by advance

[katspaugh]

Worth asking in the corresponding communities/checking their docs.