javascript - 为什么wavesurferjs 会溢出父div

Question

我对wavesurferjs有问题

它溢出了父div

这是第一次发生，并且是在调整父 div 大小时发生的

在调整大小时，它应该适合父div

问题:当调整父 div 大小时，waveform 应自行调整以适应

如下图所示:

这是我的代码:

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>

请帮助我提前致谢!!!

Answer 1

documentation wavesurfer 提到了 responsive 和 fillParent 选项，这应该可以解决问题。

响应式自waveSurfer v2.0.0 ( source )起可用，因此如果您使用版本1.2.3，则需要升级，如下所示示例片段。

最新稳定版本是3.3.1。

编辑，因为评论提到 npm 未在使用中:

可以在 CDNS 中找到该库的最新版本:

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

编辑2: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({})
    ]
});

在 wavesurfer 实例化期间注册插件可以解决该问题，如下面的代码片段所示。

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>