HTML5 <audio> 标签在 Android Webview 中不起作用答案

【问题标题】：HTML5 <audio> tag not working in Android WebviewHTML5 <audio> 标签在 Android Webview 中不起作用
【发布时间】：2013-03-19 08:17:17
【问题描述】：

如果源文件存储在本地，HTML5 音频标签似乎在 Web 视图中不起作用。即

<audio controls="controls">
   <source src="my_local_audio_file.mp3" type="audio/mpeg" />
</audio>

当从像src="http://example.com/audio.mp3"这样的服务器访问文件时它可以工作

我正在 Android ICS 上试用它。

如here 所述，有一些解决方法。但我不明白为什么会出现这个问题。

关于为什么会发生这种情况的任何解决方案或见解？

谢谢。

【问题讨论】：

尝试给出完整路径。
我尝试给出完整路径。还是不行。
文件的位置是什么？
把 mp3 文件放到 html 文件夹里试试看是否可以工作...
没有@Vineet1982。那也行不通。我的文件位于assets 文件夹中，我通过file:///android_asset/my_file.html 访问它

标签： android html webview html5-audio

【解决方案1】：

这只是实现从 html 文件播放音频的目标的替代方式

使用 Android 的 Mediaplayer (http://developer.android.com/reference/android/media/MediaPlayer.html) 播放音频。你可以从你写在 HTML 文件中的 javascript 调用 android 的函数。

这是如何从 javascript 代码调用用 java 文件编写的函数的示例

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
--------------------------------
public class WebAppInterface {

    Context mContext;
    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

---------------------------
java sript code

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

这样您就可以从 Android 代码中调用音频。

【讨论】：

这就是我最终所做的。使用 javaScriptInterface 并从 javascript 调用该函数。我也为视频做了同样的事情。

【解决方案2】：

这似乎是 webview 中的一个非常愚蠢的错误。目前的一种解决方法是将音频“编码”为 mp4 文件，然后通过 video 标签链接。

<video width="100%" height="48" controls>
     <source src="audioonly.mp4" type="video/mp4">
</video>

这将显示一个黑色矩形（无视频）以及里面的控件。到目前为止，这不是最好的解决方案，而是最简单的解决方案。您可以在 Mac 和 Windows 上使用 Miro Video Converter 来创建这样的 mp4。

祝你好运:)

【讨论】：