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中，它始终从音频剪辑的开头开始播放。我说＆＃34;有点作品＆＃34;在Firefox中，因为它只在第二次点击时开始播放该区域（显然没有任何内容写入控制台）。我不确定第一次点击会发生什么......

我怀疑这很容易 - 但不适合我...

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

有没有办法修改频谱图中的频率范围？我与之合作的语音学家非常不满意这一事实她无法放大前5000Hz。
偶尔（但不一致 - 重新加载通常会解决这个问题 - 我收到错误消息＆＃34; TypeError：buffer is null＆＃34;当。。。的时候频谱图被加载。我应该开始寻找任何建议对于问题。

我使用的是waveurfer.js的最新版本。我在＆＃34;问题＆＃34;下发布了同样的帮助请求。在Waveurfer.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)' });

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

1 个答案: