显示音频波形

Question

我在android中制作了一个音乐应用程序.这个音乐列表来自服务器端.我不知道如何在android中显示音频波形？比如在soundcloud网站上.我在下面附上了图片.

Answer 1

也许,您可以在没有库的情况下实现此功能,当然,如果您只想要音频样本的可视化.例如:

public class PlayerVisualizerView extends View {

    /**
     * constant value for Height of the bar
     */
    public static final int VISUALIZER_HEIGHT = 28;

    /**
     * bytes array converted from file.
     */
    private byte[] bytes;

    /**
     * Percentage of audio sample scale
     * Should updated dynamically while audioPlayer is played
     */
    private float denseness;

    /**
     * Canvas painting for sample scale, filling played part of audio sample
     */
    private Paint playedStatePainting = new Paint();
    /**
     * Canvas painting for sample scale, filling not played part of audio sample
     */
    private Paint notPlayedStatePainting = new Paint();

    private int width;
    private int height;

    public PlayerVisualizerView(Context context) {
        super(context);
        init();
    }

    public PlayerVisualizerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        bytes = null;

        playedStatePainting.setStrokeWidth(1f);
        playedStatePainting.setAntiAlias(true);
        playedStatePainting.setColor(ContextCompat.getColor(getContext(), R.color.gray));
        notPlayedStatePainting.setStrokeWidth(1f);
        notPlayedStatePainting.setAntiAlias(true);
        notPlayedStatePainting.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
    }

    /**
     * update and redraw Visualizer view
     */
    public void updateVisualizer(byte[] bytes) {
        this.bytes = bytes;
        invalidate();
    }

    /**
     * Update player percent. 0 - file not played, 1 - full played
     *
     * @param percent
     */
    public void updatePlayerPercent(float percent) {
        denseness = (int) Math.ceil(width * percent);
        if (denseness < 0) {
            denseness = 0;
        } else if (denseness > width) {
            denseness = width;
        }
        invalidate();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (bytes == null || width == 0) {
            return;
        }
        float totalBarsCount = width / dp(3);
        if (totalBarsCount <= 0.1f) {
            return;
        }
        byte value;
        int samplesCount = (bytes.length * 8 / 5);
        float samplesPerBar = samplesCount / totalBarsCount;
        float barCounter = 0;
        int nextBarNum = 0;

        int y = (height - dp(VISUALIZER_HEIGHT)) / 2;
        int barNum = 0;
        int lastBarNum;
        int drawBarCount;

        for (int a = 0; a < samplesCount; a++) {
            if (a != nextBarNum) {
                continue;
            }
            drawBarCount = 0;
            lastBarNum = nextBarNum;
            while (lastBarNum == nextBarNum) {
                barCounter += samplesPerBar;
                nextBarNum = (int) barCounter;
                drawBarCount++;
            }

            int bitPointer = a * 5;
            int byteNum = bitPointer / Byte.SIZE;
            int byteBitOffset = bitPointer - byteNum * Byte.SIZE;
            int currentByteCount = Byte.SIZE - byteBitOffset;
            int nextByteRest = 5 - currentByteCount;
            value = (byte) ((bytes[byteNum] >> byteBitOffset) & ((2 << (Math.min(5, currentByteCount) - 1)) - 1));
            if (nextByteRest > 0) {
                value <<= nextByteRest;
                value |= bytes[byteNum + 1] & ((2 << (nextByteRest - 1)) - 1);
            }

            for (int b = 0; b < drawBarCount; b++) {
                int x = barNum * dp(3);
                float left = x;
                float top = y + dp(VISUALIZER_HEIGHT - Math.max(1, VISUALIZER_HEIGHT * value / 31.0f));
                float right = x + dp(2);
                float bottom = y + dp(VISUALIZER_HEIGHT);
                if (x < denseness && x + dp(2) < denseness) {
                    canvas.drawRect(left, top, right, bottom, notPlayedStatePainting);
                } else {
                    canvas.drawRect(left, top, right, bottom, playedStatePainting);
                    if (x < denseness) {
                        canvas.drawRect(left, top, right, bottom, notPlayedStatePainting);
                    }
                }
                barNum++;
            }
        }
    }

    public int dp(float value) {
        if (value == 0) {
            return 0;
        }
        return (int) Math.ceil(getContext().getResources().getDisplayMetrics().density * value);
    }
}

对不起,代码中有少量评论,但它正在运行可视化工具.您可以将它附加到您想要的任何玩家.

如何使用它:在xml布局中添加此视图,然后必须使用方法更新可视化器状态

public void updateVisualizer(byte[] bytes) {
    playerVisualizerView.updateVisualizer(bytes);
}

public void updatePlayerProgress(float percent) {
    playerVisualizerView.updatePlayerPercent(percent);
}

在updateVisualizer你用音频样本传递字节数组,并在updatePlayerProgress你动态传递百分比,同时播放音频样本.

要将文件转换为字节,您可以使用此辅助方法

public static byte[] fileToBytes(File file) {
    int size = (int) file.length();
    byte[] bytes = new byte[size];
    try {
        BufferedInputStream buf = new BufferedInputStream(new FileInputStream(file));
        buf.read(bytes, 0, bytes.length);
        buf.close();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
    return bytes;
}

例如(很快),使用Mosby库看起来如何:

public class AudioRecorderPresenter extends MvpBasePresenter<AudioRecorderView> {

public void onStopRecord() {
        // stopped and released MediaPlayer
        // ...
        // some preparation and saved audio file in audioFileName variable.

        getView().updateVisualizer(FileUtils.fileToBytes(new File(audioFileName)));
        }
    }
}

Answer 2

JETPACK COMPOSE
AudioWaveformJetpack Compose是一个绘制音频波形的 轻量级库。



XML
WaveformSeekBar是一个 Android 库，它使用（XML 方法）从本地音频文件、资源和 URL 绘制波形android.view.View。

音频处理
如果您正在寻找快速音频处理库，您可以使用现有的Ampituda库。Ampituda 还具有开箱即用的缓存和压缩功能。

Answer 3

我相信Scrobot 的回答不起作用。它假定输入音频采用某种（非常奇特的）编码（具有 5 位深度的单通道/单声道线性 PCM）。并且根据波函数计算振幅的算法可能存在缺陷。如果您将该算法与任何常用的音频文件格式一起使用，您只会得到随机数据。

事实是：这只是稍微复杂一点。

以下是实现 OP 目标需要做的事情：

1. 使用Android 的 MediaExtractor读取输入的音频文件（支持各种格式/编码）
2. 使用Android 的 MediaCodec将输入的音频编码解码为具有一定位深度（通常为 16 位）的线性 PCM 编码
   • 只有在这一步之后，您才能获得一个字节数组，您可以从中线性读取和计算振幅。
3. 对 PCM 编码的数据应用响度测量。它们有很多，一些更复杂（例如 LUFS/LKFS），一些更基本的（RMS）。让我们以 RMS（= 均方根）为例：
   1. 确定每条样品的数量。
   2. 读取单个条的所有样本。通常有 2 个通道，因此对于每个样本，您将获得 PCM-16 的 2 个短整数（16 位）。
   3. 对于每个样本计算所有通道的平均值。
   4. 也许您想以某种方式对值进行标准化，例如要获得 -1 和 1 之间的浮点值，您可以除以 (2 / (1 << 16))
   5. 对每个样本进行平方（因此 RMS 中的“S”）
   6. 计算一个条的所有样本的平均值（因此 RMS 中的“M”）
   7. 计算结果值的平方根（因此是 RMS 中的“R”）
   8. 现在您获得了一个值，您可以根据该值确定条的高度。
   9. 对所有条形重复步骤 2-8。

实现这一点是一项相当复杂的任务。我找不到任何提供整个过程的图书馆。但至少 Android 的媒体 API 提供了读取任何格式音频文件的算法。

注意：RMS 被认为是一种不太准确的响度测量。但它似乎产生的结果至少与您实际听到的内容有些相关。对于许多应用程序，它应该足够好。