[英]How to play a play a region in wavesurfer.js?
I recently discovered wavesurfer.js and have integrated it into a web-interface for linguists (making it possible for them to play the audio for query results they retrieve). 我最近发现了waveurfer.js,并将其集成到语言学家的Web界面中(使他们可以播放音频以获取他们检索的查询结果)。 Since the alignment of words and sound isn't always ideal, I am using the regions plugin to allow them to highlight the stretch they want to listen to - or at least that's the plan.
由于文字和声音的对齐并非总是理想的,所以我使用regions插件让他们突出显示他们想听的声音-至少这是计划。 For the past few days, I have been struggling to get this to work.
在过去的几天里,我一直在努力使其工作。 I know very little about JavaScript - I'm working from examples that I have found, trying to adapt them to my needs.
我对JavaScript知之甚少-我正在使用发现的示例进行工作,试图使它们适应我的需求。 Please be gentle in your criticism.. ;-)
请您的批评态度温和。.-)
What I want: Allow user to drag-select a region and play it once (or possibly as a loop) when clicked (or when a button is pressed). 我想要的是:允许用户拖动选择一个区域,然后在单击(或按下按钮)时播放一次(或可能作为循环播放)。 Adjust region as necessary.
根据需要调整区域。 Here's what I have got:
这是我得到的:
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);
});
This kind of works in Firefox (on a Mac), but in Opera and Chrome, it always starts playing from the beginning of the audio clip. 这种方法在Firefox(在Mac上为Mac)上有效,但在Opera和Chrome中,总是从音频剪辑的开头开始播放。 I say "kind of works" in Firefox, because it only starts playing the region on the second click (and obviously nothing is written to the console).
我说的是Firefox中的“一类作品”,因为它仅在第二次单击时才开始播放该区域(显然没有任何内容写入控制台)。 I'm not sure what happens on the first click...
我不确定第一次点击会发生什么...
I suspect this is really easy - but not for me... 我怀疑这真的很容易-但对我来说不是...
Two more things relating to the spectrogram plugin (code not shown above): 与频谱图插件有关的另外两件事(上面未显示代码):
I'm using the latest version of wavesurfer.js. 我正在使用最新版本的waveurfer.js。 I posted the same request for help under "issues" on the GitHub site of wavesurfer.js but have not received any input yet - and am now hoping for some input here.
我在waveurfer.js的GitHub网站上的“问题”下发布了相同的帮助请求,但尚未收到任何输入-现在希望在这里输入一些信息。 I will update things if the developer gets back to me.
如果开发者回到我身边,我将进行更新。 Thanks in advance for any help!
在此先感谢您的帮助!
Sebastian 塞巴斯蒂安
Add these lines after wavesurfer.enableDragSelection({}); 在waveurfer.enableDragSelection({})之后添加这些行。 in your code.
在您的代码中。 Should work.
应该管用。
wavesurfer.addRegion({ start: 0, // time in seconds end: 3, // time in seconds color: 'hsla(100, 100%, 30%, 0.1)' });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.