4

i'm using wavesurferjs https://wavesurfer-js.org/ 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:

enter image description here

below is my code:

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>

Please help me thanks in advance !!

EaBengaluru
  • 131
  • 2
  • 17
  • 59

2 Answers2

5

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.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>
Lasithds
  • 2,161
  • 25
  • 39
  • But in your code on `onGrag` is not shown, please have a different snippet with `onGrag` without `mouseevent` . then i will accept your answer – EaBengaluru Mar 19 '20 at 08:56
  • @EaBengaluru I went throw the plugins documentation and update the code. Plugin does not have a onDrag method, however it has 'region-updated' event. You can listen to drag events from that and do necessary changes. Hope it helps. – Lasithds Mar 19 '20 at 13:33
  • 1
    Ah, this solution is better than mine in that it doesn't remove the selection unless a new one is created. Nice. – thingEvery Mar 23 '20 at 03:44
2

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.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>
thingEvery
  • 3,368
  • 1
  • 19
  • 25
  • not a very good solution, if you go to full page, then click on anywhere on page. `selected region` gets dis-selected – EaBengaluru Mar 16 '20 at 12:41
  • @EaBengaluru Good call! I wasn't properly selecting the elements to apply the `eventListener`. I've updated it so clicks only apply to the `` elements now. – thingEvery Mar 16 '20 at 16:55