Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 tag not working in Android Webview
When HTML5 audio/video tags don't work in Android WebView, you can bridge JavaScript with native Android MediaPlayer functionality. This approach allows HTML content to trigger native audio playback through JavaScript interfaces.
Setting Up JavaScript Interface
First, create a WebView with a JavaScript interface that exposes Android's MediaPlayer to your HTML content:
WebView wv = (WebView) findViewById(R.id.webview);
wv.getSettings().setJavaScriptEnabled(true);
wv.addJavascriptInterface(new WebAppInterface(this), "Android");
public class WebAppInterface {
Context mContext;
MediaPlayer mediaPlayer;
WebAppInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void playAudio(String audioUrl) {
try {
if (mediaPlayer != null) {
mediaPlayer.release();
}
mediaPlayer = new MediaPlayer();
mediaPlayer.setDataSource(audioUrl);
mediaPlayer.prepare();
mediaPlayer.start();
} catch (Exception e) {
e.printStackTrace();
}
}
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
HTML and JavaScript Implementation
In your HTML file, create buttons and JavaScript functions to interact with the Android interface:
<!DOCTYPE html>
<html>
<head>
<title>Android WebView Audio</title>
</head>
<body>
<h2>Audio Controls</h2>
<input type="button" value="Play Audio" onClick="playAndroidAudio('file:///android_asset/audio.mp3')" />
<input type="button" value="Show Toast" onClick="showAndroidToast('Hello Android!')" />
<script>
function playAndroidAudio(audioPath) {
if (typeof Android !== 'undefined') {
Android.playAudio(audioPath);
} else {
console.log('Android interface not available');
}
}
function showAndroidToast(toast) {
if (typeof Android !== 'undefined') {
Android.showToast(toast);
} else {
console.log('Android interface not available');
}
}
</script>
</body>
</html>
Key Implementation Points
Enable JavaScript in WebView settings and always check if the Android interface is available before calling native methods. Place audio files in the assets folder and reference them using file:///android_asset/ URLs.
Error Handling
Add proper error handling in both JavaScript and Android code:
@JavascriptInterface
public void playAudio(String audioUrl) {
try {
if (mediaPlayer != null && mediaPlayer.isPlaying()) {
mediaPlayer.stop();
mediaPlayer.release();
}
mediaPlayer = new MediaPlayer();
mediaPlayer.setDataSource(audioUrl);
mediaPlayer.prepareAsync();
mediaPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
mp.start();
}
});
mediaPlayer.setOnErrorListener(new MediaPlayer.OnErrorListener() {
@Override
public boolean onError(MediaPlayer mp, int what, int extra) {
Toast.makeText(mContext, "Audio playback error", Toast.LENGTH_SHORT).show();
return false;
}
});
} catch (Exception e) {
Toast.makeText(mContext, "Error: " + e.getMessage(), Toast.LENGTH_SHORT).show();
}
}
Conclusion
Using JavaScript interfaces with Android's MediaPlayer provides a reliable workaround for HTML5 audio issues in WebView. This approach gives you full control over audio playback while maintaining seamless integration between web content and native Android functionality.
728 Views
