audio - Android: Playing an Asset Sound Using WebView

Question

Welcome To Ask or Share your Answers For Others

audio - Android: Playing an Asset Sound Using WebView

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

audio - 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? >.<

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T02:56:40+0000

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().

Categories

audio - Android: Playing an Asset Sound Using WebView

audio - Android: Playing an Asset Sound Using WebView

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags