Android 音乐可视化的炫酷实现

Android

2023-11-19 16:14:50

音乐可视化一直是我的心头好，巧的是最近工作正好碰上这个需求。我特地整理了一下，用 Android 实现了一个酷炫的音乐可视化播放器，准备拿出来和大家分享。

声音的本质

在深入了解音乐可视化之前，我们先来回顾一下声音的基本原理。我们听到的声音，从物理角度来说，是由物体振动产生的声波，它在空气中传播，振动人的耳膜，然后被大脑处理为声音。

振幅决定了我们主观感受到的声音大小（也叫响度），频率则决定了声音的高低（高音、低音）。频率越高，声音就越高；频率越低，声音就越低。

Android 音乐可视化实现

有了这些基础知识，我们就可以开始实现 Android 音乐可视化播放器了。

第一步：初始化

首先，我们需要导入必要的库和声明变量。

import android.media.MediaPlayer;
import android.media.audiofx.Visualizer;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MusicVisualizerActivity extends AppCompatActivity {

    private MediaPlayer mediaPlayer;
    private Visualizer visualizer;

    private Button playButton;
    private LinearLayout visualizerView;
}

第二步：创建可视化视图

接下来，我们创建一个 LinearLayout 作为可视化视图，并在其中添加多个 View，每个 View 都代表一个频率范围。

private void createVisualizerView() {
    visualizerView = new LinearLayout(this);
    visualizerView.setOrientation(LinearLayout.HORIZONTAL);

    for (int i = 0; i < NUM_BANDS; i++) {
        View view = new View(this);
        view.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
        visualizerView.addView(view);
    }
}

第三步：连接可视化器

现在，我们需要连接 Visualizer 到媒体播放器。

private void connectVisualizer() {
    visualizer = new Visualizer(mediaPlayer.getAudioSessionId());
    visualizer.setDataCaptureListener(
            new Visualizer.OnDataCaptureListener() {
                @Override
                public void onWaveFormDataCapture(Visualizer visualizer, byte[] waveform, int samplingRate) {
                    // 更新可视化视图
                }
            },
            Visualizer.getMaxCaptureRate() / 2,
            false,
            true
    );
    visualizer.setEnabled(true);
}

第四步：更新可视化视图

每当有新的音频数据时，Visualizer 都会触发一个回调。我们利用这个回调来更新可视化视图。

private void updateVisualizerView(byte[] waveform) {
    for (int i = 0; i < NUM_BANDS; i++) {
        View view = visualizerView.getChildAt(i);
        view.setLayoutParams(
                new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.FILL_PARENT,
                        (int) (waveform[i] * AMPLITUDE_SCALE)
                )
        );
    }
}