HTML5 <audio> tag not working in Android Webview

Question

the HTML5 audio tag doesn't seem to work in the web view if the source file is stored locally. i.e.

<audio controls="controls">
   <source src="my_local_audio_file.mp3" type="audio/mpeg" />
</audio>

It works when the file is accessed from a server like src="http://example.com/audio.mp3"

I am trying it on Android ICS.

There are a few workarounds as stated here . But i don't understand why this problem is occurring.

Any solutions or insights as to why this is happening?

Thank you.

Solution 1

this is just alternet way to achieve goal to play audio from html file

use Mediaplayer (http://developer.android.com/reference/android/media/MediaPlayer.html) of Android for playing audio. you can invoke function of android from javascript that you have written in HTML file..

this is example of how you can invoke function written in java file from javascript code

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
--------------------------------
public class WebAppInterface {

    Context mContext;
    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

---------------------------
java sript code

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

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

This way you invoke audio from Android code.

Solution 2

this seems like a very stupid bug inside the webview. One workaround currently is to "encode" the audio as an mp4 file and then link it via the video tag.

<video width="100%" height="48" controls>
     <source src="audioonly.mp4" type="video/mp4">
</video>

This will show a black rectangle (no video) and also the controls inside. It is by far not the best solution but the easiest. You can use Miro Video Converter on Mac and Windows to create such a mp4.

Good luck :)