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

Question

我最近发现了 wavesurfer.js，并将其集成到语言学家的网络界面中（使他们可以播放音频以获取他们检索到的查询结果）。由于单词和声音的对齐并不总是理想的，我正在使用区域插件来让他们突出他们想要听的延伸 - 或者至少这是计划。在过去的几天里，我一直在努力让它发挥作用。我对 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 上）中有效，但在 Opera 和 Chrome 中，它总是从音频剪辑的开头开始播放。我在 Firefox 中说“有点工作”，因为它只在第二次单击时开始播放该区域（显然没有任何内容写入控制台）。我不确定第一次点击会发生什么...

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

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

1. 有没有办法修改频谱图中的频率范围？ 与我一起工作的语音专家对以下事实非常不满 她无法放大前 5000Hz。
2. 偶尔（但并非始终如一 - 重新加载通常会解决此问题 - 当我收到错误消息“TypeError：缓冲区为空”时 频谱图已加载。任何我应该开始寻找的建议 解决问题。

我正在使用最新版本的 wavesurfer.js。 我在 wavesurfer.js 的 GitHub 站点上的“问题”下发布了相同的帮助请求，但尚未收到任何输入 - 现在希望在这里得到一些输入。如果开发人员回复我，我会更新内容。 提前感谢您的帮助！

塞巴斯蒂安

Answer 1

在 wavesurfer.enableDragSelection({}); 之后添加这些行在你的代码中。应该可以。

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

Answer 2

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();
    region.wavesurfer.play(region.start, region.end);
});

您可以阅读源代码：

      this.element.addEventListener('click', function (e) {
        ... ...
        // _this3 is wavesurfer, .on is a async function
        _this3.wavesurfer.fireEvent('region-click', _this3, e); 
      });

文件： enter image description here