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

javascript - 尝试在元素尚未呈现时访问 ng-repeat 元素

我将使用 WaveSurfer 库来创建播放列表。考虑 ng-repeat 的每个元素都是一个 wavesurfer 元素。这是我正在做的事情:

这是我用来将每个 div 元素转换为 wavesurfer 元素的 angular 指令:

但是我遇到了错误,因为该元素尚未在 ng-repeat 中呈现:

你能否让我知道这样做的正确方法是什么?

0 投票
1 回答
794 浏览

javascript - Wavesurfer 时间线插件下载已弃用?

我想使用 wavesurfer.js 为数字音频文件添加时间线,不幸的是我的代码在这里不起作用。我可以知道从哪里可以加载我的文件的时间线.js 吗?wavesurfer 时间线插件是否已弃用?

javascript:

错误说 wavesurfer 没有定义。

0 投票
0 回答
646 浏览

javascript - 将文件动态加载到 wavesurfer 插件

您好我想加载音频文件以在浏览器上显示数字信号。我正在使用 wavesurfer.js 来显示数字信号。有人可以帮我显示动态加载的音频文件的数字信号。如何修改我的代码以能够读取系统选择的音频并为其显示数字信号?

脚本:

0 投票
0 回答
672 浏览

javascript - 使用 wavesurfer.js 时加载 mp3 的问题

我想使用 wavesurfer.js 来创建带有光标的音频波形,所以我尝试了演示代码。我将演示代码复制到一个 html 文件中,它可以工作,但是当我想更改 mp3 文件时,它就不再工作了。

在演示代码中,它使用了另一个服务器,如下所示:

加载音频文件的两种方法

但是我只是按照第一种方法编写了代码:

顺便说一句,我把 songname.mp3 和 html 文件放在同一个文件中。

不知道哪里出了问题?请帮忙!

0 投票
2 回答
110 浏览

javascript - 将 node_module 包含到 Ember 组件中

我正在尝试将 wavesurfer 添加到我的应用程序中。我完全按照说明做了。在:https ://www.npmjs.com/package/wavesurfer.js

在我安装凉亭后,我的 node_modules 中有 wavesurfer.js 文件夹

从“wavesurfer.js”导入 WaveSurfer;

理论上 WaveSurfer 类应该在我的组件上可用。但是在我包含上面的代码之后,我有这个错误

我为此杀死了将近一个星期。

如何使该类可用于我的组件

谢谢

0 投票
1 回答
1585 浏览

javascript - 使用 react-app-rewired 将 webpack 配置添加到 react-create-app

警告:我是新手。

我正在开发一个通过纱线使用 react-create-app 的反应应用程序。

我正在尝试使用这些说明安装 react-wavesurfer https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls

我需要以某种方式让 Wavesurfer.js 进入应用程序。这些说明包括对 webpack 配置进行更改,我试图避免弹出。

我发现这个 react-app-rewired 和这篇文章https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/

所以我把它添加到 config-overrides.js

哪个构建,但我仍然无法在具有这些导入的页面中访问 wavesurfer

当我尝试运行 react-app-rewired start

关于如何解决这个问题的任何线索?

0 投票
1 回答
363 浏览

javascript - 多个音频文件的位置相关音频播放

我一直在设计一个基于 html/js 的媒体播放器,其目标是为用户提供一些常见的 DAW 中的简单播放和区域移动功能。我的 ui 由 5 个单独的曲目和播放控件组成。通过使用wavesurfer.js,我已经能够成功地在这些轨道内创建任意数量的wavesurfer 实例/区域,将它们拖放到我想要的任何位置,并播放选定的音频文件。

在我对wavesurfer.js 的实验中,我发现每个实例都有自己的播放头,它指示所选音频文件的当前播放位置,并允许用户在该实例中导航播放。

我的问题是我还想要一个不包含在任何特定实例中的“主”播放头,并且不确定如何处理这个问题。

虽然那里有复杂的网络 DAW,但我还没有找到真正帮助我了解如何以我需要的方式处理音频播放的资源......但我知道它以前已经做过。我已经阅读了 webaudio API 和 wavesurfer.js 文档,除非我在 wavesurfer 的功能中缺少某些东西,否则我假设我需要使用 webaudio API 来实现这个结果 - 我会从定义一个新的 AudioContext 对象开始由所有当前音频文件作为 AudioNodes 组成?

对于多个音频文件/wavesurfer 实例,其播放必须依赖于它们在整个轨道工作区上下文中的用户确定位置,我将如何处理音频播放?

感谢您的任何见解,我很感激。

0 投票
1 回答
140 浏览

javascript - 为波形添加注释

谁能给我一个关于如何使用 wavesurfer.js 在波形中创建注释的提示?就像 SoundCloud 一样。太感谢了!

0 投票
1 回答
641 浏览

reactjs - Wavesurfer 2.0 事件在 React 中的实现

我一直在使用 Wavesurfer 2.0 在 React 中开发音频播放器。我可以创建 wavesurfer 实例并使用方法,但似乎无法使用事件。在下面的代码中,我正在检查正在播放的音频文件是否完成,当它完成时,console.log 部分工作,但是 setState 给出了这个错误:

TypeError:无法读取未定义的属性“setState”

有谁知道处理这个问题的正确方法?是否与尝试在 this.wavesurfer 中使用 this.setState 有关?

0 投票
1 回答
541 浏览

javascript - 如果父显示:阻止 Wavesurfer 不渲染

我遇到了与此处突出显示的问题类似的问题

https://github.com/katspaugh/wavesurfer.js/issues/960

我有 wavesurfer 出现在 React 组件中。如果它是使用其父 display:block 渲染的,那么一切都很好,但是如果它渲染 display:none,那么稍后更改为 display:block 波不会渲染。实际的“wave”元素仍然具有显示“none”的属性

这是wavesurfer代码

是家长

和 CSS