uniapp实现录音喊话功能

article/2025/10/15 6:40:10

 直接先上代码:

const recorderManager = uni.getRecorderManager()	
onShow() {this.test()},methods: {test() {uni.getSetting({success: (res) => {console.log('res.authSetting', res.authSetting['scope.record']);if (res.authSetting['scope.record'] == false) {uni.showToast({title: '请先开启麦克风授权',icon: 'none'})return false}console.log(111);uni.authorize({scope: 'scope.record',success: (res) => {recorderManager.start({format: "mp3"})},fail: (res) => {uni.showToast({title: '喊话失败',icon: 'none'})}})}})}},

实现的效果:

首次进入该页面的时候,就会立刻弹出一个提示选择框,询问获取麦克风权限,如图

 

这个提示框会弹出一次,在我们选择了 拒绝  和  允许  这两个选项的其中之一后就会进入对应函数的成功或失败回调,比如选择了拒绝后下次进入页面会直接进入失败回调而非再次弹窗询问权限、


具体分析上面的代码:

首先要说明的是上面的这些方法都是uniapp官方给的api,用于获取权限,详细具体的都能在官方文档中查看,文章只是帮助自己也帮助读者捋一下获取权限的思路~

uni.getRecorderManager() | uni-app官网

1、 首先在进入页面时,调用 uni.getSetting 在成功回调success中去获取用户当前对于麦克风权限的设置,

2、在成功回调里存在参数authSetting,用于判断是否有麦克风授权,

 

 

3、在每次进入页面时都会先判断用户当前对于麦克风的权限设置,

if (res.authSetting['scope.record'] == false)

 但是在第一次进入的时候,res.authSetting['scope.record']的值为undefined,

console.log('res.authSetting', res.authSetting['scope.record']);//undefined

4、因此不符合判断条件也就不会进入if语句中,所以会直接执行接下来的代码

	uni.authorize({scope: 'scope.record',success: (res) => {recorderManager.start({format: "mp3"})},fail: (res) => {uni.showToast({title: '喊话失败',icon: 'none'})}})

 

uni.authorize方法会让页面立刻弹窗询问,如下图

5、当我们点击了其中某一项,也就是我们选择到底是进入成功还是失败回调,选择允许=>进入成功回调,在成功回调中调用uni.getRecorderManager()方法结合小程序的触摸开始以及触摸结束事件完成录音,选择拒绝=>失败回调,提示打开麦克风权限

大概思路如此,算是一次记录


http://chatgpt.dhexx.cn/article/qli4lH0P.shtml

相关文章

h5调用android录音,html5网页录音插件Recorder

插件描述:html5 js 录音 mp3 wav ogg webm amr 格式,支持pc和Android、ios部分浏览器、和Hybrid App(提供Android IOS App源码),微信也是支持的,提供H5版语音通话聊天示例 Recorder用于html5录音 支持大部分已实现getUserMedia的移…

利用RecordRTC.js实现H5录音功能

前言: 最近遇到 要语音转文字 的需求,语音转文字肯定要先搞定录音功能,在网上找了好久没找到具体的 RecordRTC.js 插件的使用方法,最后只能对着 github 上开源代码小试了一下,录音功能好使所以就记录一下叭 一、Reco…

vue录音+js-audio-recorder

小小记录一下项目中用到的录音功能 1.下载插件 npm i js-audio-recorder 2.展示代码 <template><div style"padding: 20px;"><div style"font-size:14px"><h3>录音时长&#xff1a;{{ recorder && recorder.duration.…

html 苹果微信录音js,微信js-sdk 录音功能的示例代码

需求描述 制作一个H5页面&#xff0c;打开之后可以录音&#xff0c;并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice&#xff1a; 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 点击录音 // isListen // 0-未试听/试听结束 1-试听中 2-暂停试听…

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

遇到一个需求&#xff0c;需要做一个手机网页录音的功能&#xff0c;嵌入到webview中去&#xff0c;用安卓原生录音倒是可以&#xff0c;但是想着尽量去安卓化开发&#xff0c;就想着用纯的js前端代码去实现录音功能。 在 Web 应用程序中&#xff0c;JavaScript 是运行在浏览器…

网页录音时的麦克风权限问题解决

来源 | https://www.html.cn/web/html/19184.html 在我们进行网页制作时可能会遇到需要录音的情况&#xff0c;而在进行网页录音时又有可能会遇到麦克风权限问题导致无法录音&#xff0c;本文就来为大家介绍一下如何解决麦克风权限问题。 在本地中打开的时候&#xff0c;谷歌、…

获取摄像头和麦克风权限_js获取浏览器摄像头和麦克风权限

前言 项目中会使用到摄像头或麦克风设备&#xff0c;这就需要我们获取浏览器的摄像头和麦克风权限&#xff0c;权限是无法通过js操控的&#xff0c;必须由浏览器用户设置。 下面我来告诉大家如何获取浏览器的摄像头或麦克风的权限&#xff0c;使浏览器弹出询问窗口。 一、我们想…

(前端)录音功能实现 js-audio-recorder

1. 创建 import Recorder from js-audio-recorder const parameter {sampleBits: 16, // 采样位数&#xff0c;支持 8 或 16&#xff0c;默认是16sampleRate: 8000, // 采样率&#xff0c;支持 11025、16000、22050、24000、44100、48000&#xff0c;根据浏览器默认值&#x…

Android webview录音权限和音频自动播放

项目背景&#xff1a;我们通过layabox&#xff0c;制作了H5页面&#xff0c;可以在微信中&#xff0c;手机浏览器中使用&#xff0c;现在需要将H5页面集成到Android的APP中。 遇到的问题&#xff1a; 1.遇到的第一个问题&#xff0c;是获取录音权限的问题&#xff0c;我已经给…

html 苹果微信录音js,基于JS开发微信网页录音功能的实例代码

具体代码如下所示&#xff1a; wx.ready(function () { var startRecordflag false var startTime null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener(touchstart, function (event) { event.preventDefault(); startTime newDate().getTime(); // 延时后录音…

std::string 与 std::wstring 互转

前言: 最近接触了一些 win32 方便的编程,由于不熟 可能会写一写这方便的基础东西 相当于 写日记了 提升一下 他们的声明 string 是 char wstring 是wchar_t 什么是wchar_t ? string 转 wstring inline std::wstring StringToWString(const std::string& str) {int len…

C++ 字符串string、字符char、宽字符数组wstring、宽字符wchar_t互相转换(2021.4.20)

C单字符串和宽字符串学习 2021.4.20 1、char 和 string1.1 单字符 char1.2 单字符数组 char[] 和 char*1.2.1 char[]1.2.2 char* 1.3 单字符串 string1.4 char[] 转 string1.5 cha[] 转char*1.6 string 转 char*1.7 string 转 char[] 2、wchar_t 和 wstring2.1 宽字符 wchar_t2…

string和wstring相互转换以及wstring显示中文问题

如果你只是使用C来处理字符串&#xff0c;会用到string。不过string是窄字符串ASCII&#xff0c;而很多Windows API函数用的是宽字符Unicode。这样让string难以应对。作为中国的程序员&#xff0c;我们第一个想到的字符串就是中文&#xff0c;而不是英文。所以经常会遇到中文字…

C++里面,什么时候使用std::wstring

看你要使用什么字符编码了&#xff0c; std::wstring主要用于 UTF-16编码的字符,而std::string主要用于存储单字节的字符( ASCII字符集 )&#xff0c;但是也可以用来保存UTF-8编码的字符。&#xff08;UTF-8和UTF-16是UNICODE字符集的两种不同的字符编码&#xff09; 如果你的…

String类与wstring类的区别

String类与wstring类的区别 本质区别 存储字符的区别 #include <iostream> #include <string> using namespace std; int main() { wstring wstr1 L"你好世界"; // L普通字符串 宽字符串 const wchar_t *ch1 wstr1.c_str(); // 转化为宽字符…

从新建工程开始使用C++开发单片机(以STM32为例):七、移植Arduino的WString(附代码)

在上一篇文章中&#xff0c;介绍了outputString和inputString&#xff0c;其中所运用到的字符串类型String也是C驱动层中功能强大且重要的一个类。这个类移植自Arduino的WString。这篇文章将会展示WString的易用性&#xff0c;并且从编译输出后程序大小的角度比较WSting和C std…

0005:Qt常用类 - QDateTime

Qt常用类 - QDateTime 1 开发环境 在介绍内容之前&#xff0c;先说明一下开发环境&#xff0c;如下图&#xff1a; Qt版本&#xff1a;Qt5.3.2&#xff1b; Qt开发工具&#xff1a;Qt Creater 3.2.1&#xff1b; Qt构建工具&#xff1a;Desktop Qt 5.3 MinGW 32bit&#xff…

QDateTime的11种显示方式

QDateTime datetime QDateTime::currentDateTime(); datetime.toString(“hh:mm:ss\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss ap\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss\nyyyy-MM-dd”); datetime.toString(“hh:mm:ss ap\nyyyy-MM-dd”); datetime.to…

70 QDateTime时间戳转换有误

1 前言 在开发工具中需要用时间戳转换成格式化时间来显示&#xff0c;但引用QT中自带的时间类QDateTime转换时&#xff0c;发现转换时间有误问题&#xff0c;转换的结果时分秒是正确的&#xff0c;但月份确实错误的。因此在未深入研究qt实现情况下&#xff0c;需要得到正确的格…

QDateTime类的部分函数使用解析

QDateTime类提供了日期和时间功能。 QDateTime对象包含一个日历日期和一个时钟时间&#xff08;一个“日期时间”&#xff09;。它是QDate和QTime两个类的组合。它可以从系统时钟中读取当前日期时间。它提供比较日期时间和操作日期时间的函数&#xff0c;比如加上一定数量的秒…