WaveformSeekBar

Android Waveform SeekBar library

How to add

Add below lines in your root build.gradle at the end of repositories

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Add the dependency to your app build.gradle file

dependencies {
    implementation  'com.github.massoudss:waveformSeekBar:5.0.2'

    // Amplitude will allow you to call setSampleFrom() with files, URLs, Uri and resources
    // Important: Only works with api level 21 and higher
    implementation 'com.github.lincollincol:amplituda:2.2.2' // or newer version
}

And then sync your gradle.

How to use

You can simply use this View like other Views in android, just add WaveformSeekBar in your java/kotlin code or xml.

XML

<com.masoudss.lib.WaveformSeekBar
    app:wave_progress="33"
    app:wave_max_progress="100"
    app:wave_width="5dp"
    app:wave_gap="2dp"
    app:wave_min_height="5dp"
    app:wave_corner_radius="2dp"
    app:wave_background_color="@color/white"
    app:wave_progress_color="@color/blue"
    app:wave_gravity="center"
    app:wave_padding_top="2dp"
    app:wave_padding_Bottom="2dp"
    app:wave_padding_right="2dp"
    app:wave_padding_left="2dp"
    // setting wave_visible_progress will disable markers                            
    app:wave_visible_progress="50"
    app:marker_color="@color/red"
    app:marker_width="1dp"
    app:marker_text_color="@color/colorAccent"
    app:marker_text_padding="2dp"
    app:marker_text_size="12dp" />

Set samples

// Custom samples
waveformSeekBar.setSampleFrom(intArrayOf( /* samples */ ))

/* Functions below require Amplituda library dependency */
// Local audio file
waveformSeekBar.setSampleFrom(File("/storage/emulated/0/Music/song.mp3"))

// Path to local file
waveformSeekBar.setSampleFrom("/storage/emulated/0/Music/song.mp3")

// Url
waveformSeekBar.setSampleFrom("https://audio-url-example.com/song.mp3")

// Uri
waveformSeekBar.setSampleFrom("URI")

// Resource (res/raw)
waveformSeekBar.setSampleFrom(R.raw.song)

Add markers

You can add markers to your waveform. Use setMarker() to provide a HashMap of positions (float value between 0 and maxProgress) and text to display.

val map = hashMapOf<Float,String>()
map[waveformSeekBar.maxProgress/2] = "The middle"
waveformSeekBar.setMarker(map)

Progress Listener

waveformSeekBar.onProgressChanged = object : SeekBarOnProgressChanged {
    override fun onProgressChanged(waveformSeekBar: WaveformSeekBar, progress: Int, fromUser: Boolean) {
        // do your stuff here
    }
}

Customization

Kotlin

waveformSeekBar.apply {
    progress = 33.2F
    waveWidth = 5F
    waveGap = 2F
    waveMinHeight = 5F
    waveCornerRadius = 2F
    waveGravity = WaveGravity.CENTER
    wavePaddingTop = 2
    wavePaddingBottom = 2
    wavePaddingRight = 2
    wavePaddingLeft = 2
    waveBackgroundColor = Color.WHITE
    waveProgressColor = Color.BLUE
    markerTextColor = Color.MAGENTA
    markerTextPadding = 1F
    markerTextSize = 12F
    markerWidth = 1F
    markerColor = Color.RED
}

View Properties

You can customize WaveformSeekBar, all of this attributes can change via xml or code (runtime)

Attribute	Type	Kotlin	Description
wave_progress	Float	progress	SeekBar progress value, default value is 0F
wave_max_progress	Float	maxProgress	SeekBar max progress value, default value is 100F
wave_visible_progress	Float	visibleProgress	How much part of the progress should be shown, default value is 0F meaning everything is shown and progress indicator moves, if value > 0F the bars move and progress indicator stays in the center
wave_width	Dimension	waveWidth	Width of each wave, default value is 5dp
wave_gap	Dimension	waveGap	Gap width between waves, default value is 2dp
wave_padding_top	Dimension	wavePaddingTop	Waves padding width from top, default value is 0
wave_padding_bottom	Dimension	wavePaddingBottom	Waves padding width from bottom, default value is 0
wave_padding_right	Dimension	wavePaddingRight	Waves padding width from right, default value is 0
wave_padding_left	Dimension	wavePaddingLeft	Waves padding width from left, default value is 0
wave_min_height	Dimension	waveMinHeight	Minimum height of each wave, default value is equal to waveWidth
wave_corner_radius	Dimension	waveCornerRadius	Corner radius of each wave, default value is 2dp
wave_gravity	Enum	waveGravity	Waves Gravity, default is WaveGravity.CENTER
wave_background_color	Color	waveBackgroundColor	Unreached Waves color, default color is Color.LTGRAY
wave_progress_color	Color	waveProgressColor	Reached Waves color, default color is Color.WHITE
marker_width	Dimension	markerWidth	Marker vertical line width, default value is 1dp
marker_color	Color	markerColor	Marker vertical line color, default value is Color.GREEN
marker_text_size	Dimension	markerTextSize	Marker text size, default value is 12dp
marker_text_color	Color	markerTextColor	Marker text color, default color is Color.RED
marker_text_padding	Dimension	markerTextPadding	Marker text padding, default value is 0
-	IntArray	sample	Sample data for drawing waves, default is null
-	hashMapOf<Float,String>	marker	Marker map for drawing markers, default is null

Reduce size

Add android:extractNativeLibs="false" to application in the Manifest.xml

<application
      . . .
    android:extractNativeLibs="false"
      . . . >
    <activity . . ./>
</application>

License

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.