안드로이드 WebView에서 HTML5

문제 상황

안드로이드 WebView에서 HTML5의 <audio> 태그를 사용해 오디오를 재생하면 정상적으로 작동하지 않는 경우가 자주 발생합니다. 이는 WebView가 HTML5 미디어 요소를 완벽하게 지원하지 않기 때문입니다.

이 문제에 대한 가장 확실한 해결책은 HTML5 오디오 태그 대신 안드로이드의 MediaPlayer를 사용하는 것입니다. 이를 위해서는 HTML 파일 내 자바스크립트 코드에서 안드로이드 네이티브 함수를 직접 호출할 수 있도록 연결 작업이 필요합니다.

1단계: 자바스크립트 인터페이스 추가

먼저 WebView 객체에 addJavascriptInterface() 메서드를 사용하여 자바스크립트 인터페이스를 등록합니다. 아래 예제 코드를 참고하세요.

WebView wv = (WebView) findViewById(R.id.webview);
wv.addJavascriptInterface(new WebAppInterface(this), "Android");

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

위 코드에서 @JavascriptInterface 어노테이션이 붙은 메서드만 자바스크립트 쪽에서 호출할 수 있습니다. API 레벨 17(JELLY_BEAN_MR1) 이상에서는 이 어노테이션이 반드시 필요하므로 주의해야 합니다.

2단계: HTML에서 자바스크립트로 네이티브 함수 호출

다음으로 HTML 파일 내에서 버튼 클릭 시 안드로이드 네이티브 함수를 호출하는 자바스크립트를 작성합니다.

<input type="button" value="Demo" onClick="showAndroidToast('Hello Android!')" />

<script>
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

버튼을 클릭하면 showAndroidToast() 함수가 실행되고, 이 함수는 인터페이스 이름인 Android.showToast()를 통해 네이티브 쪽의 showToast() 메서드를 호출합니다. 그 결과 화면에 토스트 메시지가 표시됩니다.

추가 팁

• 자바스크립트 인터페이스를 사용하기 전에 wv.getSettings().setJavaScriptEnabled(true);로 자바스크립트 실행을 반드시 허용해야 합니다.
• 오디오 재생 기능도 동일한 방식으로 구현할 수 있습니다. 자바스크립트에서 재생 명령을 전달하면, 네이티브 코드에서 MediaPlayer의 start(), pause(), stop() 등을 호출하면 됩니다.
• 보안상의 이유로 신뢰할 수 있는 콘텐츠를 로드하는 WebView에만 자바스크립트 인터페이스를 노출하는 것이 좋습니다.

이처럼 HTML5 오디오 태그가 WebView에서 제대로 작동하지 않을 때는 네이티브 MediaPlayer와 자바스크립트 인터페이스를 조합하면 안정적으로 오디오 재생 기능을 구현할 수 있습니다.