Как избежать создания нескольких регионов в 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' событие . Когда регион обновляется, вы можете удалить предыдущий регион, как в примере ниже, вызвав метод remove() для указанного региона c.

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

Чтобы очистить предыдущий регион при каждом создании нового, прослушайте mousedown события на узлах <wave> и вызовите clearRegions() на объекте wavesurfer.

Пример:

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>