问题标签 [wavesurfer.js]

我正在使用带有区域插件的多个WaveSurfer将样本加载到数字仪器中。就性能而言，它工作得很好，但我试图让用户能够记录他们播放的内容并将其转换为 blob 或你有的东西。有没有办法在单个 AudioContext 中记录和保存实时播放的声音？到目前为止，我只能从非常简洁的麦克风捕获外部输入。

我正在考虑使用 WaveSurfer 的 MediaElement 回退和 captureStream() API，但是不幸的是，MediaElement 似乎抛出了一个错误，读到它无法查询未定义的选择器。

下面是初始化每个 WaveSurfer 的代码：

非常感谢！

更新：我只能通过创建缓冲区源、将其连接到 AudioContext 目标并将其连接到 MediaStreamDestination 来进行录制。但是我只能为每个单独的 WaveSurfer 执行此操作，并且当我尝试为 WaveSurfer 所锁定的全局 AudioContext 创建缓冲区时，它不会向流中返回任何声音。将不胜感激记录所有全局上下文输出的任何指针。

以下记录个别 WaveSurfer 输出：

更新 2：

我现在朝着正确的方向迈出了一步，将每个缓冲区合并为一个缓冲区并将其传递给 AudioContext，但是缺少实时元素，因为这只是连接静态缓冲区。当用户触发样本区域时，有没有办法从每个缓冲区实时捕获 PCM 流？

我想用wavesurfer.js在Vue中显示一个wav文件，我的代码：

但我得到错误：

我想绘制如下图所示的压缩信号。如果这是不可能的，那么有没有办法在 Tone.js 中实现信号图？我已经使用 Tone.Analyser Node 实现了可视化器。我也在寻找与可视化器不同的信号图，如下图所示。我想在 Tone 中声明音频然后压缩然后在 wavesurfer 中绘制它的原因是 Tone.js 中没有信号图实现。请告诉我。如果有人可以提供帮助，那就太好了。

我是 Web 音频 API 的新手，我使用 Tone.Compressor 库来压缩音频并绘制相同的波形。但我也想像 wavesurfer.js 库那样绘制压缩音频信号。我附上了下面的例子。有人可以帮我连接这两个库并使用 Tone.Compressor 压缩音频用 wavesurfer.js 绘制波形吗？

提前致谢！！！！

我最近发现了 wavesurfer.js 并将其集成到语言学家的 Web 界面中（使他们能够播放他们检索到的查询结果的音频）。由于单词和声音的对齐并不总是理想的，我正在使用区域插件来让他们突出他们想要听的延伸 - 或者至少这是计划。在过去的几天里，我一直在努力让它发挥作用。我对 JavaScript 知之甚少 - 我正在研究我找到的示例，试图使它们适应我的需要。请在批评时保持温和.. ;-)

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

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

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

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

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

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

塞巴斯蒂安

不确定我的措辞是否正确，但这是我想要做的。

我正在使用一个函数在页面上呈现wavesurfer的多个实例。

开箱即用，这很简单，因为您只需声明每个单独的 wavesurfer 实例：

但是我正在预加载 JSON 存储的波形数据，而不是在页面加载时加载任何音频文件，只有当用户单击播放按钮时才会加载音频文件。此外，实例的数量和它们的 id 将被动态创建。

我的逻辑正常，但我无法定位每个唯一的 wavesurfer 实例，因为它们不是唯一的 - 因此我的问题是，我在官方网站（或 git）上找不到任何关于定位的信息个别实例。我认为这是可能的，container但找不到任何关于如何做到这一点的信息，所以我正在尝试另一种方式。

在渲染 wavesurfer 的每个实例的函数中，我们有这个（domEl被传递到函数中div并id为每个波形容器创建一个唯一的和）：

以及加载实际音频的功能：

这是可行的，但是由于每个 wavesurfer 实例都被声明为wavesurfer它会将音频加载到每个实例中，无论单击哪个播放按钮。

我认为我可以做的是在渲染函数中声明每个 wavesurfer 实例，并使用动态生成的名称，即：

然后 ：

但这不起作用（而且我什至认为从我读过的关于动态变量名的内容来看这是不可能的）。

我还读到我可能应该将哈希图用于这样的事情，但不知道如何使用它们，所以如果是这样的话，或者你可以看到另一种我可以完成这项工作的方法，我真的很感激一些指针。

如果这种方法完全错误，我如何定位多个 wavesurfer 实例而不为每个实例声明对象名称？我找不到任何解释如何在任何地方执行此操作的内容。

在 react-wavesurfer 中，单击区域如何从该区域的开始到结束播放。以及单击按钮时如何删除区域？

谢谢帮助！

我正在使用https://wavesurfer-js.org，并且我在页面上加载了 10 个不同的曲目。我需要能够同时控制所有这些。

目前，我正在像这样玩它们

问题是它们一准备好就开始，所以它们不同步。

我怎样才能等待所有人都准备好？我怎么能同时管理所有这些，所以当我跳到某个点时，它们都可以？

谢谢

我使用wavesuffer 和插件光标来显示我的音频/视频的波形。现在我想在将鼠标悬停在波形上时显示音频/视频的时间，但插件光标不支持:(。我该怎么做？

对不起，我的英语不好 ：（

我们在 Firefox 中通过 wavesurfer JS 为某些特定格式的 mp3 文件绘制音频可视化（图形）时面临问题。它总是给我们这样的错误： 传递给 decodeAudioData 的缓冲区包含未知的内容类型。

但是相同的文件在 chrome 中运行没有任何问题。经过调查，我们发现在wavesurfer JS中使用了decodeAudioData()，它在解码ArrayBuffer中包含的音频文件数据时会产生错误。

由于我们没有机会通过使用任何服务器端转换技术（sox/ffmpeg）来解决问题，我们需要在客户端进行管理。此外，我们没有找到任何线索为什么“decodeAudioData”无法在 Firefox 中处理它，而 chrome 可以毫无困难地做到这一点。

演示代码：

演示网址： http ://audiospectrum.bjitgroup.com/main.html

注意：在 Firefox 中，firefox 的以下错误显示在控制台的控制台 错误中

提前致谢。您的帮助将不胜感激。

我正在使用 Android Cordova 应用音乐播放器开始我的编程研究，我需要同时播放多个本地文件。

目前，我正在使用Wavesurfer.js（基于 Web 音频 API）来做到这一点，但我遇到了一些问题：加载每个 mp3 文件需要几秒钟，并且在加载一些文件后应用程序崩溃（它是文件播放后不释放内存）。

使用Cordova Media Plugin，我可以比使用 Web Audio 更快地加载文件，我没有内存问题，但我无法安排文件同时播放。

我已经尝试过这个技巧来通过 Cordova 的插件播放文件，但是我在第 1 个和第 20 个文件之间有大约 900 毫秒的延迟（它们是 14 英寸长，231KB 大小）。

根据这个链接，我可以使用 AudioWorkletNode 直接从磁盘播放文件，但我找不到实现这一点的方法。

任何想法我应该如何解决这个问题？

提前致谢。