问题标签 [wavesurfer.js]

我有以下使用 wavesurfer.js 的功能性 React 组件

我认为我可以在外部访问 WaveSurfer 对象的唯一方法useEffect是使用，useState但这对我来说感觉不对，因为如果组件中的某些状态发生变化（例如，用户按下播放/暂停），WaveSurfer 组件不应该完全重新渲染按钮）。这导致我认为我的方法不正确？

编辑：忘了提到waveform.playPause()失败，因为单击播放按钮时它为空。

我可以将 pcm 转换为 mp3 吗？我使用 wavesurfer.js 进行测试，使用 mp3 绘制波形并完成。但我不知道如何使用 pcm。这是代码。

我的目标是在我的 Angular 8 项目中设置一个简单的音乐播放器，以静态波形显示插入的音乐，类似于 soundclouds 播放器：

根据我的搜索，这可以通过以下任一方式完成：

峰值 JS：https ://medium.com/better-programming/peaks-js-interact-with-audio-waveforms-b7cb5bd3939a
振幅 JS：https ://521dimensions.com/open-source/amplitudejs/docs/configuration/
或Wavesurfer JS：https ://wavesurfer-js.org/

不幸的是，他们都没有一个像样的文档来说明如何将它正确地导入到一般的角度或打字稿中。

我用 Wavesurfer JS 尝试过，但失败了。

组件.ts：

html

现在的问题是：
1. 关于如何用 Angular 实现这样的播放器，是否还有其他一些好的做法，我没有找到。
2.有没有办法让wavesurf在Angular中工作，或者我的代码有错。

我正在使用 wavesurfer.js 库来创建多轨播放器。（https://wavesurfer-js.org/）

我的 HTML 非常简单：

那么我的mixer.js文件如下：

然后我的问题是当我尝试在这部分代码中的任何一个轨道上寻找波形中的位置时：

编辑 1

在console.log(i);控制台中给了我一个“3”。感谢一个答案，我将其更改为：

然而，寻找一个位置只是重新调用相同的寻找函数，直到我得到一个Maximum call stack size exceeded错误。任何想法如何解决这个问题？

我在一个带有苗条的模态中加载了 9 个 wavesurferobject。关闭模态会破坏所有 wavesurferobject。重新打开模式所有 wavesurferobject 都有一个 ready 事件 true，但是 play 原因：

不知道为什么现在需要或缺少持续时间。

我在我的 VueJS 应用程序中使用 WavesurferJS，过去一周我一直在尝试解决这个问题。在 IOS Safari（据我所知，仅限 IOS Safari）上，我的 wavesurfer 组件无法完成音频解码/加载波形，并且只显示一条细直线。如果不使用backend: "MediaElement"，该组件只会显示为空白。但是，使用后端，我可以播放音频，但波形仍然永远不会加载。

我读了一点wavesurfer文档并根据FAQ：“如果你使用后端：'MediaElement'选项......音频将在你按下播放时开始播放。将显示一条细线，直到整个音频文件是下载并解码以绘制波形。”。这正是我正在经历的，可以播放音频并显示一条细线，但我认为波形永远不会完成下载/解码。

我处理音频加载的 Vue 方法：

我正在使用一组 wavesurfer 元素，在用户进行录制后调用此方法，并将 blob 数据发送到此方法。

我创建 wavesurfer 代码：

我已经为此苦苦挣扎了一段时间，不胜感激。谢谢。

我正在尝试从 Wavesurfer 的默认设置中使用单独的上下文/脚本处理器，这样我就可以独立于播放速率来操纵音频的音高。当我尝试将上下文/脚本处理器作为参数提供并播放音频时，我没有听到任何声音。

我的波形组件：

回放.js

在此设置中，Waveform.play()我可以从 wavesurfer 实例中播放，但不能操纵音高。同样，playbackEngine.play()我可以操纵音高但失去所有 Wavesurfer 功能。

虽然我很确定问题源于 Wavesurfer 和我的播放引擎使用两个单独的 AudioBuffers，但我需要在播放上下文中设置缓冲区，并使用 wavesurfer 渲染波形。

我想看看是否有人可以确认如何使用播放引擎的上下文、脚本处理器和 AudioBuffer 来控制 Wavesurfer 实例（即让 Waveform.play() 播放来自播放引擎的音频，以及更新 Wavesurfer用户界面）。

感谢所有帮助。

我们正在使用 Wavesurf JS 创建一个带有波形 plaver 的声音库。为了优化加载时间，我们将画布中生成的波形保存为图像，这样我们就不必在每次加载声音时都生成它，到目前为止效果很好。

但是为了保存图像，我们需要等待画布加载，我们发现的唯一方法是使用 setTimeout。

saveWave()只是一个调用 AJAX 并将数据发送到服务器并我们保存它的函数，效果很好。问题是我们不想依赖，window.setTimeout()因为我们的 a 被限制为 0.6 秒，就像我们在这个例子中一样（600），如果渲染时间超过 0.6 秒，那么它会保存一个空图像。

所以我正在寻找某种回调函数或监听器，它saveWave()只会在波形完成加载时触发。

例子：

或者

我在另一篇文章中发现了类似的东西，但它没有用：

同样的问题：https ://github.com/katspaugh/wavesurfer.js/issues/1727并且仅通过setTimeout():(

我正在使用 wavesurfer.js 在线创建多轨播放器，并希望导出带有水平平移等的组合轨道的混音版本。

首先，我有一个 audioFiles 数组，并使用它来创建一个 wavesurfer 元素数组。

然后我从 wavesurfer 后端为每一个创建一个缓冲区

最后我在这里得到了一些关于下载功能的帮助从 web 下载已用 wavesurfer.js 修改的音频

此时我的问题是，我传递给下载功能的内容似乎格式不正确。我是使用音频的新手，不确定自己在做什么。

如果我将 ctx_buffer 变量传递给另一个问题中的函数（并使用它而不是直接从 pcm 文件获得的缓冲区变量），我将成功下载，但文件为空，尽管它是正确的长度（在上面的长度中省略 *2 将有一个空文件，正好是我原来长度的一半）。

这里的 wavesurfer.js 中有一个 exportPCM() 函数https://wavesurfer-js.org/docs/methods.html但我也不确定它是如何工作的。

编辑

我可以从 URL 访问字节数组文件（float32，big endian），我正在尝试将其转换为 WaveSurfer 可处理的东西，这需要有效的 ArrayBuffer、AudioBuffer 或 wav 文件的 URL。

我得到的最接近的方法是使用 fetch 来获取文件，并尝试将其转换为 ArrayBuffer，但是 WaveSurfer 无法识别，这表示它无法解码数据。

这是我的 JavaScript 代码：

我知道我要解码的文件是有效的音频文件，因为我可以使用以下 python 脚本将其转换为 wav 文件：

关于我能做什么的任何建议？