0
点赞
收藏
分享

微信扫一扫

Android Visualizer音频可视化——让你的音频跳动起来

前言

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


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

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





由于篇幅有限,就不全部罗列出来了,目前实现的只是一个基本的效果,还有很多可以优化的细节,后续会继续完善。
 

实现思路

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

 

实现步骤

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),它们的作用分别如下:

waveformfft 这两个参数,分别决定了 listener 中的两个方法是否会回调,再来看看 OnDataCaptureListener 中的两个方法:

我们最终采用的是基于傅里叶快速转换后的数据进行绘制,所以我们在 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自定义带侧滑菜单的二维表格控件

举报

相关推荐

0 条评论