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!!!

Sundew

Edited my answer with a proper fix. Hope it helps and don't forget to accept my answer if it works for you – Deserving

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>

Lipolysis

i'm working on old project, i don't have npm setup. i tried to update, but did not work. What i did is : downloaded source as pointed by you, copied src renamed it as wavesurfer(folder) then i linked them in my project like this <script src="wavesurfer/wavesurfer.js"></script> <script src="wavesurfer/plugin/regions.js"></script> both of them loaded successfully. but giving this error ibb.co/FWbKKsH loaded successfully : ibb.co/C0zrpv9 – Sundew

A build must be used, not the original source. I edited the answer to add link to build versions os the library. – Lipolysis

thanks for pointing the cd, i have tried but giving this error ibb.co/xHQwGyR here is my codepen: codepen.io/eabangalore/pen/ExjpBqR\ – Sundew

Please see the console.log – Sundew

that's great !! – Sundew

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>

Deserving

It has problem with moving left range barier. My solution has same, and this is probably bug in this old version of library. – Lacrimatory

@Lacrimatory How should left range barrier move? You mean the left of #wavesurferContainer ? – Deserving

No... when you move left orange handler it behaves weirdly. – Lacrimatory

@Lacrimatory Yeah seems like a bug in the regions plugin. It poorly measures the container width and if my chance a handle bar goes out of the container it'll start acting weirdly. Might have to update to a version where this issue was fixed – Deserving

Answer 3

There is no such functionality in your version of this library, but you still can implement such. Below is working example. Key here is to force to rerender buffers (here drawBuffer()). Regions are separate thing and we just remove and add them manually after redraw (not sure if best idea... but works).

//this needs to be called after resize!
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
wavesurfer.regions.clear();
regs.forEach(e => wavesurfer.addRegion(e));

this snipped needs to be called whenever container size has been changed. Here we are calling it just after such change from code, but in most cases it will be impossible, then you should use ResizeObserver to handle this.

To keep regions in container add such css:

.wavesurfer-region {
    max-width: 100%;
}

    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');


	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();
          });
      });




    $('.toggle-width').on('click',function(){
       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;
        }

        .wavesurfer-region {
            max-width: 100%;
        }

        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.js"></script>

    <!-- wavesurfer.js timeline -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.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>

Lacrimatory

very good answer, but on drag of orange color handle it is overflowing the container even with your code . here is image ibb.co/tpS17p4 – Sundew

I've updated answer to use ResizeObserver. Don't know why it overflows to be honest. I've not more time to spend on it :(... sorry. – Lacrimatory

@Sundew I've updated answer, now it not overflows. – Lacrimatory

Damn... it still happens. To be honest I thing best idea is to update version to newest one. – Lacrimatory

i'm working on old project, i don't have npm setup. i tried to update, but did not work. What i did is : downloaded source as pointed by you, copied src renamed it as wavesurfer(folder) then i linked them in my project like this <script src="wavesurfer/wavesurfer.js"></script> <script src="wavesurfer/plugin/regions.js"></script> both of them loaded successfully. but giving this error ibb.co/FWbKKsH loaded successfully : ibb.co/C0zrpv9 – Sundew