title: How to avoid multiple regions being created in wavesurferjs
body: <p>i'm using <code>wavesurferjs</code> <a href="https://wavesurfer-js.org/" rel="nofollow noreferrer">https://wavesurfer-js.org/</a>  with regions plugin</p>
  
  <p><strong>my problems are:</strong></p>
  
  <ol>
  <li>i want to avoid <strong>multiple</strong> regions being created, <strong>only 1</strong> region i want to allow.</li>
  <li>move of the region i want to avoid (not asked in question, fix is not so important and can be ignored)</li>
  </ol>
  
  <p><strong>here is how multiple regions being created show below:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hPvsW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hPvsW.gif" alt="enter image description here"></a></p>
  
  <p><strong>below is my code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>       handle.wavesurfer-handle{
              width: 9% !important;
              max-width: 7px !important;
              background: orange;
              cursor: default !important;
         }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- wavesurfer.js timeline --&gt;
  &lt;!-- &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"&gt;&lt;/script&gt; --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"&gt;&lt;/script&gt;
  
  
  
  
        &lt;div id="waveform"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me thanks in advance !!</p>