Android WebView에서 이어폰 연결 상태 감지하기 (JS Bridge)

1. Android WebView에서 직접 이어폰 연결 상태를 감지할 수 없나요?

예. 안드로이드의 WebView에서 직접 안드로이드 기기에 오디오 기기를 꽂았다는 상태를 알 수 없습니다.

 

• 웹 표준(HTML5)만으로는 하드웨어 단의 연결 상태를 직접 알 수 없음.
• 특히 일반 이어폰(3.5mm)과 달리 USB-C 타입 오디오 장치는 시스템에서 TYPE_USB_HEADSET으로 별도 관리됨.
• 일반 이어폰을 꽂는 동작은 ACTION_HEADSET_PLUG으로 관리됨.
• 이를 해결하기 위해 Android 네이티브 코드에서 감지하고 안드로이드 WebView(JS)로 브릿지를 통해 신호를 주는 전략이 필요함.

 

2. 구현

저는 해당 기능을 구현 할 때 BroadcastReceiver와 AudioDeviceCallback 둘중 하나를 선택해서 구현해야 했습니다.

이 중에서 저는 BroadcastReceiver를 선택하여 구현했습니다.

 

BroadcastReceiver의 장점

 

• 간결함: AudioManager를 뒤져서 오디오 디바이스 목록을 순회할 필요가 없습니다.
• 낮은 API 레벨 호환성: 아주 오래된 안드로이드 버전부터 최신 버전까지 동일하게 작동합니다.
• 즉각성: 시스템이 하드웨어 변화를 감지하자마자 인텐트를 쏴주므로 반응 속도가 빠릅니다.

 

코드

 

// 1. Receiver 정의
val receiver = object : BroadcastReceiver() {
    override fun onReceive(context: Context?, intent: Intent?) {
        if (intent?.action == Intent.ACTION_HEADSET_PLUG) {
            // state: 0 은 unplugged, 1 은 plugged
            val state = intent.getIntExtra("state", -1)
            val isPlugged = state == 1
            
            // 2. WebView의 JavaScript 함수 호출 (JS Bridge)
            val script = "if (window.onHeadsetChange) { window.onHeadsetChange($isPlugged); }"
            webView.post {
                webView.evaluateJavascript(script, null)
            }
        }
    }
}

// 3. Receiver 등록
val filter = IntentFilter(Intent.ACTION_HEADSET_PLUG)
currentContext.registerReceiver(receiver, filter)

// 4. 메모리 누수 방지를 위한 Dispose
onDispose {
    currentContext.unregisterReceiver(receiver)
}