Jetpack Compose Glimmer の音声入力インジケーター

対応する XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
ディスプレイ メガネ

VoiceInputIndicator は、ユーザーに音声アクティビティを表示する Jetpack Compose Glimmer コンポーネントです。このコンポーネントを使用すると、音声入力やその他の音声を受け付け、アプリが音声をキャプチャしていることを示す視覚的なフィードバックを提供できます。

このコンポーネントは純粋に視覚的な要素です。単独で音声を録音したり、マイクデータを処理したりすることはありません。代わりに、アプリから提供された音声の level に応答して、音声の強さを視覚的に表現します。

図 1.VoiceInputIndicator の例。

プロジェクション環境での権限をリクエストする

インジケーターを駆動するために音声データをキャプチャするには、アプリに Manifest.permission.RECORD_AUDIO権限が必要です。

ディスプレイ グラス向けの拡張エクスペリエンスを構築する場合は、デバイスとグラスの両方で権限を正しくリクエストしてください。 ProjectedPermissionsResultContractProjectedPermissionsRequestParams を使用して、ユーザーにプロンプトを表示します。

プロジェクション環境での権限のリクエストについて詳しくは、 ハードウェア権限をリクエストするをご覧ください。

音声をキャプチャして正規化する

VoiceInputIndicator は、音声の強度を視覚的に反映するために、0.0f1.0fFloat を 必要とします。純粋に視覚的なコンポーネントとして動作し、音声をキャプチャしないため、アプリはマイクを積極的にモニタリングし、音量をインジケーターの level パラメータにストリーミングする必要があります。

音声データをキャプチャする方法は複数ありますが、1 つの方法として use the SpeechRecognizer API を使用する方法があります。SpeechRecognizer を使用すると、 リアルタイムの音量更新を RecognitionListener.onRmsChanged コールバックを使用してキャプチャできます。このコールバックは、デシベル単位の音声 レベル rmsdB を提供します。

通常、この生の値は 0 ~ 10 の範囲に収まるため、出力に必要な 0.0f1.0f の範囲に正規化する必要があります。この正規化されたレベルを状態変数に保持して、インジケーターを継続的に更新できます。

以下に、RecognitionListener を使用して状態 変数を更新する例を示します。

// Example state variable to hold the normalized level (0.0 to 1.0)
// that the VoiceInputIndicator component expects.
val audioLevel = MutableStateFlow(0f)

// Initialize the Android SpeechRecognizer
val speechRecognizer = SpeechRecognizer.createSpeechRecognizer(context)

// Listener to capture speech events and audio level changes
val listener = object : RecognitionListener {
    override fun onRmsChanged(rmsdB: Float) {
        // Normalize raw dB level to a 0.0-1.0 range.
        // Android SpeechRecognizer's rmsdB typically ranges from 0 to ~10.
        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 to the recognizer
speechRecognizer.setRecognitionListener(listener)

// Create an intent to specify the recognition model and behavior
val intent = Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH).apply {
    putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM)
}
// Begin listening for audio input
speechRecognizer.startListening(intent)

音声入力インジケーターを統合する

音声ストリームが適切に正規化され、状態として公開されたら、 それを VoiceInputIndicator に直接渡すことができます。

@Composable
fun VoiceInputExample(modifier: Modifier) {
    // Collect the flow as Compose State so the UI reacts to changes in real-time.
    val currentLevel by audioLevel.collectAsState()

    VoiceInputIndicator(
        // The VoiceInputIndicator component provides a visual "pulse" or indicator
        // that changes based on the 'level' lambda, which returns a Float between 0.0 and 1.0.
        level = { currentLevel },
        modifier = modifier
    )
}

カスタマイズ パラメータ

VoiceInputIndicator には、動作と外観をカスタマイズするためのパラメータがいくつか用意されています。

  • level: 音声入力のレベルを表す Float を返す関数。無音の 0.0 から最大の音量の 1.0 までの範囲です。
  • indicatorColor: インジケーター バーの色。デフォルトでは、Glimmer テーマのプライマリ カラーが使用されます。 GlimmerTheme.colors.primaryをご覧ください。
  • modifier: インジケーターに適用される標準の Compose modifier

UI でインジケーターを可視の背景コンテナ内に配置する必要がある場合は、 ContainedVoiceInputIndicatorを使用します。この方法では、インジケーター バーが透明になり、背景コンテナが透けて見えるようになります。