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

不才 等级 576 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);
});
收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
webrtc sdp协议
作用:用于扩展SDP。 有两种作用范围:会话级别(sessionlevel)、媒体级别(medialevel)。 媒体级别:媒体描述(m)后面可以跟任意数量的 a 字段,对媒体描述进行扩展。 会话级别:在第一个媒体字段(media field)前,添加的 a 字段是会话级别的。 有如下两种格式: a<attribute a<attribute:
nodejs环境快速操作mysql数据库
github地址 引入依赖包 npm install dmhsqmysqldb可用于腾讯云SCF 云函数 云开发环境 效果如下 简化了mysql的使用 未经本人允许,禁止转载 安装npm install dmhsqmysqldb 使用示例快速操作mysql 错误处理尚未完善 部分错误参考mysql错误返回的均为Prom
分享一个音乐可视化的前端库 audio-visualization
这个库写的很比较简单 图片例子 将数据填入图表 自定义数据显示 简介audiovisualization 是一个通过 WEBAUDIOAPI 实现的实现的音乐可视化的库,通过本库你可以获取到当前音频的音频频谱。 例子 请参考: ./docs/demo.html 或者 使用方法 已支持语法提示1. scrip
python之利用pyecharts可视化(各种图表的绘制)
pyecharts可视化pyecharts是基于Echart图表的一个类库,而Echart是百度开源的一个可视化JavaScript库。简介: pyecharts主要基于web浏览器进行显示,绘制的图形比较
Apowersoft Streaming Audio Recorder(录音精灵)官方中文版V4.3.5.2 | Apowersoft录音精灵官方下载
Apowersoft Streaming Audio Recorder(录音精灵)是一款来自Apowersoft公司的专业级电脑录音软件,能够极大提升用户听觉盛宴的录音工具,支持从各大音乐网站、视频平台及音乐电台录制音频流媒体文件,Apowersoft录音精灵可为用户提供诸如MP3、AAC、FLAC、WMA等在内多样化的输出格式,以便于您可以在任意播放器及便
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
uni-app入门教程(4)组件的基本使用
@toc 前言本文主要介绍了uniapp中的组件,包括四大类:基础组件(scrollview、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。 一、基础组件组件是视
Vue.js——60分钟快速入门
是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
安利一些强无敌的 NPM 软件包
实用工具 Lodashlodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 安装及示例yarn add lodash 不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下// 深度比较两个对象的值是否全相等 import isEqu
Javascript本地存储 - 入门指南
在讲解之前,我们需要明白之间的差别server side storage,并client side storage当涉及到网站和应用程序。服务器端意味着我们使用数据库将数据存储在服务器上,客户端包含JavaScript API,这些API可让您在客户端(在浏览器中)存储数据。什么是本地存储? 简而言之,local storage可以将其与数据库进行比较,只
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按