如何在wavesurfer.js中播放区域？

Question

我最近发现了waveurfer.js，并将其集成到语言学家的Web界面中（使他们可以播放音频以获取他们检索的查询结果）。 由于文字和声音的对齐并非总是理想的，所以我使用regions插件让他们突出显示他们想听的声音-至少这是计划。 在过去的几天里，我一直在努力使其工作。 我对JavaScript知之甚少-我正在使用发现的示例进行工作，试图使它们适应我的需求。 请您的批评态度温和。.-）

我想要的是：允许用户拖动选择一个区域，然后在单击（或按下按钮）时播放一次（或可能作为循环播放）。 根据需要调整区域。 这是我得到的：

var RegionsPlugin = window.WaveSurfer.regions;

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'blue',
  progressColor: 'purple',
  barHeight: 2,
  backend: 'MediaElement',
    plugins: [      
    RegionsPlugin.create({
     })
    ]
});

wavesurfer.load('http://url.to.wav');

wavesurfer.on('ready', function () {
    wavesurfer.enableDragSelection({});
});

wavesurfer.on('region-click', function(region, e) {
    console.log(region.start);
    console.log(region.end);
    e.stopPropagation();
     wavesurfer.play(region.start, region.end);
});

这种方法在Firefox（在Mac上为Mac）上有效，但在Opera和Chrome中，总是从音频剪辑的开头开始播放。 我说的是Firefox中的“一类作品”，因为它仅在第二次单击时才开始播放该区域（显然没有任何内容写入控制台）。 我不确定第一次点击会发生什么...

我怀疑这真的很容易-但对我来说不是...

与频谱图插件有关的另外两件事（上面未显示代码）：

1. 有什么方法可以修改频谱图中的频率范围？ 我与之合作的语音专家对她无法放大前5000Hz感到非常不满。
2. 有时（但不是始终如一-重新加载通常可以解决此问题-加载频谱图时出现错误消息“ TypeError：buffer为null”。我应该从那里开始寻找问题的任何建议。

我正在使用最新版本的waveurfer.js。 我在waveurfer.js的GitHub网站上的“问题”下发布了相同的帮助请求，但尚未收到任何输入-现在希望在这里输入一些信息。 如果开发者回到我身边，我将进行更新。 在此先感谢您的帮助！

塞巴斯蒂安

Answer 1

在waveurfer.enableDragSelection（{}）之后添加这些行。 在您的代码中。 应该管用。

wavesurfer.addRegion({ start: 0, // time in seconds end: 3, // time in seconds color: 'hsla(100, 100%, 30%, 0.1)' });