时间戳

首页 > 解决方案 > 如何在 wavesurfer.js 中播放一个区域？

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

问题描述

我最近发现了 wavesurfer.js 并将其集成到语言学家的 Web 界面中（使他们能够播放他们检索到的查询结果的音频）。由于单词和声音的对齐并不总是理想的，我正在使用区域插件来让他们突出他们想要听的延伸 - 或者至少这是计划。在过去的几天里，我一直在努力让它发挥作用。我对 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 站点上的“问题”下发布了相同的帮助请求，但尚未收到任何输入 - 现在希望在这里获得一些输入。如果开发人员回复我，我会更新内容。提前感谢您的帮助！

塞巴斯蒂安

标签： javascriptwavesurfer.js

解决方案

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

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

推荐阅读