问题标签 [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 投票
1 回答
935 浏览

node.js - Node.js 和 Wavesurfer.js

到目前为止,我已经能够使用 Node.js 和 Express 将文件提供给我的动态网页,如下所示。

然后链接到公用文件夹中的文件。

Wavesurfer.js 文档声明必须从 url 加载文件

从 URL 加载音频文件:

我不确定我是否理解这意味着什么。或如何使用 node.js 将文件链接到 wavesurfer.js

编辑:

我从链接跨源请求仅支持 HTTP 中发现了这一点。” 加载本地文件时出错

Node.js 或者,如果您需要更灵敏的设置并且已经使用 nodejs...

  1. http-server通过键入安装npm install -g http-server

  2. 进入你的工作目录,你some.html生活的地方

  3. 通过发出启动您的 http 服务器http-server -c-1

这会启动一个 Node.js httpd,它将目录中的文件作为静态文件提供,可从http://localhost:8080

我不能使用快递达到同样的效果吗?

我的代码:

我得到的错误:

不允许启动 AudioContext。它必须在页面上的用户手势之后恢复(或创建)。

从源“null”访问“file:///C:/public/recordings/o.mp3”的 XMLHttpRequest 已被 CORS 策略阻止:跨源请求仅支持协议方案:http、data、chrome、chrome -扩展,https。

0 投票
1 回答
479 浏览

javascript - Web-Audio Api 和 Javascript:从麦克风中获取正确的选择

我正在根据麦克风实时接收的数据进行一些实验并进行一些可视化。

在这种情况下,我想创建这样的可视化: https ://online-voice-recorder.com/es/

或者 Mac OS 录音机 录音机

我在下面有一个完整的 codepen 示例,请查看,但我的问题是我正在使用这个:

对于这种特殊情况,获取峰值并生成波形图是否正确?喜欢wavesurfer 库,或者我可能需要更多地了解音频或使用一些数学知识,我不知道我被卡住了。

这是我的完整代码笔示例: https ://codepen.io/davidtorroija/pen/bZXeqb

已编辑: 添加更多信息:根据 Brad 在我的示例 getByteTimeDomainData() 中更改的答案

我查看了 getByteTimeDomain 的方法,并用于创建示波器可视化。我在这个例子中改成了这个方法,它看起来不像。查看字节数组,当这里没有声音新的 Codepen 示例时,最小值为 100, 但可能是我的实现。 录音波形图 顺便说一句,我正在获取 ByteFrequencyArray 的最大数量,因为我不知道从那里达到峰值的正确策略是什么,也许还有其他方法可以做到这一点?下面的代码示例:

;

0 投票
1 回答
379 浏览

javascript - 如何在 nuxt.js 中导入 wavesurfer?

我想在 nuxt.js 框架中使用wawesurfer插件进行音频可视化。

但我不知道如何导入和使用它?我的应用程序处于通用(ssr)模式。

如果我像这样导入它:

它给我的错误是windows is not defined

如果我在插件目录中创建一个插件并将其导入并将其添加到插件部分的 nuxt.config.js 中,它不起作用并且它给我这个错误消息: wawesurfer is not defined

我应该怎么办?

0 投票
1 回答
1150 浏览

vue.js - 在 nuxt 中出现此错误:[vuex] 不要在突变处理程序之外改变 vuex 存储状态

我正在使用 nuxt.js,我想将当前歌曲时间传递给 vuex。

但传递数据只工作一次。

这是我的数据:

安装:

index.js (vuex):

它只工作一次,之后,我收到此错误消息:

我不知道该怎么办?

0 投票
1 回答
345 浏览

javascript - 如何将 wavesurfer js 与新的 Laravel 项目集成

我希望在我的 laravel 项目中实现 wavesurfer.js 插件,但由于我是 javascript 的完全新手,我什至不知道从哪里开始。

我的音频文件将从我已经设置的 Amazon S3 中提取,但 wavesufer 文档不清楚如何将其添加到我的项目中。我可以将代码直接输入到刀片文件中,还是必须使用 Vue 文件进行设置?

0 投票
0 回答
89 浏览

javascript - 是否可以在 wavesurfer.js 中显示带有波形的 y 轴?

我想知道是否可以在 wavesurfer.js 中的波形上显示 y 轴并锁定 y 轴刻度。

我已将整数 1 设置为 barHeight。但不确定 1 究竟是什么意思。

我正在寻找的是在波形上显示 y 轴或锁定 y 轴。

0 投票
1 回答
989 浏览

javascript - 如何将双通道音频转换为单声道并能够控制每个通道的音量?

我正在尝试在两个耳机中收听 2 声道音频(左右耳机中的音频相同)。

现状:

滑块居中 - 效果很好(两个耳机中的两个通道)。

滑块在右侧 - 效果很好(两个耳机的右声道)。

滑块在左侧 - 不起作用(左声道仅在左耳机中)。

当滑块在左侧时,我只想在两个耳机中听到左声道。有人能帮我吗?

问题

0 投票
1 回答
566 浏览

javascript - 如何检测 WaveSurfer.js 中自动播放何时失败?

我习惯于使用 javascript 媒体承诺来检测自动播放何时失败,如下所述:https ://developers.google.com/web/updates/2017/09/autoplay-policy-changes 。但是如何检测 WaveSurfer.js 中的自动播放失败?

我已经尝试了错误事件,但在这种情况下它似乎没有做任何事情。更奇怪的是,不管它是否真的在播放,play 事件都会触发。

https://jsfiddle.net/mcrockett/k985zjh2/18/

有关示例,请参见我的 jsfiddle。如果通过 Chrome 查看,自动播放通常会失败。

0 投票
1 回答
797 浏览

signal-processing - 负幅值的快速傅里叶变换

使用 wavesurfer 分析鸟鸣数据并通过 FFT 分析得到负振幅,我找不到原因。

我一直在使用 wavesurfer 来分析我关于鸟鸣的论文数据。我用频谱图打开我的数据,然后在频谱部分可以找到频率和幅度(使用 FFT 分析)。我的幅度是负的,但我找不到证明这一点的方法。我不知道为什么会这样,而且我的数据有显着的结果,这意味着一切都需要证明。该软件的论坛不起作用,互联网上几乎没有我的问题的答案。我什至给创作者发了电子邮件寻求帮助。找到连接到窗户的屏幕。

显示 -60.1 dB 幅度的图

0 投票
1 回答
655 浏览

reactjs - 如何在 React Typescript 应用程序中使用 Wavesurfer.js 插件?

我正在尝试在我的 React Typescript 应用程序中使用 Wavesurfer.js 插件。当我尝试导入插件时,我不断收到“找不到模块:无法解析”错误。我猜这与定义插件的类型有关。有谁知道我如何在 React Typescript 中使用这些插件?