如何避免在wavesurferjs中创建多个区域

Question

我正在使用带有区域插件的wavesurferjs https://wavesurfer-js.org/

我的问题是：

1. 我想避免创建多个区域，只允许创建 1 个区域。
2. 移动我想避免的区域（未询问，修复不是那么重要，可以忽略）

创建的多个区域如下所示：

下面是我的代码：

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_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
    });
});

       handle.wavesurfer-handle{
            width: 9% !important;
            max-width: 7px !important;
            background: orange;
            cursor: default !important;
       }

<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="waveform"></div>

请帮助我提前谢谢！

Answer 1

您可以在“region-updated”event 上收听区域变化。当区域更新时，您可以通过在该特定区域上调用 remove() 方法来删​​除先前的区域，如下例所示。

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');


wavesurfer.enableDragSelection({
  drag: false,
  slop: 1,
  loop : false,
});

wavesurfer.on('region-created', function (region) {
  console.log(region.start, region.end);
});

wavesurfer.on('region-updated', function(region){
      var regions = region.wavesurfer.regions.list;
      var keys = Object.keys(regions);
      if(keys.length > 1){
        regions[keys[0]].remove();
      }
});

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

handle.wavesurfer-handle{
            width: 9% !important;
            max-width: 7px !important;
            background: orange;
            cursor: default !important;
       }

<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="waveform"></div>

Answer 2

要在每次创建新区域时清除之前的区域，请在 <wave> 节点上侦听 mousedown 事件并在 wavesurfer 对象上调用 clearRegions()。

例子：

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false,
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_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(wave => {
    wave.addEventListener('mousedown', function(e) {
      e.preventDefault();
      wavesurfer.clearRegions();
    });
});

handle.wavesurfer-handle {
  width: 9% !important;
  max-width: 7px !important;
  background: orange;
  cursor: default !important;
}

<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="waveform"></div>