i'm using wavesurferjs / with regions plugin

my problems are:

1. i want to avoid multiple regions being created, only 1 region i want to allow.
2. move of the region i want to avoid (not asked in question, fix is not so important and can be ignored)

here is how multiple regions being created show below:

below is my code:

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false
});
wavesurfer.load('.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=".js/1.2.3/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src=".js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src=".js/1.1.5/plugin/wavesurfer.regions.min.js"></script>




      <div id="waveform"></div>

i'm using wavesurferjs https://wavesurfer-js/ with regions plugin

my problems are:

1. i want to avoid multiple regions being created, only 1 region i want to allow.
2. move of the region i want to avoid (not asked in question, fix is not so important and can be ignored)

here is how multiple regions being created show below:

below is my code:

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false
});
wavesurfer.load('https://ia902606.us.archive/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./ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare./ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare./ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>




      <div id="waveform"></div>

Please help me thanks in advance !!

• javascript
• jquery
• audio
• video
• wavesurfer.js

2 Answers 2

You can listen to region changes on 'region-updated' event. When the region is updated you can remove the previous region as in the example below by call the remove() method on that specific region.

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false
});
wavesurfer.load('https://ia902606.us.archive/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./ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare./ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare./ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>




      <div id="waveform"></div>

To clear the previous region each time you create a new one, listen for mousedown events on the <wave> nodes and call clearRegions() on the wavesurfer object.

Example:

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false,
});
wavesurfer.load('https://ia902606.us.archive/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./ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare./ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare./ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>




<div id="waveform"></div>