Android: Playing an Asset Sound Using WebView
I am trying to play a sound from the assets folder when a user clicks on an tag on my application's WebView. I found that I can use a new class extending WebViewClient to detect the extension of a link and if it is an mp3 file it can play it via the default Audio Player. But I want it to play within the activity without starting a new activity.
I used the following links as references: Sound in Webview and Error creating MediaPlayer with Uri or file in assets
But it didn't work.
I tried using the following codes to do so:
package com.rangga.test.webview.sound;
import android.content.Intent;
import android.content.res.AssetFileDescriptor;
import android.media.MediaPlayer;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyWebViewClient extends WebViewClient{
public MediaPlayer mp;
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
if(url.endsWith(".mp3")){
mp = new MediaPlayer();
AssetFileDescriptor afd = getAssets().openFd(url);
mp.setDataSource(afd.getFileDescriptor());
mp.start();
return true;
}else{
return true;
}
}
}
I get an undefined method error on the getAssets(), I tried Googleing it and it says something about passing a Context. I am very new to Android and Object Oriented programming, so I am wondering if this the right way to do it and if there is a simple explanation on what a Context is. Thank you.
Below are my complete codes:
MainActivity.class
package com.rangga.test.webview.sound;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
WebView webMain;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webMain = (WebView) findViewById(R.id.webMain);
webMain.loadUrl("file:///android_asset/webpages/test.html");
webMain.setWebViewClient(new MyWebViewClient());
}
}
EDIT
So the codes works thanks to https://stackoverflow.com/users/488241/squonk but now another problem occurs, I updated the MyWebViewClient into the following:
package com.rangga.test.webview.sound;
import java.io.IOException;
import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.media.MediaPlayer;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyWebViewClient extends WebViewClient{
public MediaPlayer mp;
private Context context = null;
public MyWebViewClient(Context c){
this.context = c;
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
if(url.endsWith(".mp3")){
mp = new MediaPlayer();
try {
AssetFileDescriptor afd = context.getAssets().openFd(url);
mp.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength());
afd.close();
mp.prepare();
mp.start();
} catch (IllegalArgumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return true;
}else{
return true;
}
}
}
But I get a java.io.FileNotFoundException, the path seems right though. I've put 2 mp3 files in assets/webpages/sounds/1.mp3 and assets/webpages/1.mp3 and used the following html codes to test it:
<html>
<head>
<title>Test Audio</title>
</head>
<body>
<a href="file:///android_asset/webpages/sounds/1.mp3">File Asset</a><br/>
<a href="1.mp3">Same Folder</a>
</body>
</html>
But I get the following error on LogCat:
06-11 06:20:37.955: W/System.err(377): java.io.FileNotFoundException: file:///android_asset/webpages/1.mp3
06-11 06:20:37.966: W/System.err(377): at android.content.res.AssetManager.openAssetFd(Native Method)
06-11 06:20:37.974: W/System.err(377): at android.content.res.AssetManager.openFd(AssetManager.java:314)
06-11 06:20:37.974: W/System.err(377): at com.rangga.test.webview.sound.MyWebViewClient.shouldOverrideUrlLoading(MyWebViewClient.java:30)
06-11 06:20:37.985: W/System.err(377): at android.webkit.CallbackProxy.uiOverrideUrlLoading(CallbackProxy.java:193)
06-11 06:20:38.000: W/System.err(377): at android.webkit.CallbackProxy.handleMessage(CallbackProxy.java:304)
06-11 06:20:38.005: W/System.err(377): at android.os.Handler.dispatchMessage(Handler.java:99)
06-11 06:20:38.005: W/System.err(377): at android.os.Looper.loop(Looper.java:123)
06-11 06:20:38.014: W/System.err(377): at android.app.ActivityThread.main(ActivityThread.java:4363)
06-11 06:20:38.014: W/System.err(377): at java.lang.reflect.Method.invokeNative(Native Method)
06-11 06:20:38.024: W/System.err(377): at java.lang.reflect.Method.invoke(Method.java:521)
06-11 06:20:38.024: W/System.err(377): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:860)
06-11 06:20:38.024: W/System.err(377): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
06-11 06:20:38.054: W/System.err(377): at dalvik.system.NativeStart.main(Native Method)
Is there something wrong with the way I called the file? Thanks before.
SOLVED
Thx to squonk's suggestions, I tried the following codes to make it work and it worked well, thank you squonk!
package com.rangga.test.webview.sound;
import java.io.IOException;
import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.media.MediaPlayer;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyWebViewClient extends WebViewClient{
public MediaPlayer mp;
private Context context = null;
public MyWebViewClient(Context c){
this.context = c;
mp = new MediaPlayer();
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
if(url.endsWith(".mp3")){
url = url.replace("file:///android_asset/webpages/", "");
Log.i("MyWebViewClient", url);
try {
AssetFileDescriptor afd = context.getAssets().openFd(url);
mp = new MediaPlayer();
mp.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength());
afd.close();
mp.prepare();
mp.start();
} catch (IllegalArgumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return true;
}else{
return true;
}
}
}
And the html to test it:
<html>
<head>
<title>Test Audio</title>
</head>
<body>
<a href="webpages/1.mp3">File Asset</a><br/>
</body>
</html>
Though I did get an error if I repeatedly click it, but that's another question :D How does one close one's question? >.<
Answer
Where you declare your MediaPLayer in MyWebViewClient, add the following...
public class MyWebViewClient extends WebViewClient{
public MediaPlayer mp;
private Context context = null; // Add this line
...
}
Then add a constructor to MyWebViewClient as follows...
public MyWebViewClient(Context context) {
this.context = context;
}
Then in shouldOverrideUrlLoading(...) get your assets as follows...
AssetFileDescriptor afd = context.getAssets().openFd(url);
In your MainActivity set the WebViewClient by passing this (which is the Activity Context) as follows...
webMain.setWebViewClient(new MyWebViewClient(this));
Also you should return false from shouldOverrideUrlLoading(...) if the url ends with '.mp3' - this shows your WebView is handling things and the 'host' application should not start an instance of the stock web browser.
EDIT: To play audio files from the assets directory, you need to set the data source differently - see the accepted answer to play-audio-file-from-the-assets-directory.
Also you should call mp.prepare() before calling mp.start().