How to draw waveform using Amplituda data?

[lincollincol]

Amplituda provides only extracted audio data and compress(custom number of samples)/cache features.

Here are some instructions, which help you draw a flexible waveform:

1. You need to find the following values to draw the waveform:

• Canvas size - the area in which the wave will be drawn (width and height in px).
  You can find an android view example here or a jetpack compose example here.

• Single spike size - sum of desired spike width and padding (width and paddings in px).
  Most likely desired width and padding will be specified by the user via function parameters or view attrs.
  spike width = desired spike width + desired spike paddings.

• Spikes per canvas width - number of spikes that canvas can accommodate.
  spikes = canvas width / single spike size

• Samples (or amplitudes) - list of average samples for each spike. You should divide the original amplitudes list into chunks and then average each chunk. Finally, you get average samples for each spike of your amplitude.

2. Draw waveform using values mentioned above (Kotlin "pseudocode"):
   This is how your code approximately should look like:

val amplitudesList: List<Int> = Amplituda(context).process(...).amplitudesAsList()

val desiredSpikeWidth: Float = 4.px
val desiredSpikePadding: Float = 2.px

val canvas: Canvas = /* init canvas */
val singleSpikeWidth: Float = desiredSpikeWidth + desiredSpikePadding
val spikesPerCanvas: Int = canvas.width / singleSpikeWidth
val amplitudePerSpikeList: List<Float> = amplitudesList
    .chunked(amplitudesList.count() / spikesPerCanvas)
    .map { it.average() }

amplitudePerSpikeList.forEachIndexed { spikeIndex, spikeHeight ->
    drawRoundRect(
        brush = waveformBrush,
        topLeft = Offset(
            x = spikeIndex * singleSpikeWidth,
            y = canvas.height / 2F - spikeHeight / 2F // Center spikes
        ),
        size = Size(
            width = singleSpikeWidth,
            height = spikeHeight
        )
    )
}

3. Libraries

• Compose. I have recently created AudioWaveform library for Jetpack Compose which is compatible with Amplituda. I used the instructions described above to draw the waveform. So, you can check the full code here.
• XML. If you're looking for an android View implementation, you can take a look at WaveformSeekBar, which is also compatible with Amplituda.