音频可视化

今天给大家介绍一个音频可视化的组件，使用vue编写的一个web端使用组件。vue-audio-visual

首先解释一下什么叫做音频可视化，

通过获取频率、波形和其他来自声源的数据，将其转换成图形或图像在屏幕上显示出来，再进行交互处理。

注意关键词，频率，波形，其他来自声源的数据， 转化为图形显示在屏幕上。

要解释声音中的频率，波形，可能要耗费很多时间，不过所幸已经有人做过全面的解释了，点击查看， 解释这些名词不是我们本篇文章的主要目的。本篇的主要目的是使用vue-audio-visual组件做一些音频可视化的效果。

下面先来看一些音频可视化的效果图。

下面这两个是使用vue-audio-visual来实现的

下面来介绍一下，具体如何使用vue-audio-visual来实现一个音频可视化
首先需要有一个vue项目，可以使用vue-cli来创建
然后在项目中安装vue-audio-visual 使用以下命令

npm install --save vue-audio-visual

然后在项目入口主文件main.js

import Vue from 'vue'
import AudioVisual from 'vue-audio-visual'

Vue.use(AudioVisual)

全局引用组件后，就可以直接这样使用

<av-bars
  audio-src="/static/bach.mp3">
</av-bars>

mp3资源可以使用这个链接来下载一个 http://mczaiyun.top/data/file_example_MP3_1MG.mp3
目前该组件一种支持四种可视化

该库的组件入参配置