微信网页录音与NativeApp网页录音-优快云博客

本文介绍如何在NativeApp中实现网页录音功能，包括使用Android本地方法进行录音操作，并通过JavaScript接口供前端调用。提供了关键代码示例，涵盖初始化WebView、设置参数、实现录音开始与停止等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信网页录音注意事项：
1.实现微信网页录音，需使用微信JS-SDK。
2.网页必须部署在带域名的服务器下。（微信JS-sdk
必须在域名服务器下运行）
3.在微信公众号中，需绑定自己的域名。
NativeApp网页录音注意事项：
实现NativeApp网页录音可以参考微信网页录音，通过Android本地的方法实现录音的操作，然后提供接口，由网页的js调用。
关键代码示例：
app代码

 public void initView()
    {
        webView=(WebView)findViewById(R.id.webview);


        //javascpript
        websetting= webView.getSettings();
        websetting.setJavaScriptEnabled(true);
        websetting.setBuiltInZoomControls(true);
        websetting.setSupportZoom(true);
        websetting.setDefaultTextEncodingName("GBK");
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient()
        {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
            }
        });
        webView.addJavascriptInterface(new NativeAppInterface(MainActivity.this),"AndroidNative");
        webView.loadUrl(url);
    }


    public  class  NativeAppInterface
    {
        private MediaRecorder mRecorder;
        private String path;
        Context _context;
              NativeAppInterface(Context context)
              {
                        _context=context;
              }

          public void  showToast(String tost)
          {

              Toast.makeText(_context,tost,Toast.LENGTH_LONG).show();
          }
        public void startRecorder() {
            try {
                Log.v("info","come in");
                //+System.nanoTime()
                 path= Environment.getExternalStorageDirectory().getAbsolutePath()+"/ly/";
                File mRecAudioFile = new File(path);
                File pathFile = mRecAudioFile.getParentFile();
                if (!pathFile.exists())
                    pathFile.mkdirs();
                mRecorder = new MediaRecorder();
                mRecorder.reset() ;//重置状态
                mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);//设置麦克
                mRecorder.setOutputFormat(MediaRecorder.OutputFormat.DEFAULT);//输出格式
                mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.DEFAULT);//文件编码
                mRecorder.setOutputFile(mRecAudioFile.getAbsolutePath());//输出路径
                mRecorder.setAudioEncodingBitRate(4000);
                mRecorder.prepare();
                mRecorder.start();
            } catch (Exception e) {
                e.printStackTrace();
                stopRecorder();
            }
        }
        public void stopRecorder() {
            if (mRecorder != null) {
                try {
                    mRecorder.stop();
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                try {
                    mRecorder.reset() ;//重置状态
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                try {
                    mRecorder.release();
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }

                mRecorder = null;
            }

        }
    }

前端页面代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Android手机网页录音</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <button id="recorder" onclick="startrecoder()">开始录音</button>
    </div>
     <div>
    <button id="stopbtn" onclick="stoprecoder()">停止录音</button>
    </div>
     <div>
    <button id="playbtn" onclick="showtoast('hello~~~~')">播放</button>
    </div>
     <div>
    <button id="stopplaybtn" onclick="stopplay()">停止播放</button>
    </div>
     <div>
    <button id="surebtn">确定</button>
    </div>
    </form>
</body>
</html>
<script>
    //录音
    function startrecoder()
    {
        AndroidNative.startRecorder();
    }
    //停止
    function stoprecoder()
    {
        AndroidNative.stopRecorder();
    }
    //播放
    function playrecoder()
    {

    }
    //
    function showtoast(tost)
    {
        AndroidNative.showToast(tost);

    }

</script>