Why wavesurferjs is overflowing the parent div

Question

i have problem with wavesurferjs

It is overflowing the parent div

It is happening for the first time and on resize of the parent div

On resize it should fit the parent div

Question: when parent div is resized waveform should adjust itself to accomodate

it is shown in the below image:

here is my code:

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>

Please help me thanks in advance!!!

Answer 1

The documentation of wavesurfer mentions the responsive and fillParent options, which should solve the problem.

reponsive is available as of waveSurfer v2.0.0 (source), so an upgrade is needed, in case you are using the version 1.2.3 as in the example snippet.

Latest stable version is 3.3.1.

Edit, as a comment mentions that npm is not in use:

The recent builds of the library can be found in a cdns:

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

Edit2: As documented:

You need to include the plugin's configuration when creating an instance of WaveSurfer:

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

Registering the plugin during the instantiation of wavesurfer solves the problem, as demonstrated in the snippet below.

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>

Answer 2

I found a fix for your current version of wavesurfer.js.

All I did is update drawer size and call redraw method when you change the container width. But then the regions doesn't get updated. So I took the current regions values to a temp variable and removed regions and redraw. Now the region will be in proper position and proper size.

Next issue was that the handle bar keeps moving out of the container and the region starts acting crazy. You can fix it with simple css trick by applying the following css code.

Hope it helps.

handle.wavesurfer-handle-end{
  transform: translateX(-100%);
}

Here's a snippet of a working solution.

$('document').ready(function() {
  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');

    wavesurfer.drawer.updateSize();
    wavesurfer.drawBuffer();
    
    var region_list = wavesurfer.regions.list;
    var region_keys = Object.keys(region_list);
    region_keys.map(function(key){
      var temp_region = {
        start: region_list[key].start, // time in seconds
        end: region_list[key].end, // time in seconds
        color: region_list[key].color,
        loop: region_list[key].loop,
        multiple: region_list[key].multiple,
        drag: region_list[key].drag
      };
      region_list[key].remove();
      wavesurfer.addRegion(temp_region);
    });
  });
});

handle.wavesurfer-handle {
    width: 9% !important;
    max-width: 7px !important;
    /* background: #03A9F4; */
    background: orange;
    cursor: default !important;
}
handle.wavesurfer-handle-end{
  transform: translateX(-100%);
}
#wavesurferContainer {
    position: relative;
    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 {
    position: relative;
    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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<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>
<div id="wavesurferContainer">
    <span class="toggle-width">
    </span>
    <div id="waveform">
    </div>
</div>