分享一个音乐可视化的前端库 audio-visualization

不才 等级 1320 0 1

这个库写的很比较简单

图片例子

将数据填入图表 分享一个音乐可视化的前端库 audio-visualization 自定义数据显示 分享一个音乐可视化的前端库 audio-visualization

简介

audio-visualization 是一个通过 WEB-AUDIO-API 实现的实现的音乐可视化的库,通过本库你可以获取到当前音频的音频频谱。

例子

请参考: ./docs/demo.html 或者 点击我

使用方法 已支持语法提示

  1. script引入
    下载index.js 正常引入
  2. require
    npm install audio-visualization
    require('audio-visualization');
  3. webpack / vue
    import AV from 'audio-visualization';
const av = new AudioVisualization({
  url: './1.mp3',
  loop: false,
});
// 调用 setVoiceSize 可设置 声音大小
av.setVoiceSize(100);
// 调用 setFftSzie 可设置 frequency长度 
av.setFftSzie(128);
// 调用 play 传入 回调函数 frequency 可获取到频谱
av.play(function ({frequency}) {
  console.log(frequency);
});
收藏
评论区

相关推荐

分享一个音乐可视化的前端库 audio-visualization
这个库写的很比较简单 图片例子 将数据填入图表 自定义数据显示 简介audiovisualization 是一个通过 WEBAUDIOAPI 实现的实现的音乐可视化的库,通过本库你可以获取到当前音频的音频频谱。 例子 请参考: ./docs/demo.html 或者 使用方法 已支持语法提示1. scrip
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
Java 各种文件类型的Content Type
contentType = { "load": "text/html", "123": "application/vnd.lotus-1-2-3", "3ds": "image/x-3ds", "3g2": "video/3gpp", "3ga": "video/3gpp", "3gp": "video/3gpp", "3gpp"
Unity 为什么有时候播放音乐(音效)会没有声音
1.问题描述 ------ 昨晚,我遇到的情况如下: 1.MainCamera里有Audio Source,并且在循环播放音乐 2.在其他的GameObject中也新增一个Audio Source,在某个时机播放音效 3.GameObject中播放音效没有反应(没声音) 于是我猜测是MainCamera中的Audio Source有问题,把它禁用。
10 个非常有用的 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外,你甚至可以让SVG动起来,通过使用一些javascript类库。下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级。 1\. Vivus --------- [Vivus](https://www.oschina.net/action/
10款强大的开源 Javascript 图表库
**1、ECharts** ECharts 由百度前端技术部开发的,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
30款精心挑选的JavaScript库和工具(一)
JavaScript库和工具凭借其便捷和易于使用的特点,使开发人员和设计人员的生活变得简单、轻松许多。你投入得多,它回报给你的也越多。这便是为何JavaScript库和工具需求量很大的原因。 当设计人员和开发人员真正快速便捷的使用JavaScript类库和工具的同时,他们的生活也就变得更轻松、简单。网页设计和发展变化相当迅速,所以拥有最新的工具是必不可少的
Android录制和播放AudioRecord和AudioTrack
package com.esa.audio; import android.media.AudioFormat; import android.media.AudioManager; import android.media.AudioRecord; import android.media.AudioTra
CSRF 令牌 & JavaScript
当构建由 JavaScript 驱动的应用时,可以方便地让 JavaScript HTTP 函数库发起每一个请求时自动附上 CSRF 令牌。默认情况下, `resources/js/bootstrap.js` 文件会用 Axios HTTP 函数库注册的 `csrf-token` meta 标签中的值。如果你不使用这个函数库,你需要手动为你的应用配置此行为。
Flutter开发常用第三方插件持续更新
**2020.5.25更新** 权限处理 [permission\_handler](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FBaseflow%2Fflutter-permission-handler) 录音 [audio\_recorder](ht
GoJS用于HTML图表的JavaScript库
[GoJS](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3108)是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canv
HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流。用的比较多音频格式是.mp3。 <audio>标签常用属性如下表 属性 值 描述 autoplay autoplay 添加该属性后,音频会自动播放 controls controls 设置后,显示控件,如播放按钮、音量 loop loop 添加
JAVASCRIPT FUNCTIONS 详解
**JAVASCRIPT FUNCTIONS** ------------------------ 本文是@堂主 对《Pro JavaScript with Mootools》一书的第二章函数部分知识点讲解的翻译。该书的作者 Mark Joseph Obcena 是 Mootools 库的作者和目前开发团队的 Leader。虽然本篇文章实际译于 2012
Qt Multimedia 模块类如何使用?(表格)
qt 多媒体模块介绍 ========== 类名 英文描述 中文描述 QAudioBuffer Represents a collection of audio samples with a specific format and sample rate 表示具有特定格式和采样率的音频样本的集合 QAudioBuffer::StereoFram
总结100+前端优质库,让你成为前端百事通
❝1年多时间, 陆陆续续整理了一些常用且实用的开源项目, 方便大家更高效的学习和工作.❞js相关库js 常用工具类「lodash」 一个一致性、模块化、高性能的 JavaScript 实用工具库。「xijs」 一款面向复杂业务场景的 javascript 工具库「ramda」 一个很重要的库,提供了许多有用的方法,每个 JavaScript 程序员都应该掌握