遇到一个需求，需要做一个手机网页录音的功能，嵌入到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进行移动端调试，因为网页浏览器有安全机制，他只允许https和localhost访问麦克风摄像头等硬件，所以这给我们移动开发带来了不便，无法进行本地调试，当然如果想搞一个本地的安全证书，又额外增加了工作量，还是建议下面这种方法吧，通过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" />
需要注意的是，在实际开发中，你需要进行一些适配你需求的工作，而且你能看到这里，说明你已经不是小白了，本文有很多无用的布局的代码没有贴出想必不会影响到你的理解。
本文操作就到这里了，需要的同学自行参悟，如果不小心帮到了你，那么不胜荣幸；
如果没有帮到你，那么很遗憾耽误了你宝贵的时间，希望你也不要因此愤恨，毕竟人非圣贤，我能力有限，不能满足所有人的需求，看开些就好。
扫一扫
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
