4

我正在使用 带有区域插件的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>

请帮助我提前谢谢！

4

2 回答 2

5

您可以在 'region-updated'事件上收听区域变化。当区域更新时，您可以通过调用该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>

于 2020-03-19T04:44:22.180 回答
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>

于 2020-03-16T03:35:58.227 回答