问题标签 [wavesurfer.js]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
191 浏览

web-audio-api - 如何在 wavesurfer 中获得单独的分析器来处理立体声通道

我在 react 应用程序中使用 wavesurfer.js 来播放音频文件,我想独立获取每个立体声通道的频率数据,以便实现立体声 VU 表。

我正在使用 wavesurfer 实例的 audioprocess 事件,如下所示。

这工作正常,但似乎是两个通道的频率响应。我怎样才能得到两个分析器,每个分析器都只是立体声通道之一。

0 投票
1 回答
579 浏览

mobile-safari - 使用 wavesurfer.js,如何在加载波形后创建 AudioContext?

我有:

iOS safari,这不会播放。显然,我需要在用户操作之后创建一个 AudioContext。所以我可以添加一个带有click事件的按钮来触发它。但我希望波形在负载时显示。

0 投票
1 回答
399 浏览

javascript - 单击时使用 HTML 元素更改 Javascript 变量值 (wavesurfer.js)

我正在使用 Wavesurfer.js 来可视化来自 . 当我单击 HTML 元素时,有没有办法使用 jQuery 或 Javascript 来动态更改加载的音频文件?

我能够可视化单个文件,但不知道如何动态更改加载的文件。

这是我页脚中的 Wavesurfer.js 实例

我想在点击时用 HTML 字符串替换加载的文件(wavesurfer.load)。我正在使用 Wordpress 循环歌曲结果,每个都有一个 URL 打印在一个带有“move_to_wavesurfer”类的段落标签中。所以,当我点击歌曲时,我想用段落标签值替换 wavesurfer.load 值。

这是要注入的 HTML

0 投票
1 回答
66 浏览

javascript - 为什么我在玩 wavesurfer.js 时有 2 个波形?

我有:

这很好用: 在此处输入图像描述

但是当我播放时,会显示另一个波形: 在此处输入图像描述

我究竟做错了什么?

0 投票
0 回答
295 浏览

angular - Wavesurfer.js 无法识别波形容器

我正在使用带角度的wavesurfer,我试图将波形容器放在带有*ngIf和*ngFor的html标签块中,当我运行项目时,角度给了我这样的错误消息“找不到容器元素” . 我现在想要做的是将波形容器放在该 html 代码块中但仍然可以播放音频的方法。更多信息(我提到的 html 代码块是音频播放器中的元素,如专辑封面、歌曲名称、艺术家姓名,由从 GET 服务获取数据的数据列表的 *ngFor 呈现)。

我试图将容器移到代码块之外,一切正常,但我想要在这些代码块内运行

这是 wavesurfer 的容器:

这是我想要围绕它的代码块:

我是角度的新手,我希望你们能帮助克服这个问题!谢了!

0 投票
1 回答
393 浏览

javascript - 暂停所有未点击的播放器(waversurfer+Drupal)

[编辑:我自己 FITFO,大声笑 - 请参阅我在这里写的回复]

好的,所以我已经为此疯狂了好几个星期……</p>

我的 Drupal 站点上有多个 Wavesurfer 播放器实例。当我单击一个“播放”时,我希望任何其他当前正在播放的 Wavesurfer 实例暂停。

我已经尝试了我能找到的一切,但我无法让它工作。

这是 Drupal 实现 Wavesurfer 的方式:

这就是我目前试图暂停所有其他人的方式:

看来这行不通(一直在阅读 Drupal.behaviours 并尝试修改该部分,也没有运气。

我也尝试过让 PlayPause 函数在单击时通过每个播放器运行,如下所示:

……或在这里:

但所有这些对我都不起作用……有人知道如何帮助我解决这个问题吗?会救我的命!!!

0 投票
1 回答
166 浏览

angular - 使用 Angular 和 nginx 我收到错误 Uncaught TypeError: Super expression must be null or a function

我看到很多人对此有疑问,但几乎所有人似乎都在使用 react。这是我在 Angular (8.2.9) 和 nginx 中的第一个项目。我从事该项目已有一段时间了,仅使用 ng serve 时效果很好,但是在进行产品构建并在 nginx 上提供服务后出现此错误。它在 main-es2015... 文件中。如果我从生成的 index.html 文件中注释掉这个脚本,它至少会加载 index.html 文件而不会出错。

通过查看有关此错误的问题,react 似乎主要是关于错误地扩展类或循环继承。我经历了所有的进口,他们似乎是正确的。唯一不同的是 wavesurfer.js 包。导入 wavesurfer.js 的类型后,我必须使用

这似乎在本地工作正常,所以不确定这是我的问题,但它似乎是唯一不同于标准导入的导入。

不知道从哪里开始寻找。如果有人对从哪里开始寻找或如何确定究竟是什么引发了这个错误有一些想法,我将不胜感激。


解决了

最后确实将其缩小到 wavesurfer.js 的导入。在尝试了一天不同的导入、编译器标志等之后,它归结为只是将我的导入语句更改为:

似乎使用 ng serve 在本地工作,在 ng build --prod 之后使用 nginx 服务。

0 投票
0 回答
231 浏览

javascript - React、webpack 和 Wavesurfer.js

我正在尝试使用 npmreact-wavesurfer包,但得到错误

这似乎是因为 wavesurfer 设置不正确。github 上的“先决条件和常见陷阱”页面指出“WaveSurfer 需要是一个全局可访问的变量”。

我的 react 项目是用创建的,create-react-app所以我没有 webpack 配置文件。 如何包含这些 wavesurfer 插件?

注意: 这个问题问的是同样的事情,但唯一的答案是直接使用非反应wavesurfer.js包。我宁愿使用react-wavesurfer.

0 投票
1 回答
2911 浏览

reactjs - 如何在 React 中使用 wavesurfer.js?

我正在尝试在我的反应应用程序中使用 wavesurfer.js 渲染音频文件。我是个菜鸟,我想知道为什么我总是收到“找不到容器元素”消息。

简而言之,这是我需要知道的。

先感谢您!

0 投票
1 回答
56 浏览

javascript - 如何在客户端合并两个音频文件。(甚至可能是服务器端)

(在 React.js 中工作)

你好开发人员。我现在正在开发一个音乐聊天应用程序,用户可以在其中收听音频文件,然后应该能够录制该音频文件。该逻辑将第一个音频文件和配音合并在一起,以便用户随后可以将合并的音频发送给其他用户。

音频将被发送到我的服务器(MongoDB) - 然后文件将被存储并分发给 user2。

我正在寻找最简单的方法来做到这一点。

为了在聊天中播放音频文件,我正在使用 wavesurfer.js。

我还没有找到很多关于整合音频文件的信息,并且认为他的某个人可能知道一些事情。

提前感谢您并感谢您的阅读。