¿Por wavesurferjs está desbordando el div padre

EaBengaluru:

tengo un problema con wavesurferjs

Se desborda el div padre

Está sucediendo por primera vez y el cambio de tamaño de la div padre

En cambio de tamaño que debe encajar el div padre

Pregunta: cuando los padres divse cambia el tamaño waveformdebe ajustarse para acomodar

se muestra en la siguiente imagen:

aquí está mi código:

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
//   waveColor: 'violet',
  waveColor: '#5B88C8',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false,
  drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');


wavesurfer.enableDragSelection({
  drag: false,
  slop: 1,
  loop : false,
});

wavesurfer.on('region-created', function (region) {
  console.log(region.start, region.end);
});


wavesurfer.on('ready', function (readyObj) {

        wavesurfer.addRegion({
            start: 0, // time in seconds
            end: wavesurfer.getDuration(), // time in seconds
            color: 'hsla(100, 100%, 30%, 0.1)',
            loop: false,
            multiple: false,
            drag: false
        });
})




document.querySelectorAll('wave').forEach(function(wave){
      wave.addEventListener('mousedown', function(e) {
        e.preventDefault();
        wavesurfer.clearRegions();
      });
  });


$('.toggle-width').on('click',function(){
   var width = $('#wavesurferContainer').width();
   width = width - 120;
   $('#wavesurferContainer').width(width + 'px');
});

  handle.wavesurfer-handle{
            width: 9% !important;
            max-width: 7px !important;
            /* background: #03A9F4; */
            background: orange;
            cursor: default !important;
       }


      #wavesurferContainer{
        width: calc(100% - 50px);
        border: 1px solid red;
        position: relative;
        margin-top: 56px;
     }

    handle.wavesurfer-handle.wavesurfer-handle-end:before{
        bottom: -17px !important;
        top: unset !important;
    } 

    #waveform{
        margin-top: 10%
    }
    #waveform wave{
        overflow: unset !important;
    }

    span.toggle-width{
       position: relative;
       float: right;
    }
    span.toggle-width:before {
        content: "<";
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 29px;
        color: #fff;
        font-size: 24px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>




  <div id="wavesurferContainer">
        <span class="toggle-width"></span>
        <div id="waveform"></div>
   </div>

Por favor me ayude gracias por adelantado !!!

Mehdi:

La documentación de los wavesurfer menciona responsivey fillParentopciones, que podrían resolver el problema.

reponsiveestá disponible a partir del WAVESURFER v2.0.0 ( fuente ), por lo que es necesaria una actualización, en caso de que está utilizando la versión 1.2.3como en el fragmento de ejemplo.

La última versión estable es la 3.3.1.

Editar, como un comentario menciona que la NGP no está en uso:

La reciente construcciones de la biblioteca se pueden encontrar en un CDN:

• wavesurfer.js / 3.3.1 / wavesurfer.min.js
• wavesurfer.js / 3.3.1 / plugin / wavesurfer.regions.min.js

Edit2: Tal como se documenta :

Es necesario incluir la configuración del plugin cuando se crea una instancia de WaveSurfer:

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    plugins: [
        WaveSurfer.regions.create({})
    ]
});

Registrando el plugin durante la instanciación de resuelve Wavesurfer el problema, como se demuestra en el siguiente fragmento de código.

var wavesurfer = WaveSurfer.create({
      container: '#waveform',
    //   waveColor: 'violet',
      waveColor: '#5B88C8',
      progressColor: '#264E73',
      hideScrollbar: true,
      cursor: false,
      drag: false,
    plugins: [
        WaveSurfer.regions.create({})
    ]
    });
    wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');


		const resizeObserver = new ResizeObserver(entries => {
			for (let entry of entries) {
			   wavesurfer.empty();
			   wavesurfer.drawBuffer();
           var regs = Object.values(wavesurfer.regions.list);
           window.setTimeout(() => {
               wavesurfer.regions.clear();
               var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
			       regs.forEach(e => wavesurfer.addRegion(clear(e)));
           }, 100);
			   
			   
			}
		});

    wavesurfer.enableDragSelection({
      drag: false,
      slop: 1,
      loop : false,
    });

    wavesurfer.on('region-updated', function (region) {
      console.log(region.start, region.end);
    });


    wavesurfer.on('ready', function (readyObj) {
            resizeObserver.observe($('#wavesurferContainer')[0])
            wavesurfer.addRegion({
                start: 0, // time in seconds
                end: wavesurfer.getDuration(), // time in seconds
                color: 'hsla(100, 100%, 30%, 0.1)',
                loop: false,
                multiple: false,
                drag: false
            });
    })




    document.querySelectorAll('wave').forEach(function(wave){
          wave.addEventListener('mousedown', function(e) {
            e.preventDefault();
            wavesurfer.clearRegions();
          });
      });




    $(document).on('click','.toggle-width',function(){
       console.log('clicked');
       var width = $('#wavesurferContainer').width();
       width = width - 120;
       $('#wavesurferContainer').width(width + 'px');
       // you can put here implementation of our redraw.
    });

handle.wavesurfer-handle{
            width: 9% !important;
            max-width: 7px !important;
            /* background: #03A9F4; */
            background: orange;
            cursor: default !important;
       }


      #wavesurferContainer{
        width: calc(100% - 50px);
        border: 1px solid red;
        position: relative;
        margin-top: 56px;
     }

    handle.wavesurfer-handle.wavesurfer-handle-end:before{
        bottom: -17px !important;
        top: unset !important;
    } 

    #waveform{
        margin-top: 10%
    }
    #waveform wave{
        overflow: unset !important;
    }

    span.toggle-width{
       position: relative;
       float: right;
    }
    span.toggle-width:before {
        content: "<";
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 29px;
        color: #fff;
        font-size: 24px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>




  <div id="wavesurferContainer">
        <span class="toggle-width"></span>
        <div id="waveform"></div>
   </div>