Android上的录音播放动画

Posted 2023-02-25

【中文标题】Android上的录音播放动画

【英文标题】：Audio record playback animation on Android

【发布时间】：2018-04-02 06:42:58

【问题描述】：

我想知道他们如何填充表示音频记录的视图的“播放”部分。以下是 Telegram 的示例：

表示音频记录的视图的初始颜色为灰色。演奏部分用蓝色填充。

我将如何实现这样的事情？我会存储两个图像。第一个表示处于未播放状态的音频记录，第二个表示处于播放状态的同一条记录。

未播放状态：

播放状态：

然后我会创建一个FrameLayout 和两个Views 并使用the clip drawable API 逐渐显示播放的部分。这是我的代码：

clipped_view_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="15000"
    android:propertyName="level"
    android:valueTo="10000"
    android:valueType="intType" />

played_clip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/played"
    android:gravity="left" />

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="ru.maksim.sample.MainActivity">

    <Button
        android:id="@+id/play"
        android:text="Play"
        android:layout_
        android:layout_ />

    <FrameLayout
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/view"
            android:layout_
            android:layout_
            android:background="@drawable/not_played" />

        <ImageView
            android:id="@+id/clippedView"
            android:layout_
            android:layout_
            android:background="@drawable/played_clip" />

    </FrameLayout>
</LinearLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        play.setOnClickListener( play() )
    

    private fun play() 
        val clippedDrawable = clippedView.background as ClipDrawable
        Log.d(TAG, "level=$clippedDrawable.level")
        val animator = AnimatorInflater.loadAnimator(this, R.animator.clipped_view_animator)
        animator.setTarget(clippedDrawable)
        animator.start()
    

视频： https://youtu.be/9X8Yb9aKqmQ

我的方法有效。但是，我想知道是否有更好的方法来做我所做的事情（在性能、代码行数等方面）。顺便说一句，从我的视频中可以清楚地看到，我超过了每帧 16 毫秒的限制（带有 Android 5.0.2 的三星 Galaxy Tab 4）。在实际应用中可能会更糟。

【问题讨论】：

如何实现库来解决这个问题？它们往往更有效率。

@Abhi，什么库？

【参考方案1】：

您的代码似乎完美地执行了该功能。但是，有时库比本机代码更有效。您可以参考这些库来实现您的功能。

WaveForm Yalantis Horizon Wave Audio-Recorder-Visualization Semantive Waveform WaveInApp WaveformControl

该库没有完全相同的实现，您可能需要对其进行调整以满足您的要求。我找到了一个similar question，它在我从事类似项目时帮助了我。答案使用本机代码来显示音频波形。可以参考this answer。