标题: Playing Audio on Android from an HTML5 File[转]
作者: dnawo
日期: 2016-10-14 10:09 AM
分类: Android编程
内容: Introduction
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="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
This is the Java that I used to initially configure the WebView:
复制内容到剪贴板 程序代码 //Configures the WebView during the onCreate method
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView myWebView = (WebView) findViewById(R.id.webview);
//Set it to a webChromeClient
myWebView.setWebChromeClient(new WebChromeClient());
//the default for WebView is that Javascript isn't enabled in WebView
myWebView.getSettings().setJavascriptEnabled(true);
//the index.html file is placed in the assets folder
myWebView.loadUrl("file:///android_asset/index.html");
}
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 java.io.IOException;
import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.media.MediaPlayer;
import android.webkit.JavascriptInterface;
public class AudioInterface {
Context mContext;
AudioInterface(Context c) {
mContext = c;
}
//Play an audio file from the webpage
@JavascriptInterface
public void playAudio(String aud) { //String aud - file name passed
//from the Javascript function
final MediaPlayer mp;
try {
AssetFileDescriptor fileDescriptor =
mContext.getAssets().openFd(aud);
mp = new MediaPlayer();
mp.setDataSource(fileDescriptor.getFileDescriptor(),
fileDescriptor.getStartOffset(),
fileDescriptor.getLength());
fileDescriptor.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();
}
}
}
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
AndAud.playAudio("audio/One.mp3");
</script>
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.
dnawo补充：
若想让playAudio方法也能播放网络音频，只需稍做修改即可：
复制内容到剪贴板 程序代码@JavascriptInterface
public void playAudio(String aud) {
final MediaPlayer mp;
try {
mp = new MediaPlayer();
if(aud.startsWith("http://")){
mp.setDataSource(aud);
}else{
AssetFileDescriptor fileDescriptor = mContext.getAssets().openFd(aud);
mp.setDataSource(fileDescriptor.getFileDescriptor(),
fileDescriptor.getStartOffset(),
fileDescriptor.getLength());
fileDescriptor.close();
}
mp.prepare();
mp.start();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
资源链接
[1].原文链接：http://www.codeproject.com/Tips/677841/Playing-Audio-on-Android-from-an-HTML-File
[2].Playing local audio file in Android webview app：http://stackoverflow.com/questions/9201893/playing-local-audio-file-in-android-webview-app
[3].android webview加载html5 audio标签 路径问题：http://zhidao.baidu.com/question/589462287
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.049 ms
标题: Playing Audio on Android from an HTML5 File[转]
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.049 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.049 ms