android示波器，音频频谱绘制

137 阅读 0 评论 91 点赞

我是靠谱客的博主健壮大门，这篇文章主要介绍android示波器，音频频谱绘制，现在分享给大家，希望可以做个参考。

很久没写过博客作技术总结了，主要是做着这行不比做业务或者其他的，会越做越没激情，慢慢的让自己丧失斗志，其他的话就不多说了，在工作中就能慢慢体会到了，今天将对音频播放方面的视图绘制作一次总结和分享，如果有这方面经验或者有更好idea的同学欢迎出来指正和分享。
下面就说说这个当播放音乐时，我们将对音频数据进行捕获，然后进行一个界面的绘制，这里我只是做了几种类型的绘制，这里只说其中一种类型，其他2个都很简单的算法就不论述了；
就来说说这个柱形绘制吧，先上代码，这里只有一个界面，点击可切换显示模式，先看看Activity的代码:

复制代码

package com.asir.flashview;

import android.annotation.SuppressLint; 
import android.app.Activity;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.media.audiofx.Visualizer;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.LinearLayout;

@SuppressLint("NewApi")
public class FlashActivity extends Activity {
    // 定义播放声音的MediaPlayer
    private MediaPlayer mPlayer;
    // 定义系统的示波器
    private Visualizer mVisualizer;
    private LinearLayout layout;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 设置控制音乐声音
        setVolumeControlStream(AudioManager.STREAM_MUSIC);
        layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        // 创建MediaPlayer对象
        mPlayer = MediaPlayer.create(this, R.raw.test);
        // 初始化示波器
        setupVisualizer();
        // 开发播放音乐
        mPlayer.start();
    }

private void setupVisualizer() {
        // 创建PlayFlashView组件，用于显示波形图
        final PlayFlashView mVisualizerView = new PlayFlashView(this);
        mVisualizerView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        // 将MyVisualizerView组件添加到layout容器中
        layout.addView(mVisualizerView);
        // 以MediaPlayer的AudioSessionId创建Visualizer
        // 相当于设置Visualizer负责显示该MediaPlayer的音频数据
        mVisualizer = new Visualizer(mPlayer.getAudioSessionId());
        mVisualizer.setCaptureSize(Visualizer.getCaptureSizeRange()[1]);
        // 为mVisualizer设置监听器
        mVisualizer.setDataCaptureListener(new Visualizer.OnDataCaptureListener() {
            @Override
            public void onFftDataCapture(Visualizer visualizer, byte[] fft, int samplingRate) {
                // 用waveform波形数据更新mVisualizerView组件
                mVisualizerView.updateVisualizer(fft);
            }

@Override
            public void onWaveFormDataCapture(Visualizer visualizer, byte[] waveform, int samplingRate) {
                // 用waveform波形数据更新mVisualizerView组件
                mVisualizerView.updateVisualizer(waveform);
            }
        }, Visualizer.getMaxCaptureRate() / 2, true, false);
        mVisualizer.setEnabled(true);
    }

@Override
    protected void onPause() {
        super.onPause();
        if (isFinishing() && mPlayer != null) {
            // 释放所有对象
            mVisualizer.release();
            mPlayer.release();
            mPlayer = null;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
package com.asir.flashview;

import android.annotation.SuppressLint; 
import android.app.Activity;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.media.audiofx.Visualizer;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.LinearLayout;

@SuppressLint("NewApi")
public class FlashActivity extends Activity {
    // 定义播放声音的MediaPlayer
    private MediaPlayer mPlayer;
    // 定义系统的示波器
    private Visualizer mVisualizer;
    private LinearLayout layout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 设置控制音乐声音
        setVolumeControlStream(AudioManager.STREAM_MUSIC);
        layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        // 创建MediaPlayer对象
        mPlayer = MediaPlayer.create(this, R.raw.test);
        // 初始化示波器
        setupVisualizer();
        // 开发播放音乐
        mPlayer.start();
    }

    private void setupVisualizer() {
        // 创建PlayFlashView组件，用于显示波形图
        final PlayFlashView mVisualizerView = new PlayFlashView(this);
        mVisualizerView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        // 将MyVisualizerView组件添加到layout容器中
        layout.addView(mVisualizerView);
        // 以MediaPlayer的AudioSessionId创建Visualizer
        // 相当于设置Visualizer负责显示该MediaPlayer的音频数据
        mVisualizer = new Visualizer(mPlayer.getAudioSessionId());
        mVisualizer.setCaptureSize(Visualizer.getCaptureSizeRange()[1]);
        // 为mVisualizer设置监听器
        mVisualizer.setDataCaptureListener(new Visualizer.OnDataCaptureListener() {
            @Override
            public void onFftDataCapture(Visualizer visualizer, byte[] fft, int samplingRate) {
                // 用waveform波形数据更新mVisualizerView组件
                mVisualizerView.updateVisualizer(fft);
            }

            @Override
            public void onWaveFormDataCapture(Visualizer visualizer, byte[] waveform, int samplingRate) {
                // 用waveform波形数据更新mVisualizerView组件
                mVisualizerView.updateVisualizer(waveform);
            }
        }, Visualizer.getMaxCaptureRate() / 2, true, false);
        mVisualizer.setEnabled(true);
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (isFinishing() && mPlayer != null) {
            // 释放所有对象
            mVisualizer.release();
            mPlayer.release();
            mPlayer = null;
        }
    }
}

然后再自定义一个view根据音频数据来绘制视图就好

复制代码

package com.asir.flashview;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 设置控制音乐声音
        setVolumeControlStream(AudioManager.STREAM_MUSIC);
        layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        // 创建MediaPlayer对象
        mPlayer = MediaPlayer.create(this, R.raw.beautiful);
        // 初始化示波器
        setupVisualizer();
        // 开发播放音乐
        mPlayer.start();
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
package com.asir.flashview;

import android.annotation.SuppressLint; 
import android.app.Activity;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.media.audiofx.Visualizer;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.LinearLayout;

@SuppressLint("NewApi")
public class FlashActivity extends Activity {
    // 定义播放声音的MediaPlayer
    private MediaPlayer mPlayer;
    // 定义系统的示波器
    private Visualizer mVisualizer;
    private LinearLayout layout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 设置控制音乐声音
        setVolumeControlStream(AudioManager.STREAM_MUSIC);
        layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        // 创建MediaPlayer对象
        mPlayer = MediaPlayer.create(this, R.raw.beautiful);
        // 初始化示波器
        setupVisualizer();
        // 开发播放音乐
        mPlayer.start();
    }

    private void setupVisualizer() {
        // 创建PlayFlashView组件，用于显示波形图
        final PlayFlashView mVisualizerView = new PlayFlashView(this);
        mVisualizerView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        // 将MyVisualizerView组件添加到layout容器中
        layout.addView(mVisualizerView);
        // 以MediaPlayer的AudioSessionId创建Visualizer
        // 相当于设置Visualizer负责显示该MediaPlayer的音频数据
        mVisualizer = new Visualizer(mPlayer.getAudioSessionId());
        mVisualizer.setCaptureSize(Visualizer.getCaptureSizeRange()[1]);
        // 为mVisualizer设置监听器
        mVisualizer.setDataCaptureListener(new Visualizer.OnDataCaptureListener() {
            @Override
            public void onFftDataCapture(Visualizer visualizer, byte[] fft, int samplingRate) {
                // 用waveform波形数据更新mVisualizerView组件
                mVisualizerView.updateVisualizer(fft);
            }

            @Override
            public void onWaveFormDataCapture(Visualizer visualizer, byte[] waveform, int samplingRate) {
                // 用waveform波形数据更新mVisualizerView组件
                mVisualizerView.updateVisualizer(waveform);
            }
        }, Visualizer.getMaxCaptureRate() / 2, true, false);
        mVisualizer.setEnabled(true);
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (isFinishing() && mPlayer != null) {
            // 释放所有对象
            mVisualizer.release();
            mPlayer.release();
            mPlayer = null;
        }
    }
}

没用gif录制，就简单上个效果图好了：
这里写图片描述

大概就是这么一个显示方式。
首先先对代码思路做个解析，也方便以后自己回来使用时快速理清这个使用方法。先定义16个柱子即是16个音频数据，从回调方法中返回回来的数据长度是1024个字节，这边就利用最开始的16个字节来绘制就好了,定义两组音频bytes，一组是当前获取到的最新的字节数组，另外一组是上一次获取到的字节数组，这些个获取到的字节数中的每一个字节会根据音乐播放时频率的变化而变化，这边用最新的数据来绘制柱形图，然后用2组bytes数据来交替绘制柱子上方的横线，逻辑就这么一点，具体在代码中也注释的很清楚。主要是一个位置的问题，柱子和线的左右都可以通过屏幕宽度固定好，高度跳动效果就用这个bytes就可以了，然后加一个开关，当音乐停止播放时就停止当前的绘制，就这么点东西，至于定义画笔，初始化数据什么的，我觉得也还真是没什么好说的了，到此柱形显示方式就算是实现了吧，
大家发挥自己的逻辑思维和使用数学不同算法去想象绘制更多炫丽的效果吧，到时记得也分享给我就好了
最后还有一个是音频播放时的权限：