HTML5のaudioタグがAndroid WebViewで再生できないときの解決策

HTML5のaudioタグがAndroid WebViewで動作しない原因と対策

Android WebView上でHTML5の<audio>タグが正しく機能しないケースでは、代わりにAndroid標準のMediaPlayerを使って音声を再生する方法が有効です。具体的には、HTMLファイル内に記述したJavaScriptから、Androidネイティブ側で実装した関数を呼び出す仕組みを構築します。

Android側の実装：JavaScriptインターフェースの登録

まず、WebViewにJavaScriptインターフェースを追加し、ネイティブ側のメソッドをJavaScriptから呼び出せるようにします。

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アノテーションを付けたメソッドは、JavaScript側から「Android」という名前のオブジェクト経由でアクセスできます。

HTML・JavaScript側の実装

次に、HTML内のボタンクリックなどのイベントから、Android側のメソッドを呼び出します。

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

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

この例では、ボタンがクリックされるとJavaScriptのshowAndroidToast()関数が実行され、続いてAndroidネイティブ側のshowToast()メソッドが呼び出されてトーストが表示されます。

音声再生への応用

同じ仕組みを応用すれば、音声再生も実現できます。JavaScriptからAndroid側のメソッドを呼び出し、その内部でMediaPlayerを生成して音声ファイルを再生することで、WebViewのaudioタグに依存しない安定した再生処理が可能になります。

なお、JavaScriptインターフェースを利用する際は、セキュリティ上の理由からAPIレベル17（Android 4.2）以降では必ず@JavascriptInterfaceアノテーションを付与する必要がある点に注意してください。