Why wavesurferjs is overflowing the parent div

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>

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>

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>

Why wavesurferjs is overflowing the parent div

Tags:

Javascript

Jquery

Wavesurfer.Js

Related

Recent Posts