Awesome

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)

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.