lincollincol / Amplituda

Audio processing library, which provides waveform data
Apache License 2.0
222 stars 31 forks source link

How to draw waveform using Amplituda data? #51

Closed lincollincol closed 2 years ago

lincollincol commented 2 years ago

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.
  1. 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 = 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](https://github.com/lincollincol/compose-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](https://github.com/lincollincol/compose-audiowaveform/blob/master/audiowaveform/src/main/java/com/linc/audiowaveform/AudioWaveform.kt).
* `XML`. If you're looking for an android `View` implementation, you can take a look at [WaveformSeekBar](https://github.com/massoudss/waveformSeekBar), which is also compatible with Amplituda.
<p align="center">
    <img src="https://user-images.githubusercontent.com/32796762/194043951-862f6624-f667-4502-941b-0d1d3a8af73a.gif" width="25%"/>
</p>