为什么 wavesurferjs 会溢出父 div

Question

我有问题 wavesurferjs

正在溢出父级 div

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

在 resize 上它应该适合 parent 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

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

reponsive 从 waveSurfer v2.0.0 (source) 开始可用，因此需要升级，以防您使用示例片段中的版本 1.2.3。

最新的稳定版本是 3.3.1。

编辑，评论中提到未使用 npm：

库的最近builds可以在cdns中找到：

编辑 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>

Answer 2

您的库版本中没有此类功能，但您仍然可以实现此类功能。下面是工作示例。这里的关键是强制重新渲染缓冲区（这里 drawBuffer()）。区域是独立的东西，我们只是在重绘后手动删除和添加它们（不确定是否是最好的主意......但有效）。

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

只要容器大小发生变化，就需要调用此片段。这里我们是在代码发生这样的变化之后调用它，但在大多数情况下是不可能的，那么你应该使用ResizeObserver来处理这个。

要将区域保留在容器中，请添加这样的 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>

Answer 3

我找到了针对您当前版本 wavesurfer.js 的修复程序。

我所做的只是更新抽屉大小并在您更改容器宽度时调用重绘 method。但是这些区域没有得到更新。所以我将当前区域值取到一个临时变量并删除区域并重绘。现在该区域将处于适当的位置和适当的大小。

下一个问题是把手不断移出容器，该区域开始表现异常。您可以通过应用以下 css 代码，使用简单的 css 技巧来修复它。

希望对您有所帮助。

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

这是一个有效解决方案的片段。

$('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>

为什么 wavesurferjs 会溢出父 div

Why wavesurferjs is overflowing the parent div

javascript

jquery

wavesurfer.js