jjzjj

wavesurfer

全部标签

javascript - 如何仅加载波形并等待用户单击 'play' 以在 Wavesurfer-js 上下载音频?

在我的服务器上,我使用Audiowaveform从我的音频文件生成JSON数据。在前端我使用Wavesurfer-JS根据之前的JSON数据绘制波形。问题是在页面准备好时,Wavesurfer-JS一直在后台下载音频文件(不仅是在用户点击播放按钮时)。This是我的尝试。这是最重要的部分:varwavesurfer=WaveSurfer.create({container:'#waveform',waveColor:'grey',backend:'MediaElement',mediaType:'audio',progressColor:'red',cursorColor:'#fff'

javascript - 使用 wavesurfer.js 为 CSS 属性设置动画

wavesurfer.js非常适合从音频文件渲染波形,但我想知道是否可以将任何CSS属性设置为波形/频谱图的振幅/频率的动画,由wavesurfer.js生成?是否有一种变量可以分配给另一个参数(例如:的不透明度)? 最佳答案 查看wavesurfer.js,可以得到AnalyserNode使用wavesurfer.backend.analyser。注意:您必须检查analyser是否是AnalyserNode的一个实例。只有当浏览器支持WebAudioAPI时才会这样。.从AnalyserNode你可以得到AnalyserNode

javascript - 在 Electron 中打开本地文件并在 wavesurfer.js 中渲染

我正在开发一个用Electron构建的应用程序,它应该与wavesurfer.js一起工作以显示代表音频文件的波形。但是,我无法使用fs模块打开文件并通过Blob将文件内容推送到wavesurfer。文件加载,一切似乎都正常,但在解码wavesurfer时显示Errordecodingaudiobuffer。我认为有两件事可能会影响这一点:fs.readFile函数将编码作为第二个参数Blob构造函数将选项对象作为第二个参数,您可以在其中通过type属性定义mimetype然而,到目前为止,这两种方法都未能解决问题。我希望有人有解决方案。(也可能是fs.readFile函数完全是错误的

javascript - HTML5 网络音频 API wavesurfer.js 在大型 mp3 文件上崩溃

我正计划在我的项目中使用wavesurfer.js,所以我查看了http://wavesurfer-js.org上的演示。我将一个大的mp3文件(大约2小时)放到请求文件的页面中间。它似乎想要加载它,但过了一会儿Chrome出现错误。它不会崩溃,只是选项卡失败。对于较小的文件,单曲,似乎还可以。因此,html5网络音频或websurfer.js库似乎存在一些限制,但我不确定。有人有什么想法吗? 最佳答案 wavesurfer.jsGitHub:LargeMP3filescauseDOMException12Sorrythatitta

javascript - HTML5 网络音频 API wavesurfer.js 在大型 mp3 文件上崩溃

我正计划在我的项目中使用wavesurfer.js,所以我查看了http://wavesurfer-js.org上的演示。我将一个大的mp3文件(大约2小时)放到请求文件的页面中间。它似乎想要加载它,但过了一会儿Chrome出现错误。它不会崩溃,只是选项卡失败。对于较小的文件,单曲,似乎还可以。因此,html5网络音频或websurfer.js库似乎存在一些限制,但我不确定。有人有什么想法吗? 最佳答案 wavesurfer.jsGitHub:LargeMP3filescauseDOMException12Sorrythatitta

javascript - 使用网络音频 api 和 wavesurfer.js 剪切和粘贴音频

我目前正在尝试制作一个网络编辑器,允许用户轻松调整其音频文件的基本设置,作为一个插件,我集成了wavesurfer.js,因为它具有非常简洁的跨浏览器波形解决方案。在为功能的必备列表编制索引后,我决定剪切和粘贴对于使该产品正常工作至关重要,但是在花费数小时试图弄清楚如何在现有库中实现它甚至开始从头开始重建wavesurfer.js功能以理解我尚未成功的逻辑。我的问题是,是否有人可以给我一些关于如何开始构建剪切和粘贴功能的指示,或者甚至是一个示例,我将不胜感激。提前致谢!wavesurfer插件:http://wavesurfer-js.org采摘网页编辑器http://plucked.

javascript - 使用网络音频 api 和 wavesurfer.js 剪切和粘贴音频

我目前正在尝试制作一个网络编辑器,允许用户轻松调整其音频文件的基本设置,作为一个插件,我集成了wavesurfer.js,因为它具有非常简洁的跨浏览器波形解决方案。在为功能的必备列表编制索引后,我决定剪切和粘贴对于使该产品正常工作至关重要,但是在花费数小时试图弄清楚如何在现有库中实现它甚至开始从头开始重建wavesurfer.js功能以理解我尚未成功的逻辑。我的问题是,是否有人可以给我一些关于如何开始构建剪切和粘贴功能的指示,或者甚至是一个示例,我将不胜感激。提前致谢!wavesurfer插件:http://wavesurfer-js.org采摘网页编辑器http://plucked.

vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】

安装wavesurfer.jscnpmiwavesurfer.js--save无cnpm的先运行npmicnpm-g全局安装cnpm绘制音频波形图常用的配置参数详见注释。template>divstyle="padding:30px">divref="waveform_Ref">div>divstyle="padding:30px">el-buttontype="primary"size="small"icon="el-icon-video-play"@click="playMusic"v-if="!playing">播放el-button>el-buttonv-if="playing"typ

vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】

安装wavesurfer.jscnpmiwavesurfer.js--save无cnpm的先运行npmicnpm-g全局安装cnpm绘制音频波形图常用的配置参数详见注释。template>divstyle="padding:30px">divref="waveform_Ref">div>divstyle="padding:30px">el-buttontype="primary"size="small"icon="el-icon-video-play"@click="playMusic"v-if="!playing">播放el-button>el-buttonv-if="playing"typ

wavesurfer.js基本使用

wavesurfer是一个可定制的音频波形可视化,建立在AudioAPI和HTML5Canvas之上。基本使用:body>scriptsrc="https://unpkg.com/wavesurfer.js">/script>divid="waveform">/div>script>varwavesurfer=WaveSurfer.create({container:'#waveform',waveColor:'violet',progressColor:'purple'});//接收传入的音频wavesurfer.load('./test.mp3');//事件wavesurfer.on('r
12