Click here to Skip to main content
13,503,617 members
Click here to Skip to main content
Add your own
alternative version


6 bookmarked
Posted 3 Nov 2013

Playing Audio on Android from an HTML5 File

, 3 Nov 2013
Rate this:
Please Sign up or sign in to vote.
Learn how to play Audio in an Android app from an HTML5 page in the Apps Assets folder.


Earlier today, I came across a problem. I have been working on an App in Android that displays HTML5 files from the assets folder inside a WebView. One of the big problems with playing Audio in an HTML5 page is that a lot of browsers do not support the <audio> tag; this includes several versions of the WebView control in different versions of Android. The bottom line is that you can't expect standardized results across different versions of Android when using the HTML5 <audio> tag. So we're going to use a workaround that uses the native Android method of playing audio.

Here is a synopsis of the paragraphs below that describe how to implement the code.

  • Configuring your WebView control
  • Creating an Audio Interface for the HTML5 web page
  • Attaching the Audio Interface to the WebView control
  • Invoking an Audio Interface function from the HTML5 page using JavaScript

Implementing the Code

Configuring your WebView control

Create a WebView control inside your layout. This is the XML code for the layout I used:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android=""



    android:layout_height="fill_parent" />

This is the Java that I used to initially configure the WebView:

 //Configures the WebView during the onCreate method
protected void onCreate(Bundle savedInstanceState) {

    WebView myWebView = (WebView) findViewById(;

    //Set it to a webChromeClient
    myWebView.setWebChromeClient(new WebChromeClient());

    //the default for WebView is that JavaScript isn't enabled in WebView

    //the index.html file is placed in the assets folder

Creating an Audio Interface for the HTML5 web page

Next, we're going to create an AudioInterface Java class to play audio MP3s from the assets folder.

Create a new Java Class and call it "AudioInterface.Java"

Here is the Java code for the class:

import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.webkit.JavascriptInterface;

public class AudioInterface {
	Context mContext;

	AudioInterface(Context c) {
		mContext = c;
	//Play an audio file from the webpage
	public void playAudio(String aud) { //String aud - file name passed 
	                                    //from the JavaScript function
		final MediaPlayer mp;

			  try {
				  AssetFileDescriptor fileDescriptor = 
              	                  mp = new MediaPlayer();
			  } catch (IllegalArgumentException e) {
	                          // TODO Auto-generated catch block
	          	  } catch (IllegalStateException e) {
	                          // TODO Auto-generated catch block
	          	  } catch (IOException e) {
	                          // TODO Auto-generated catch block

The above code creates a public method that accepts a string argument which is used as the URL for the mp3 file location. So I store my mp3 files in a sub folder in the assets folder called audio. So the playAudio method needs an argument similar to this: "audio/example.mp3". If it was stored directly in the assets folder it would look like this: "example.mp3".

Attaching the Audio Interface to the WebView control

Now, we need to attach the AudioInterface class to the WebView control in the onCreate method in order to make it available for the JavaScript code. So add the following code to the onCreate method we edited earlier in the layout's Java file:

myWebView.addJavascriptInterface(new AudioInterface(this), "AndAud");

Invoking an Audio Interface function from the HTML5 page using JavaScript

Now we can call the playAudio function from JavaScript inside the HTML5 file by using this method:

<script type="text/javascript">
	//AndAud is the alias of the AudioInterface class that we attached to the WebView

And that's it, it's kind of an annoying work around but at least you know it will work rather than waiting on the <audio> kinks to be worked out.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kyle A.B.
Software Developer
United States United States
I am primarily a C# and ASP.NET Developer but I am beginning to drift towards app development with Apache Cordova (HTML, CSS, JavaScript)

You may also be interested in...


Comments and Discussions

QuestionPause/Stop addition Pin
Member 1062774320-Jul-16 2:31
memberMember 1062774320-Jul-16 2:31 
QuestionGreat, but how to stop ? Pin
Member 1170188819-May-15 0:44
memberMember 1170188819-May-15 0:44 
QuestionYou're my hero! Pin
johnny_tal1-Aug-14 1:48
memberjohnny_tal1-Aug-14 1:48 
SuggestionThank you very much! Pin
Seo Seo19-Apr-14 8:21
memberSeo Seo19-Apr-14 8:21 
QuestionPlaying Audio on Android from an HTML5 File Pin
Member 1053493119-Jan-14 20:15
memberMember 1053493119-Jan-14 20:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180417.1 | Last Updated 3 Nov 2013
Article Copyright 2013 by Kyle A.B.
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid