本文介绍: 需要注意的是,由于安卓设备硬件配置性能各异,因此录音质量可靠性可能会有所不同。遇到一个需求需要一个手机网页录音功能嵌入webview中去,用安卓原生录音倒是可以,但是想着尽量去安卓开发,就想着用纯的js前端代码实现录音功能需要注意的是,在使用 pause() 和 resume() 方法时,我们需要考虑到录音时长和暂停/恢复时的延迟时间,以确保正确的录音效果。———————–这是一条美丽的分割线———————–

h5前端实现点击录制音频

遇到一个需求需要做一个手机网页录音的功能,嵌入webview中去,用安卓原生录音倒是可以,但是想着尽量去安卓化开发,就想着用纯的js前端代码实现录音功能。

在 Web 应用程序中,JavaScript运行浏览器中的客户端脚本语言,不具有直接访问设备硬件的能力。因此,如果要在 Web 应用程序实现录音功能,通常需要通过 Web API 或第三方库来访问硬件设备

HTML5 提供了 MediaDevices.getUserMedia() 方法可以访问摄像头麦克风设备,因此可以通过该 API 实现录音功能。下面是一个使用 MediaDevices.getUserMedia() 实现录音的示例代码

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    // 录音结束时,停止并下载录音文件
    mediaRecorder.addEventListener("dataavailable", function(event) {
      var audioFile = new Blob([event.data], { type: "audio/wav" });
      var audioURL = URL.createObjectURL(audioFile);
      var downloadLink = document.createElement("a");
      downloadLink.href = audioURL;
      downloadLink.download = "recording.wav";
      downloadLink.click();
    });

    // 录音时间到达指定时长时,自动停止录音
    setTimeout(function() {
      mediaRecorder.stop();
    }, 10000);
  })
  .catch(function(error) {
    console.error(error);
  });

上述代码使用 navigator.mediaDevices.getUserMedia() 方法访问麦克风设备,并使用 MediaRecorder API 进行录音。录音结束时,将录音数据转换为 WAV 格式的 Blob 对象,并通过创建一个下载链接来将录音文件下载到本地

给不了解的同学解释一下navigator前端的navigator是什么

需要注意的是,不同浏览器对 MediaDevices.getUserMedia() 和 MediaRecorder支持程度可能有所不同,因此在实现录音功能时需要进行兼容测试处理。此外,对于安卓的 WebView 中,也需要确保 WebView 支持 MediaDevices.getUserMedia() 和 MediaRecorder

那么就会有同学问:WebView支持吗?瞧这段:

从安卓 5.0 (Lollipop) 开始,WebView 已经支持 WebRTC,其中包括 MediaDevices.getUserMedia() 和 MediaRecorder API。因此,如果你的应用程序运行在安卓 5.0 或更高版本设备上,并且你的 WebView 版本最新的,那么它应该支持 MediaDevices.getUserMedia() 和 MediaRecorder
安卓中,WebView 的版本操作系统版本是分开更新的。因此,如果你的应用程序需要在较旧版本的安卓设备运行,那么你需要检查 WebView 版本是否支持所需的 API,并在必要时使用兼容处理方法实现录音功能。
需要注意的是,由于安卓设备硬件配置性能各异,因此录音的质量可靠性可能会有所不同。在开发应用程序时,应该对录音功能进行充分测试,并尽可能地提供用户控制录音质量格式选项,以确保最佳的用户体验

获得了软硬件支持,那么就直接用吧。其他的一些用法

例如,下面的示例代码展示如何使用 pause() 和 resume() 方法来实现暂停和继续录音:

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    // 录音时间到达指定时长时,自动暂停录音
    setTimeout(function() {
      mediaRecorder.pause();
      console.log("录音已暂停");
    }, 5000);

    // 在暂停后,再次开始录音
    setTimeout(function() {
      mediaRecorder.resume();
      console.log("录音已恢复");
    }, 10000);

    // 录音结束时,停止并下载录音文件
    mediaRecorder.addEventListener("dataavailable", function(event) {
      var audioFile = new Blob([event.data], { type: "audio/wav" });
      var audioURL = URL.createObjectURL(audioFile);
      var downloadLink = document.createElement("a");
      downloadLink.href = audioURL;
      downloadLink.download = "recording.wav";
      downloadLink.click();
    });
  })
  .catch(function(error) {
    console.error(error);
  });

在上述代码中,我们使用 pause() 方法在 5 秒钟后暂停录音,并使用 resume() 方法在 10 秒钟后恢复录音。当录音结束时,我们将录音数据转换为 WAV 格式的 Blob 对象,并创建一个下载链接将录音文件下载到本地。

需要注意的是,在使用 pause() 和 resume() 方法时,我们需要考虑到录音时长和暂停/恢复时的延迟时间,以确保正确的录音效果

这里前端js调用录音功能就完成了。但是这种方法有一个致命的不方便,就是无法使用ip进行移动调试因为网页浏览器安全机制,他只允许httpslocalhost访问麦克风摄像头等硬件,所以这给我们移动开发带来了不便,无法进行本地调试,当然如果想搞一个本地的安全证书,又额外增加了工作量,还是建议下面这种方法吧,通过js和Java接口调用安卓的硬件是最方便的了。

———————–这是一条美丽的分割线———————–

接着往下看吧:

在安卓的WebView中,你可以使用JavaScript来调用安卓系统原生API,以实现各种功能,包括录音。

以下是一个使用JavaScript和安卓原生API在WebView中实现录音的简单示例:

1、首先,在你的WebView中添加一个JavaScript接口以便JavaScript代码可以调用安卓原生API。你可以使用addJavascriptInterface方法来完成这个步骤

// 在Java代码中添加一个JavaScript接口
webView.addJavascriptInterface(new JavaScriptInterface(), "JsBridge");

然后再在接口类中添加安卓方法供js调用


        var recorder: MediaRecorder? = null
        var isRecording = false//记录是否正在录制
        var filePath = ""

        // 在 Kotlin 中添加一个方法来接收前端页面发送的开始录音指令
        @JavascriptInterface
        fun startRecord(fileName: String) {
            if (recorder == null) {
                recorder = MediaRecorder()
                recorder!!.setAudioSource(MediaRecorder.AudioSource.MIC);
                recorder!!.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
                // 设置音频编码器比特
                recorder!!.setAudioEncoder(MediaRecorder.AudioEncoder.AAC);
                recorder!!.setAudioEncodingBitRate(128000);
            }
            // 获取应用程序内部存储目录
            val appDir: File = MyApp.app.filesDir
            // 创建一个新的子目录存储录制音频文件
            val audioDir = File(appDir, "audio")
            if (!audioDir.exists()) {
                audioDir.mkdirs()
            }
            // 设置输出文件路径名称
            filePath = File(audioDir, fileName).absolutePath
            recorder!!.setOutputFile(filePath)

            recorder!!.prepare()
            recorder!!.start()
            isRecording = true
            context.runOnUiThread {
                binding.webView.loadUrl("javascript:recordStartCallback('${filePath}')")
            }
        }

        // 在 Kotlin 中添加一个方法来接收前端页面发送的暂停录音指令
        @JavascriptInterface
        fun pauseRecord() {
            if (isRecording) {
                recorder!!.pause()
                isRecording = false
            }
        }

        // 在 Kotlin 中添加一个方法来接收前端页面发送的结束录音指令
        @JavascriptInterface
        fun stopRecord() {
            if (isRecording) {
                // 在需要停止录制时停止并释放资源
                recorder!!.stop();
                recorder!!.release();
                recorder = null;
                isRecording = false
                context.runOnUiThread {
                    val file = File(filePath)
      				// 在这里可以做录音结果file的处理,例如上传录音文件到服务器上传成功的回调文件地址可以通过js预留的录音完成回调方法recordFinishCallback给到js
                }
            }
        }

        // 在 Kotlin 中添加一个方法来接收前端页面发送播放录音指令,这是录音完成以后的播放功能
        @JavascriptInterface
        fun playRecord() {
            if (filePath != "") {
                val mediaPlayer = MediaPlayer()
                mediaPlayer.setDataSource(filePath)
                mediaPlayer.prepare()
                mediaPlayer.start()
                mediaPlayer.setOnCompletionListener {
                    // 音频播放完毕
                    mediaPlayer.release();
                }
            }
        }

2、接下来,在你的JavaScript代码中,你可以使用Android对象调用安卓原生API。

    // 调用安卓端的开始录音方法
    startRecording() {
      window.JsBridge.startRecord("audio_"+Date.now()+".mp3")
    },
    // 调用安卓端的暂停录音方法
    pauseRecord() {
      window.JsBridge.pauseRecord()
    },
    // 调用安卓端的结束录音方法
    stopRecord() {
      window.JsBridge.stopRecord()
    },
    // 接收安卓端发送的开始录音回调
    recordStartCallback(filePath) {
      console.log('录音已开始,文件路径为:' + filePath)
      //开始录音
    },
    // 接收安卓端发送的结束录音回调
    recordFinishCallback(filePath) {
      console.log('录音已结束,服务器地址为:' + filePath)
      this.filePath = filePath
    },

3、最后,记得在你的安卓应用程序中授予RECORD_AUDIO权限然后activity动态申请一下权限以便应用程序可以访问麦克风并进行录音。

<!-- 在AndroidManifest.xml添加RECORD_AUDIO权限 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

需要注意的是,在实际开发中,你需要进行一些适配需求工作,而且你能看到这里说明你已经不是小白了,本文有很多无用的布局的代码没有贴出想必不会影响到你的理解

本文操作就到这里了,需要的同学自行参悟,如果不小心帮到了你,那么不胜荣幸;
如果没有帮到你,那么很遗憾耽误了你宝贵的时间,希望你也不要因此愤恨,毕竟人非圣贤,我能力有限,不能满足所有人的需求,看开些就好。

原文地址:https://blog.csdn.net/Spy003/article/details/129977058

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_16515.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注