Indikator input suara di Jetpack Compose Glimmer

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata Display
Mempelajari jenis perangkat XR →

VoiceInputIndicator adalah komponen Glimmer Jetpack Compose yang menampilkan aktivitas suara kepada pengguna. Anda dapat menggunakan komponen ini untuk menerima input suara atau audio lain dan memberikan masukan visual untuk menunjukkan bahwa aplikasi Anda sedang merekam audio.

Komponen ini murni merupakan elemen visual. Aplikasi ini tidak merekam audio atau memproses data mikrofonnya sendiri. Sebagai gantinya, aplikasi merespons level audio yang disediakan oleh aplikasi Anda, yang menampilkan representasi visual intensitas audio.

Gambar 1. Contoh VoiceInputIndicator.

Meminta izin yang diproyeksikan

Untuk merekam data audio guna menggerakkan indikator, aplikasi Anda memerlukan izin Manifest.permission.RECORD_AUDIO.

Saat Anda membuat pengalaman beraugmentasi untuk kacamata tampilan, pastikan Anda meminta izin dengan benar di perangkat dan kacamata. Gunakan ProjectedPermissionsResultContract dan ProjectedPermissionsRequestParams untuk memunculkan perintah kepada pengguna.

Untuk mengetahui informasi selengkapnya tentang meminta izin di lingkungan yang diproyeksikan, lihat Meminta izin hardware.

Merekam dan menormalisasi audio

VoiceInputIndicator memerlukan Float antara 0.0f dan 1.0f untuk mencerminkan intensitas audio secara visual. Karena beroperasi murni sebagai komponen visual dan tidak merekam audio, aplikasi Anda harus memantau mikrofon secara aktif dan mengalirkan volume ke parameter level indikator.

Meskipun ada beberapa cara untuk merekam data audio, salah satu caranya adalah dengan menggunakan SpeechRecognizer API. Saat menggunakan SpeechRecognizer, Anda dapat merekam update volume real-time menggunakan callback RecognitionListener.onRmsChanged, yang memberikan tingkat audio dalam desibel, rmsdB.

Karena nilai mentah ini biasanya berada di antara 0 dan 10, Anda harus menormalisasi output ke rentang 0.0f hingga 1.0f yang diperlukan. Anda dapat menyimpan tingkat yang dinormalisasi ini dalam variabel status untuk terus memperbarui indikator.

Berikut adalah contoh penggunaan RecognitionListener untuk memperbarui variabel status:

// Example state variables to hold the normalized level
val audioLevel = MutableStateFlow(0f)
val speechRecognizer = SpeechRecognizer.createSpeechRecognizer(context)

val listener = object : RecognitionListener {
    override fun onRmsChanged(rmsdB: Float) {
        // Normalize raw dB (~0–10) to 0.0-1.0 for the indicator
        audioLevel.value = ((rmsdB - 1f) / 9f).coerceIn(0f, 1f)
    }

    // ... Implement other required RecognitionListener methods ...
    override fun onReadyForSpeech(params: Bundle?) {}
    override fun onBeginningOfSpeech() {}
    override fun onEndOfSpeech() {}
    override fun onError(error: Int) {}
    override fun onResults(results: Bundle?) {}
    override fun onPartialResults(partialResults: Bundle?) {}
    override fun onEvent(eventType: Int, params: Bundle?) {}
    override fun onBufferReceived(buffer: ByteArray?) {}
}

// Attach the listener and start recognizing speech
speechRecognizer.setRecognitionListener(listener)

val intent = Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH).apply {
    putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM)
}
speechRecognizer.startListening(intent)

Mengintegrasikan indikator input suara

Setelah aliran audio dinormalisasi dan diekspos dengan benar sebagai status, Anda dapat meneruskannya langsung ke VoiceInputIndicator.

@Composable
fun VoiceInputExample() {
    // Collect the flow as Compose State so the UI reacts to changes
    val currentLevel by audioLevel.collectAsState()

    VoiceInputIndicator(
        // The component responds to the level provided, showing a visual representation of the audio intensity
        level = { currentLevel },
        modifier = Modifier.size(64.dp)
    )
}

Parameter penyesuaian

VoiceInputIndicator menyediakan beberapa parameter untuk menyesuaikan perilaku dan tampilannya:

  • level: Fungsi yang menampilkan Float yang merepresentasikan tingkat input suara, mulai dari 0.0 untuk keheningan hingga 1.0 untuk suara paling keras.
  • indicatorColor: Warna batang indikator. Secara default, ini menggunakan warna primer dari tema Glimmer; lihat GlimmerTheme.colors.primary.
  • modifier: modifier Compose standar yang akan diterapkan ke indikator.

Jika UI Anda memerlukan indikator untuk berada dalam penampung latar belakang yang terlihat, gunakan ContainedVoiceInputIndicator. Alternatif ini memastikan bahwa batang indikator transparan, sehingga penampung latar belakang dapat terlihat menembus.