前言

日常使用一些音乐软件的时候，在播放详情页经常可以看到这么一些效果：

 
一般都有各式各样的效果可供切换，并且会发现这些变幻都是跟随着当前的音频同步的，那这个过程是如何转换的呢？

Android中已经提供了音频可视化转换的相关类，基于此转换过程，封装了一个音频可视化视图库——AudioVisualizeView ，封装本库的目的，一方面在于音频数据转换成可视化过程的封装，另一方面则是将这些可视化数据如何多元化地呈现在屏幕面前。由于本库旨在封装数据解析的流程，目前的效果比较简略且种类有限，部分效果预览如下：

SingleVisualize.gif

WaveVisualize.gif

CircleVisualize.gif

NetVisualize.gif

实现思路

Android为我们提供了一个获取音频频率数据的类——Visualizer ，它的使用方式，是传入一个 audioSessionId，通过这个 audioSessionId 可以绑定获取到对应这个id的频率数据，而 audioSessionId 可以通过 Mediaplayer 播放音频后获取，将获取到的频率数据，遍历绘制出来，具体步骤如下：

1.使用 Mediaplayer 播放指定音频文件，获取 audioSessionId；
2.通过 audioSessionId 初始化 Visualizer ，初始化监听器处理采样数据；
3.将采样数据绘制在屏幕上；

实现步骤

1.使用 Mediaplayer 播放指定音频文件，获取 audioSessionId

MediaPlayer mediaPlayer = MediaPlayer.create(mContext, Uri.parse(filePath));
if (mediaPlayer == null) {
        LogUtils.d("mediaPlayer is null");
        return;
}

mediaPlayer.setOnErrorListener(null);
mediaPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
        @Override
        public void onPrepared(MediaPlayer mediaPlayer) {
            mediaPlayer.getAudioSessionId();
        }
});
mediaPlayer.start();

关于 MediaPlayer 播放音频文件不是本篇的重点，这里就不展开阐述了，关键在MediaPlayer的 onPrepared 回调里面通过 getAudioSessionId 获取当前播放的音频的会话id。有了会话id才能去初始化 Visualizer。

2.通过 audioSessionId 初始化 Visualizer ，初始化监听器处理采样数据

Visualizer visualizer = new Visualizer(audioSessionId);

生成Visualizer实例之后，为其设置可视化数据的大小，其范围是Visualizer.getCaptureSizeRange()[0] ~ Visualizer.getCaptureSizeRange()[1]，此处设置为最大值：

visualizer.setCaptureSize(Visualizer.getCaptureSizeRange()[1]);

通过 setDataCaptureListener 为可视化对象设置采样监听数据的回调

visualizer.setDataCaptureListener(new Visualizer.OnDataCaptureListener() {
    @Override
    public void onWaveFormDataCapture(Visualizer visualizer, byte[] bytes, int samplingRate) {
    }

    @Override
    public void onFftDataCapture(Visualizer visualizer, byte[] fft, int samplingRate) {
        float[] model = new float[fft.length / 2 + 1];
        model[0] = (byte) Math.abs(fft[1]);
        int j = 1;

        for (int i = 2; i < mCount *2;) {
            model[j] = (float) Math.hypot(fft[i], fft[i + 1]);
            i += 2;
            j++;
            model[j] = (float) Math.abs(fft[j]);
        }
        //model即为最终用于绘制的数据
    }
}, Visualizer.getMaxCaptureRate() / 2, false, true);

可以看到有四个参数，setDataCaptureListener(Visualizer.OnDataCaptureListener listener, int rate, boolean waveform, boolean fft)，它们的作用分别如下：

listener：回调对象
rate：采样的频率，其范围是0~Visualizer.getMaxCaptureRate()，此处设置为最大值一半。
waveform：是否获取波形信息
fft：是否获取快速傅里叶变换后的数据

waveform 和 fft 这两个参数，分别决定了 listener 中的两个方法是否会回调，再来看看 OnDataCaptureListener 中的两个方法：

onWaveFormDataCapture：波形数据回调
onFftDataCapture：傅里叶数据回调

我们最终采用的是基于傅里叶快速转换后的数据进行绘制，所以我们在 onFftDataCapture 方法中对转换后的数据进行处理，关于傅里叶，简单来讲就是将时域转换为频域的一个过程，时域就是横坐标为时间维度，就是我们平时直观理解的一种维度（习惯以时间为轴看待事物），而频域则是以频率为轴，就比如播放一个音频，频域是将每一个时刻的频率一一呈现出来，类似于下面这张图的过程：

傅里叶转换动图

onFftDataCapture 中返回的byte数组是快速傅里叶转换之后的数据，但我们还需要针对它做以下处理：

1.快速傅里叶变换返回的是512个复数，下标为单是实数，下标为双的是虚数，对每一组复数进行计算即为最终可绘制的数据：

float[] model = new float[fft.length / 2 + 1];
int j = 1;
for (int i = 2; i < mCount*2;) {
    model[j] = (float) Math.hypot(fft[i], fft[i + 1]);
    i += 2;
    j++;
}

2.由于返回的byte数据有可能为负，所以要取绝对值处理：

model[0] = (float) Math.abs(fft[1]);
...
model[j] = (float) Math.abs(fft[j]);

 
最后，还要记得调用 setEnabled 为 true：

visualizer.setEnabled(true);

才能正常回调出FFT数据，另外记得在退出页面的时候，调用 setEnabled(false) 避免下回再次打开的时候出现异常。
 

3.将采样数据绘制在屏幕上

前面已经处理并得到了最终的byte数组，可以针对需要展示的频数进行遍历，比如说绘制最常见的水平线可视化样式（一条横线打底，上面是多条竖线展示不同的频率），如下图：

水平线样式

在View的onDraw里面绘制：

for (int i = 0; i < mSpectrumCount; i++) {
    float startX = getWidth() * i / mSpectrumCount;
    float startY = getHeight() / 2;
    float stopX = getWidth() * i / mSpectrumCount;
    float stopY = getHeight() / 2 - mRawAudioBytes[i];
    canvas.drawLine(startX, startY,stopX, stopY, mPaint);
}

这里 mRawAudioBytes 即上一步处理完成之后的数据，开始播放音频之后，在Visualizer的回调方法会不断返回FFT处理之后的数据，我们在对傅里叶数据处理完成之后不断调用刷新即可：

@Override
public void onFftDataCapture(Visualizer visualizer, byte[] fft, int samplingRate) {
    //....此处省略上一步取绝对值和hypot的处理的代码
    mRawAudioBytes = parseData;
    invalidate();
}

同理，其他的可视化效果，也是基于这样的一个逻辑，可以根据返回的数据绘制自己想要的效果。

其他

以上只是完成了基本的效果，考虑到其可拓展性，定义了FFT数据处理之后的回调接口，如果以上效果皆不满足需求，可以在任意场景实现本库中的 VisualizeCallback 接口，重写 onFftDataCapture 方法，如下：

@Override
public void onFftDataCapture(byte[] parseData) {
      //使用parseData的数据去自定义绘制具体场景的动画        
}

结语

完整代码已传至Github：AudioVisualizeView——一个基于傅里叶快速转换的音频可视化库，目前的效果还有圆形、网状、波浪等效果，后续会继续借鉴常见的一些音频可视化效果进行更新，欢迎issue和star~
 

欢迎关注 Android小Y 的简书，更多Android精选自定义View

『Android自定义View实战』实现一个小清新的弹出式圆环菜单
『Android自定义View实战』玩转PathMeasure之自定义支付结果动画
『Android自定义View实战』自定义弧形旋转菜单栏——卫星菜单
『Android自定义View实战』Android自定义带侧滑菜单的二维表格控件

GitHub：GitHubZJY
简 书：Android小Y
在GitHub上建了一个炫酷自定义View的集合ZJYWidget，主要是平时实现的一些实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步~