关于前端与APP录音相关的笔记

一、前言

主要针对前端适配录音能力的简要记录，针对默认的wav及其可能需要转换到特定的mp3之类格式以适配需求的问题。（这类通常是兼容tts或客服语音备份）
这里纠结点主要会是在 ios/android设备的兼容及 类型转换的问题

二、内容组成

主要围绕下面几个重要组成部分
①权限获取
②针对设备兼容
③内容类型转换
④传输存储

1、权限获取

这里首先需要确定的一点是，获取录音权限，除了通常的 localhost 之外，仅有证书存在的domain/ip 浏览器才会允许获取权限。（哪怕是自定义证书也是可以的）

针对app端部分内容嵌入适配

这里主要是考虑到app的基础配置，基于前者的情况下（截止操作时间2023.8.1）

Android：

其实根据通用的方式，就是动态设置，哪个webview使用设置哪个。

<!-- 所需权限列表 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

//伪代码部分AudioWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic void onProgressChanged(WebView view, int newProgress) {super.onProgressChanged(view, newProgress);}@Overridepublic void onPermissionRequest(PermissionRequest request) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){//直接无脑同意即可request.grant(request.getResources());}}});
//这里是基础链接
AudioWebView.loadUrl("{{baseUrl}}");

IOS

这里补充一点，即便webview已经允许你调用录音，某种情况下，其实也存在某些版本每次调用前询问，所以最好做好预案
Tips: ios中叫做 WKWebView

//伪代码部分
import AVFoundation// 请求录音权限
func requestRecordPermission() {AVAudioSession.sharedInstance().requestRecordPermission { granted inif granted {// 用户授权了录音权限，可以加载WebView了self.loadWebView()} else {// 用户拒绝了录音权限，处理相应逻辑// 例如给出提示或者禁用录音功能}}
}// 加载WebView
func loadWebView() {// 在此处加载WebView，调用录音的网页功能
}

2、针对设备兼容

这里的兼容主要是针对设备部分的区分吧。
首先声明 ios 与 Android 的区别
android : 在对应的webview中当且通常仅需首次获取权限即可。（高版本会有选项永久还是单次）
ios： 通常在 wkwebvie 中，每次都需要获取录音权限（这个是兼容低版本ios考虑）

建议解决方案：

android

针对安卓的内容可以采取默认仅请求一次，然后利用本地缓存来保存标记。
当标记失效，则可以通过其他方式让其重新授权即可

ios

针对苹果的内容，不可排除新版本已经解决这个问题，但是出于兼容考虑
还是预先做好 调用权限 的处理，避免需要的时候不存在权限。

3、内容类型转换

这里主要是考虑到可能存在的调用 asr接口 ，会需要适配不同的音频类型。
可以简单参考 语音厂商参数对比

默认来说，浏览器部分，我们通常采用 window.AudioContext || window.webkitAudioContext 的模式来获取录音内容。

如果需要切换类型，我们可以采用 lame.js 来转换所需的MP3类型 。

Tip: 其他类型，目前暂未需要，如有建议，感谢提供

4、传输存储

整个过程中，其实最好使用blob格式传输，附加文件类型
示例 ：let blob = new Blob(mp3Data, { type: "audio/mp3" });

例如websock中传递的时候，实际上大都需要我们重新加载一下格式，如果直接blob可能存在无法识别的问题

// 伪代码
// 其中 res 为传递过程中的blob内容
if (suffix == ".mp3" || suffix == ".wav") {let newBlob = new Blob([res.blob], {type: "audio/" + types,});console.log("image types:" + types);console.log("and the new blob is:" + newBlob);let originSrc = (window.URL || window.webkitURL).createObjectURL(newBlob);attachmentDom ='<audio controls="controls" src="' +originSrc +'"></audio>';suffixHandler = true;}

三、拓展内容

自动播放部分

这里其实android 很容易实现，直接通过controls即可控制auto 自动播放
主要是 ios 部分, 由于ios的一些机制问题，不能直接去自动播放可以参考如下的方式

其实就是模拟用户交互来达成

/*** 初始化录音*/
function forceSafariPlayAudio() {if (trys == 0) {audio.src = 'https://www.runoob.com/try/demo_source/horse.mp3'audio.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效audio.play(); // iOS 7/8 仅需要 play 一下trys = 1audioType = 1}}$(function () {function log(info) {console.log(info);}audio = document.getElementById('bgmusic');audio.loop = falseaudio.muted = true// 可以自动播放时正确的事件顺序是// loadstart --> loadedmetadata --> loadeddata -->canplay -->play --> playing// 不能自动播放时触发的事件是// iPhone5  iOS 7.0.6 loadstart// iPhone6s iOS 9.1   loadstart -> loadedmetadata -> loadeddata -> canplayaudio.addEventListener('loadstart', function () {log('loadstart');}, false);audio.addEventListener('loadeddata', function () {log('loadeddata');}, false);audio.addEventListener('loadedmetadata', function () {log('loadedmetadata');}, false);audio.addEventListener('canplay', function () {log('canplay');}, false);audio.addEventListener('play', function () {log('play');// 当 audio 能够播放后, 移除这个事件console.log("初始化成功")window.removeEventListener('touchstart', forceSafariPlayAudio, false);}, false);audio.addEventListener('playing', function () {log('playing');}, false);audio.addEventListener('pause', function () {log('pause');}, false);audio.addEventListener('ended', function () {audioType = 0;}, false);// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,// 因此我们通过一个用户交互事件来主动 play 一下 audio.window.addEventListener('touchstart', forceSafariPlayAudio, false);audio.src = 'https://www.runoob.com/try/demo_source/horse.mp3'})