react-native-waveform-player 0.0.1 → 1.0.0

package/android/src/main/java/com/audiowaveform/WaveformBarsView.kt

@@ -0,0 +1,358 @@
+package com.audiowaveform
+
+import android.animation.ValueAnimator
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+import android.view.animation.DecelerateInterpolator
+
+/**
+ * Renders the audio waveform as a row of vertical rounded-rect bars with a
+ * "played" / "unplayed" two-tone fill, and handles immediate touch-and-drag
+ * scrubbing.
+ *
+ * Drawing model:
+ *   1. Build a single cached `Path` containing every bar's rounded-rect when
+ *      amplitudes / size / bar geometry change.
+ *   2. On every `onDraw`:
+ *        a. `canvas.drawPath(cachedPath, unplayedPaint)`.
+ *        b. `canvas.save()` -> `clipRect(0, 0, progressX, height)` ->
+ *           `canvas.drawPath(cachedPath, playedPaint)` -> `canvas.restore()`.
+ *
+ * Touch handling is **immediate** — scrub starts at `ACTION_DOWN`, with no
+ * slop or long-press delay. The host view receives the proportional position
+ * via the `onScrubBegan/Moved/Ended` callbacks.
+ */
+class WaveformBarsView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : View(context, attrs, defStyleAttr) {
+
+    // region Visual configuration ------------------------------------------------
+
+    var amplitudes: FloatArray = FloatArray(0)
+        private set
+
+    /**
+     * Update the bar amplitudes. Each call animates the existing displayed
+     * heights toward the new target over [AMPLITUDE_ANIMATION_DURATION_MS]
+     * (ease-out). Bars expand symmetrically from the centre because the bar
+     * geometry is centre-aligned in [buildBarPath].
+     */
+    fun setAmplitudes(values: FloatArray) {
+        amplitudes = values
+        setTargetAmplitudes(values)
+    }
+
+    var playedBarColor: Int
+        get() = playedPaint.color
+        set(value) {
+            playedPaint.color = value
+            invalidate()
+        }
+
+    var unplayedBarColor: Int
+        get() = unplayedPaint.color
+        set(value) {
+            unplayedPaint.color = value
+            invalidate()
+        }
+
+    var barWidthPx: Float = 3f * resources.displayMetrics.density
+        set(value) {
+            field = value
+            invalidatePath()
+        }
+
+    var barGapPx: Float = 2f * resources.displayMetrics.density
+        set(value) {
+            field = value
+            invalidatePath()
+        }
+
+    /** `< 0` means "auto" = barWidth / 2. */
+    var barRadiusPx: Float = -1f
+        set(value) {
+            field = value
+            invalidatePath()
+        }
+
+    /** `<= 0` means "auto from view width". */
+    var barCountOverride: Int = 0
+        set(value) {
+            field = value
+            invalidatePath()
+        }
+
+    /** Fraction of the waveform that has been played, in [0, 1]. */
+    var progressFraction: Float = 0f
+        set(value) {
+            val clamped = value.coerceIn(0f, 1f)
+            if (clamped != field) {
+                field = clamped
+                invalidate()
+            }
+        }
+
+    // endregion
+
+    // region Touch / scrub callbacks ---------------------------------------------
+
+    /** All callbacks pass a fraction in [0, 1] (touch x / view width). */
+    var onScrubBegan: ((Float) -> Unit)? = null
+    var onScrubMoved: ((Float) -> Unit)? = null
+    var onScrubEnded: ((Float, Boolean /* cancelled */) -> Unit)? = null
+
+    // endregion
+
+    // region Private state -------------------------------------------------------
+
+    private val playedPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.WHITE
+        style = Paint.Style.FILL
+    }
+    private val unplayedPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.argb(128, 255, 255, 255)
+        style = Paint.Style.FILL
+    }
+
+    private var cachedPath: Path? = null
+    private var cachedWidth: Int = 0
+    private var cachedHeight: Int = 0
+    private val tmpRect = RectF()
+
+    /**
+     * Values actually drawn this frame. While an amplitudes update is
+     * animating, these are linearly interpolated between [startAmps] and
+     * [targetAmps] by [amplitudeAnimator].
+     */
+    private var displayedAmps: FloatArray = FloatArray(0)
+    private var startAmps: FloatArray = FloatArray(0)
+    private var targetAmps: FloatArray = FloatArray(0)
+
+    private val amplitudeAnimator: ValueAnimator =
+        ValueAnimator.ofFloat(0f, 1f).apply {
+            duration = AMPLITUDE_ANIMATION_DURATION_MS
+            interpolator = DecelerateInterpolator(1.5f)
+            addUpdateListener { va ->
+                val t = va.animatedValue as Float
+                val count = minOf(displayedAmps.size, startAmps.size, targetAmps.size)
+                for (i in 0 until count) {
+                    displayedAmps[i] = startAmps[i] + (targetAmps[i] - startAmps[i]) * t
+                }
+                invalidatePath()
+            }
+        }
+
+    // endregion
+
+    init {
+        isClickable = true
+        isFocusable = true
+    }
+
+    // region Layout / path caching -----------------------------------------------
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        if (w != cachedWidth || h != cachedHeight) {
+            invalidatePath()
+        }
+    }
+
+    private fun invalidatePath() {
+        cachedPath = null
+        cachedWidth = 0
+        cachedHeight = 0
+        invalidate()
+    }
+
+    private fun ensureCachedPath(): Path? {
+        val current = cachedPath
+        if (current != null && cachedWidth == width && cachedHeight == height) {
+            return current
+        }
+        val built = buildBarPath() ?: return null
+        cachedPath = built
+        cachedWidth = width
+        cachedHeight = height
+        return built
+    }
+
+    /**
+     * Build the cached path. When [displayedAmps] is empty (decoding hasn't
+     * produced anything yet) we render a uniform low-amplitude skeleton so
+     * the user sees the bar pattern immediately instead of an empty card.
+     *
+     * `displayedAmps` already substitutes [PLACEHOLDER_AMPLITUDE] for any
+     * not-yet-decoded bar in [setTargetAmplitudes], so trailing bars stay at
+     * skeleton height instead of dropping to `minBarHeight` between partials.
+     */
+    private fun buildBarPath(): Path? {
+        val totalWidth = width.toFloat()
+        val totalHeight = height.toFloat()
+        if (totalWidth <= 0 || totalHeight <= 0) return null
+
+        val step = barWidthPx + barGapPx
+        if (step <= 0f) return null
+
+        val autoCount = (totalWidth / step).toInt()
+        val barCount = if (barCountOverride > 0) {
+            kotlin.math.min(barCountOverride, autoCount)
+        } else {
+            autoCount
+        }
+        if (barCount <= 0) return null
+
+        val verticalPadding = barWidthPx * 1.5f
+        val drawableHeight = totalHeight - verticalPadding * 2f
+        if (drawableHeight <= 0f) return null
+        val minBarHeight = barWidthPx
+        val radius = if (barRadiusPx < 0f) barWidthPx / 2f else barRadiusPx
+        val usePlaceholder = displayedAmps.isEmpty()
+
+        val path = Path()
+        for (i in 0 until barCount) {
+            val amp = if (usePlaceholder) {
+                PLACEHOLDER_AMPLITUDE
+            } else {
+                val ampIndex = (i * displayedAmps.size / barCount)
+                    .coerceIn(0, displayedAmps.size - 1)
+                displayedAmps[ampIndex].coerceIn(0f, 1f)
+            }
+            val barHeight = (amp * drawableHeight).coerceAtLeast(minBarHeight)
+            val x = i * step
+            val y = verticalPadding + (drawableHeight - barHeight) / 2f
+            tmpRect.set(x, y, x + barWidthPx, y + barHeight)
+            path.addRoundRect(tmpRect, radius, radius, Path.Direction.CW)
+        }
+        return path
+    }
+
+    /**
+     * Update the animation targets when new amplitudes arrive. Each call
+     * captures the current [displayedAmps] as the start, sets the new
+     * `targetAmps`, and (re)starts the animator. Re-entrant — a new payload
+     * mid-animation cancels the previous run and animates from the
+     * mid-frame state to the new target.
+     */
+    private fun setTargetAmplitudes(values: FloatArray) {
+        if (values.isEmpty()) {
+            amplitudeAnimator.cancel()
+            displayedAmps = FloatArray(0)
+            startAmps = FloatArray(0)
+            targetAmps = FloatArray(0)
+            invalidatePath()
+            return
+        }
+
+        // Treat zero amplitude as "not yet decoded" — keep those bars at the
+        // skeleton placeholder height instead of letting them snap to
+        // `minBarHeight` between partials.
+        val processed = FloatArray(values.size) { i ->
+            if (values[i] > 0f) values[i] else PLACEHOLDER_AMPLITUDE
+        }
+
+        if (displayedAmps.size != processed.size) {
+            // First non-empty payload (or barCount changed). Seed the
+            // current values with the placeholder skeleton so the animation
+            // grows from skeleton -> real shape.
+            displayedAmps = FloatArray(processed.size) { PLACEHOLDER_AMPLITUDE }
+        }
+
+        startAmps = displayedAmps.copyOf()
+        targetAmps = processed
+        amplitudeAnimator.cancel()
+        amplitudeAnimator.start()
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        amplitudeAnimator.cancel()
+    }
+
+    companion object {
+        /**
+         * Uniform amplitude used to render the "loading" skeleton when no
+         * real amplitudes have been decoded yet.
+         */
+        private const val PLACEHOLDER_AMPLITUDE = 0.2f
+
+        /** Duration (ms) of each amplitude-update animation. */
+        private const val AMPLITUDE_ANIMATION_DURATION_MS = 200L
+    }
+
+    // endregion
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        val path = ensureCachedPath() ?: return
+
+        // Pass 1: all bars in the unplayed color.
+        canvas.drawPath(path, unplayedPaint)
+
+        // Pass 2: clip to [0, progressX] and re-fill in the played color.
+        val progressX = (progressFraction.coerceIn(0f, 1f) * width.toFloat())
+        if (progressX <= 0f) return
+        val saveCount = canvas.save()
+        canvas.clipRect(0f, 0f, progressX, height.toFloat())
+        canvas.drawPath(path, playedPaint)
+        canvas.restoreToCount(saveCount)
+    }
+
+    // region Touch handling — immediate scrub ------------------------------------
+
+    @Suppress("ClickableViewAccessibility")
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        val w = width
+        if (w <= 0) return super.onTouchEvent(event)
+
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                // Don't let a parent ScrollView steal the drag.
+                parent?.requestDisallowInterceptTouchEvent(true)
+                val fraction = (event.x / w.toFloat()).coerceIn(0f, 1f)
+                progressFraction = fraction
+                invalidate()
+                onScrubBegan?.invoke(fraction)
+                return true
+            }
+            MotionEvent.ACTION_MOVE -> {
+                val fraction = (event.x / w.toFloat()).coerceIn(0f, 1f)
+                progressFraction = fraction
+                invalidate()
+                onScrubMoved?.invoke(fraction)
+                return true
+            }
+            MotionEvent.ACTION_UP -> {
+                val fraction = (event.x / w.toFloat()).coerceIn(0f, 1f)
+                progressFraction = fraction
+                invalidate()
+                onScrubEnded?.invoke(fraction, false)
+                parent?.requestDisallowInterceptTouchEvent(false)
+                performClick()
+                return true
+            }
+            MotionEvent.ACTION_CANCEL -> {
+                onScrubEnded?.invoke(progressFraction, true)
+                parent?.requestDisallowInterceptTouchEvent(false)
+                return true
+            }
+        }
+        return super.onTouchEvent(event)
+    }
+
+    override fun performClick(): Boolean {
+        super.performClick()
+        return true
+    }
+
+    // endregion
+}

package/android/src/main/java/com/audiowaveform/WaveformDecoder.kt

@@ -0,0 +1,240 @@
+package com.audiowaveform
+
+import android.media.MediaCodec
+import android.media.MediaExtractor
+import android.media.MediaFormat
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import java.util.concurrent.atomic.AtomicBoolean
+import kotlin.math.sqrt
+
+/**
+ * Decode an audio file into per-bar RMS amplitudes for waveform visualisation.
+ *
+ * Uses `MediaExtractor` + `MediaCodec` for hardware-accelerated PCM decode.
+ * `MediaExtractor` handles `http(s)://` URLs natively (it follows redirects),
+ * so no manual download is needed.
+ *
+ * Bucket-by-presentation-time (rather than sequential) for time-accurate bars
+ * even with VBR audio. Emits intermediate progress (5% then every 20%) so
+ * the waveform paints in as it decodes.
+ *
+ * All callbacks fire on the main thread.
+ */
+class WaveformDecoder {
+
+    interface Listener {
+        fun onProgress(amplitudes: FloatArray) {}
+        fun onComplete(amplitudes: FloatArray)
+        fun onFailure(message: String)
+    }
+
+    private val cancelFlag = AtomicBoolean(false)
+    private var workerThread: Thread? = null
+    private val mainHandler = Handler(Looper.getMainLooper())
+
+    fun decode(uri: String, barCount: Int, listener: Listener) {
+        cancel()
+        if (barCount <= 0) {
+            mainHandler.post { listener.onComplete(FloatArray(0)) }
+            return
+        }
+        cancelFlag.set(false)
+        val token = cancelFlag
+        val thread = Thread({
+            try {
+                runDecode(uri, barCount, token, listener)
+            } catch (e: Exception) {
+                Log.e(TAG, "decode crashed", e)
+                if (!token.get()) {
+                    mainHandler.post { listener.onFailure(e.message ?: "Decode failed") }
+                }
+            }
+        }, "audiowaveform-decode")
+        workerThread = thread
+        thread.isDaemon = true
+        thread.start()
+    }
+
+    /** Cancel any in-flight decode. Safe to call repeatedly. */
+    fun cancel() {
+        cancelFlag.set(true)
+        workerThread = null
+    }
+
+    private fun runDecode(
+        uri: String,
+        barCount: Int,
+        cancelled: AtomicBoolean,
+        listener: Listener
+    ) {
+        val extractor = MediaExtractor()
+        try {
+            try {
+                if (uri.startsWith("http://") || uri.startsWith("https://")) {
+                    extractor.setDataSource(uri, HashMap())
+                } else {
+                    extractor.setDataSource(uri)
+                }
+            } catch (e: Exception) {
+                if (!cancelled.get()) {
+                    mainHandler.post {
+                        listener.onFailure("setDataSource failed: ${e.message}")
+                    }
+                }
+                return
+            }
+
+            var audioTrackIndex = -1
+            var audioFormat: MediaFormat? = null
+            for (i in 0 until extractor.trackCount) {
+                val format = extractor.getTrackFormat(i)
+                val mime = format.getString(MediaFormat.KEY_MIME) ?: continue
+                if (mime.startsWith("audio/")) {
+                    audioTrackIndex = i
+                    audioFormat = format
+                    break
+                }
+            }
+            if (audioTrackIndex < 0 || audioFormat == null) {
+                if (!cancelled.get()) {
+                    mainHandler.post { listener.onFailure("No audio track found") }
+                }
+                return
+            }
+
+            extractor.selectTrack(audioTrackIndex)
+            extractor.seekTo(0L, MediaExtractor.SEEK_TO_CLOSEST_SYNC)
+
+            val mime = audioFormat.getString(MediaFormat.KEY_MIME) ?: run {
+                mainHandler.post { listener.onFailure("Audio mime type missing") }
+                return
+            }
+            val codec: MediaCodec = try {
+                MediaCodec.createDecoderByType(mime)
+            } catch (e: Exception) {
+                mainHandler.post { listener.onFailure("Codec creation failed: ${e.message}") }
+                return
+            }
+
+            try {
+                codec.configure(audioFormat, null, null, 0)
+                codec.start()
+
+                val durationUs = if (audioFormat.containsKey(MediaFormat.KEY_DURATION)) {
+                    audioFormat.getLong(MediaFormat.KEY_DURATION)
+                } else 0L
+                val totalDurationUs = if (durationUs > 0) durationUs else 60_000_000L
+                val barDurationUs = totalDurationUs.toDouble() / barCount
+
+                val sumSquares = DoubleArray(barCount)
+                val sampleCounts = IntArray(barCount)
+                val bufferInfo = MediaCodec.BufferInfo()
+                var inputDone = false
+                var outputDone = false
+                val timeoutUs = 10_000L
+                var highestFilledBar = -1
+                val firstUpdateThreshold = (barCount / 20).coerceAtLeast(1)
+                val regularUpdateInterval = (barCount / 5).coerceAtLeast(1)
+                var lastUpdateBar = -1
+
+                while (!outputDone) {
+                    if (cancelled.get()) {
+                        return
+                    }
+                    if (!inputDone) {
+                        val inputIndex = codec.dequeueInputBuffer(timeoutUs)
+                        if (inputIndex >= 0) {
+                            val inputBuffer = codec.getInputBuffer(inputIndex) ?: continue
+                            val sampleSize = extractor.readSampleData(inputBuffer, 0)
+                            if (sampleSize < 0) {
+                                codec.queueInputBuffer(
+                                    inputIndex, 0, 0, 0, MediaCodec.BUFFER_FLAG_END_OF_STREAM
+                                )
+                                inputDone = true
+                            } else {
+                                codec.queueInputBuffer(
+                                    inputIndex, 0, sampleSize, extractor.sampleTime, 0
+                                )
+                                extractor.advance()
+                            }
+                        }
+                    }
+
+                    val outputIndex = codec.dequeueOutputBuffer(bufferInfo, timeoutUs)
+                    if (outputIndex >= 0) {
+                        if (bufferInfo.flags and MediaCodec.BUFFER_FLAG_END_OF_STREAM != 0) {
+                            outputDone = true
+                        }
+                        val outputBuffer = codec.getOutputBuffer(outputIndex)
+                        if (outputBuffer != null && bufferInfo.size > 0) {
+                            val barIndex = ((bufferInfo.presentationTimeUs / barDurationUs).toInt())
+                                .coerceIn(0, barCount - 1)
+
+                            outputBuffer.position(bufferInfo.offset)
+                            outputBuffer.limit(bufferInfo.offset + bufferInfo.size)
+                            val shortCount = bufferInfo.size / 2
+                            for (i in 0 until shortCount) {
+                                val sample = outputBuffer.short.toFloat() / Short.MAX_VALUE.toFloat()
+                                sumSquares[barIndex] += (sample * sample).toDouble()
+                                sampleCounts[barIndex]++
+                            }
+
+                            if (barIndex > highestFilledBar) highestFilledBar = barIndex
+
+                            val interval = if (lastUpdateBar < 0) firstUpdateThreshold else regularUpdateInterval
+                            if (highestFilledBar - kotlin.math.max(0, lastUpdateBar) >= interval) {
+                                lastUpdateBar = highestFilledBar
+                                val partial = normaliseAmplitudes(sumSquares, sampleCounts, barCount)
+                                if (!cancelled.get()) {
+                                    mainHandler.post {
+                                        if (!cancelled.get()) listener.onProgress(partial)
+                                    }
+                                }
+                            }
+                        }
+                        codec.releaseOutputBuffer(outputIndex, false)
+                    }
+                }
+
+                val finalAmps = normaliseAmplitudes(sumSquares, sampleCounts, barCount)
+                if (!cancelled.get()) {
+                    mainHandler.post {
+                        if (!cancelled.get()) listener.onComplete(finalAmps)
+                    }
+                }
+            } finally {
+                try { codec.stop() } catch (_: Exception) {}
+                codec.release()
+            }
+        } finally {
+            extractor.release()
+        }
+    }
+
+    private fun normaliseAmplitudes(
+        sumSquares: DoubleArray,
+        sampleCounts: IntArray,
+        barCount: Int
+    ): FloatArray {
+        val amplitudes = FloatArray(barCount)
+        var maxAmp = 0f
+        for (i in 0 until barCount) {
+            if (sampleCounts[i] > 0) {
+                amplitudes[i] = sqrt(sumSquares[i] / sampleCounts[i]).toFloat()
+                if (amplitudes[i] > maxAmp) maxAmp = amplitudes[i]
+            }
+        }
+        if (maxAmp > 0f) {
+            for (i in amplitudes.indices) {
+                amplitudes[i] = (amplitudes[i] / maxAmp).coerceIn(0f, 1f)
+            }
+        }
+        return amplitudes
+    }
+
+    companion object {
+        private const val TAG = "WaveformDecoder"
+    }
+}

package/android/src/main/res/drawable/pause_fill.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12.275dp"
+    android:height="16.162dp"
+    android:viewportWidth="12.275"
+    android:viewportHeight="16.162">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M0,0h12.275v16.162h-12.275z"
+      android:strokeAlpha="0"
+      android:fillAlpha="0"/>
+  <path
+      android:pathData="M1.299,16.152L3.525,16.152C4.375,16.152 4.824,15.703 4.824,14.844L4.824,1.299C4.824,0.4 4.375,0 3.525,0L1.299,0C0.449,0 0,0.439 0,1.299L0,14.844C0,15.703 0.449,16.152 1.299,16.152ZM8.398,16.152L10.615,16.152C11.475,16.152 11.914,15.703 11.914,14.844L11.914,1.299C11.914,0.4 11.475,0 10.615,0L8.398,0C7.539,0 7.09,0.439 7.09,1.299L7.09,14.844C7.09,15.703 7.539,16.152 8.398,16.152Z"
+      android:fillColor="#ffffff"
+      android:fillAlpha="0.85"/>
+</vector>

package/android/src/main/res/drawable/play_fill.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16.289dp"
+    android:height="16.416dp"
+    android:viewportWidth="16.289"
+    android:viewportHeight="16.416">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M0,0h16.289v16.416h-16.289z"
+      android:strokeAlpha="0"
+      android:fillAlpha="0"/>
+  <path
+      android:pathData="M1.709,14.981C1.709,15.947 2.266,16.406 2.93,16.406C3.223,16.406 3.525,16.309 3.828,16.152L15.205,9.502C16.016,9.033 16.289,8.711 16.289,8.203C16.289,7.686 16.016,7.373 15.205,6.904L3.828,0.254C3.525,0.088 3.223,0 2.93,0C2.266,0 1.709,0.459 1.709,1.426Z"
+      android:fillColor="#ffffff"
+      android:fillAlpha="0.85"/>
+</vector>