佛山个人建站模板,百度搜索优化平台,企业管理咨询,如何自己搭建微信小程序文章目录 一、前言二、内容组成1、权限获取2、针对设备兼容3、内容类型转换4、传输存储 三、拓展内容自动播放部分 一、前言 主要针对前端适配录音能力的简要记录#xff0c;针对默认的wav及其可能需要转换到特定的mp3之类格式以适配需求的问题。#xff08;这类通常是兼容tt… 文章目录 一、前言二、内容组成1、权限获取2、针对设备兼容3、内容类型转换4、传输存储 三、拓展内容自动播放部分 一、前言 主要针对前端适配录音能力的简要记录针对默认的wav及其可能需要转换到特定的mp3之类格式以适配需求的问题。这类通常是兼容tts或客服语音备份 这里纠结点主要会是在 ios/android设备的兼容及 类型转换的问题 二、内容组成 主要围绕下面几个重要组成部分 ①权限获取 ②针对设备兼容 ③内容类型转换 ④传输存储 1、权限获取 这里首先需要确定的一点是获取录音权限除了通常的 localhost 之外仅有证书存在的domain/ip 浏览器才会允许获取权限。哪怕是自定义证书也是可以的 针对app端部分内容嵌入适配 这里主要是考虑到app的基础配置基于前者的情况下截止操作时间2023.8.1 Android 其实根据通用的方式就是动态设置哪个webview使用设置哪个。 !-- 所需权限列表 --
uses-permission android:nameandroid.permission.INTERNET /
uses-permission android:nameandroid.permission.WRITE_EXTERNAL_STORAGE /
uses-permission android:nameandroid.permission.READ_EXTERNAL_STORAGE /
uses-permission android:nameandroid.permission.RECORD_AUDIO /
uses-permission android:nameandroid.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 controlscontrols 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.mp3audio.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})
