您现在的位置是:首页 > 技术教程 正文

已解决:H5移动端网页实现录音功能,js实现录音功能,包括安卓webview接口也可以使用

admin 阅读: 2024-03-28
后台-插件-广告管理-内容页头部广告(手机)

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); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

上述代码使用 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); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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

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

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

-----------------------这是一条美丽的分割线-----------------------

接着往下看吧:

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

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

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

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

然后再在接口类中添加安卓方法供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(); } } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

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 },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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

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

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

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

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索