uniapp 封装语音录制

已于 2023-07-24 10:32:33 修改
阅读量391 收藏 3
点赞数
文章标签： uni-app
于 2023-07-24 08:48:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byf5229/article/details/131870603
版权

 页面布局的代码通过uni-app提供的标签，这里就不多讲,大家可以根据自己的喜好来修改页面

<template>
    <view class="video">
        <!-- <button @tap="startRecord">开始录音</button>
        <button @tap="endRecord">停止录音</button>
        <button @tap="playVoice">播放录音</button> -->

        <view class="start flex-row">
            <view class="item">
                <view v-if="voicePath" class="flex-column-center" @click="reset">
                    <view class="voice flex-center">
                        <!-- <image src="../../static/sound-recording/voice.png" mode=""></image> -->
                        <u-icon name="mic" color="#000" size="30"></u-icon>
                    </view>
                    <text>重新录制</text>
                </view>
            </view>
            <view class="item flex-column-center">
                <view class="record flex-center">
                    <image v-if="isStart" src="../../static/sound-recording/play.png" mode="" @tap="startRecord">
                    </image>
                    <image v-else src="../../static/sound-recording/pause.png" mode="" @tap="endRecord"></image>
                </view>
                <text v-if="isTime">{{showRecordTime}}</text>
            </view>
            <view class="item">
                <view v-if="voicePath" class="flex-column-center" @click="submit">
                    <view class="voice flex-center">
                        <u-icon name="checkbox-mark" color="#000" size="30"></u-icon>
                    </view>
                    <text>保存提交</text>
                </view>
            </view>
        </view>
    </view>
</template>
<style lang="scss">
    .video {
        background-color: #161618;
        height: 100vh;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .start {
        height: 500rpx;
        background-color: #222224;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;

        .item {
            width: 33.33%;

            .voice {
                width: 80rpx;
                height: 80rpx;
                background-color: aliceblue;
                border-radius: 10rpx;
            }

            .record {
                width: 150rpx;
                height: 150rpx;
                background-color: #161618;
                border: 15rpx solid #272822;
                border-radius: 50%;

                image {
                    width: 80rpx;
                    height: 80rpx;
                }
            }

            image {
                width: 40rpx;
                height: 40rpx;
            }

            text {
                font-size: 28rpx;
                color: #fff;
                margin-top: 20rpx;
            }
        }
    }
</style>

计算属性中方法主要是用来计算的倒计时或者说要录制的时长，这里是以秒为换算单位，大家可以自己进行换算

computed: {
            showRecordTime() {
                var strs = "";
                var m = Math.floor(this.time / 60);
                if (m < 10) strs = "0" + m;
                var s = this.time % 60;
                strs += (s < 10) ? ":0" + s : ":" + s;
                return strs
            }
        },

 我这里定义的是15秒录制时长，根据自己的需求来修改time的值即可

timedown: function(num) {
                let that = this;
                if (num == 15) {
                    return clearTimeout();
                } else {
                    setTimeout(function() {
                        that.time = num + 1
                        that.timedown(num + 1);
                    }, 1000); //定时每秒加一  
                }
            },

    开始录制的方法（注释的地方是获取手机的录音权限，但是他仅限于微信小程序使用，app想要获取权限的方法这里就先暂时不体现了）

console.log('开始录音');
                let that = this;
                this.isStart = false
                this.isTime = true
                clearInterval(timer);
                timer = setInterval(() => {
                    that.time += 1
                    if (this.time == 15) {
                        clearInterval(timer);
                    }
                }, 1000); //定时每秒减+  
                this.recorderManager.start();

                // uni.authorize({
                //     scope: 'scope.record',
                //     success() {
                //         recorderManager.start({
                //             format: 'mp3'
                //         });
                //         t.getTimeInterval();
                //         uni.setInnerAudioOption({
                //             obeyMuteSwitch: false
                //         })
                //     },
                //     fail() {
                //         uni.showModal({
                //             content: '检测到您没打开录音功能权限，是否去设置打开？',
                //             confirmText: "确认",
                //             cancelText: '取消',
                //             success(res) {
                //                 recorderManager.start();
                //                 t.time = setInterval(this.timer, 50)
                //             }
                //         })
                //     }
                // })

重新录制

/**
             * 重新录制
             */
            reset: function() {
                var that = this
                wx.showModal({
                    title: "重新录音",
                    content: "是否重新录制?",
                    success(res) {
                        if (res.confirm) {
                            that.time = 1
                            that.voicePath = ''
                            innerAudioContext.stop()
                        }
                    }
                })
            }, 

话不多说，直接上代码。复制粘贴即用

<template>
	<view class="video">

		<view class="start flex-row">
			<view class="item">
				<view v-if="voicePath" class="flex-column-center" @click="reset">
					<view class="voice flex-center">
						<!-- <image src="../../static/sound-recording/voice.png" mode=""></image> -->
						<u-icon name="mic" color="#000" size="30"></u-icon>
					</view>
					<text>重新录制</text>
				</view>
			</view>
			<view class="item flex-column-center">
				<view class="record flex-center">
					<image v-if="isStart" src="../../static/sound-recording/play.png" mode="" @tap="startRecord">
					</image>
					<image v-else src="../../static/sound-recording/pause.png" mode="" @tap="endRecord"></image>
				</view>
				<text v-if="isTime">{{showRecordTime}}</text>
			</view>
			<view class="item">
				<view v-if="voicePath" class="flex-column-center" @click="submit">
					<view class="voice flex-center">
						<u-icon name="checkbox-mark" color="#000" size="30"></u-icon>
					</view>
					<text>保存提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		check
	} from '@/api/user.js'
	let timer = null
	export default {
		data() {
			return {
				id: '',
				recorderManager: {},
				innerAudioContext: {},
				time: 1,
				isStart: true,
				isTime: false,
				voicePath: '',
			}
		},
		onLoad(options) {
			this.id = options.id
			console.log(this.id);
			this.recorderManager = uni.getRecorderManager();
			this.innerAudioContext = uni.createInnerAudioContext();

			// 为了防止苹果手机静音无法播放
			// uni.setInnerAudioOption({  
			//     obeyMuteSwitch: false  
			// })

			this.innerAudioContext.autoplay = true;

			console.log("uni.getRecorderManager()", uni.getRecorderManager())
			let self = this;
			this.recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
			});
		},
		computed: {
			showRecordTime() {
				var strs = "";
				var m = Math.floor(this.time / 60);
				if (m < 10) strs = "0" + m;
				var s = this.time % 60;
				strs += (s < 10) ? ":0" + s : ":" + s;
				return strs
			}
		},
		methods: {
			timedown: function(num) {
				let that = this;
				if (num == 15) {
					return clearTimeout();
				} else {
					setTimeout(function() {
						that.time = num + 1
						that.timedown(num + 1);
					}, 1000); //定时每秒减一  
				}
			},
			startRecord() {
				console.log('开始录音');
				let that = this;
				this.isStart = false
				this.isTime = true
				clearInterval(timer);
				timer = setInterval(() => {
					that.time += 1
					if (this.time == 15) {
						clearInterval(timer);
					}
				}, 1000); //定时每秒减+  
				this.recorderManager.start();

				// uni.authorize({
				// 	scope: 'scope.record',
				// 	success() {
				// 		recorderManager.start({
				// 			format: 'mp3'
				// 		});
				// 		t.getTimeInterval();
				// 		uni.setInnerAudioOption({
				// 			obeyMuteSwitch: false
				// 		})
				// 	},
				// 	fail() {
				// 		uni.showModal({
				// 			content: '检测到您没打开录音功能权限，是否去设置打开？',
				// 			confirmText: "确认",
				// 			cancelText: '取消',
				// 			success(res) {
				// 				recorderManager.start();
				// 				t.time = setInterval(this.timer, 50)
				// 			}
				// 		})
				// 	}
				// })
			},
			endRecord() {
				this.isStart = true
				this.isTime = true
				clearInterval(timer);
				console.log('录音结束');
				this.recorderManager.stop();
			},

			// 提交
			submit() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				uni.uploadFile({
					url: 'http://192.168.0.159:8102/api/QCloud/upload', // 仅为示例，非真实的接口地址
					filePath: that.voicePath,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync("authorization"),
						'X-Token-Type': 'MT'
					},
					success: (res) => {
						console.log(res);
						that.updateUserInfo(res.data)
					},
				})
			},

			// 修改用户信息
			updateUserInfo(voice) {
				check({
						auditType:1,
						cover:voice,
					}).then(res => {
					console.log(res);
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					uni.navigateBack({
						delta: 1,
					})
				})
			},

			/**
			 * 重新录制
			 */
			reset: function() {
				var that = this
				wx.showModal({
					title: "重新录音",
					content: "是否重新录制?",
					success(res) {
						if (res.confirm) {
							that.time = 1
							that.voicePath = ''
							innerAudioContext.stop()
						}
					}
				})
			},


			playVoice() {
				console.log('播放录音');
				console.log('this.voicePath', this.voicePath);

				if (this.voicePath) {
					this.innerAudioContext.src = this.voicePath;
					this.innerAudioContext.play();
				}
			},
		}
	}
</script>

<style lang="scss">
	.video {
		background-color: #161618;
		height: 100vh;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.start {
		height: 500rpx;
		background-color: #222224;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		.item {
			width: 33.33%;

			.voice {
				width: 80rpx;
				height: 80rpx;
				background-color: aliceblue;
				border-radius: 10rpx;
			}

			.record {
				width: 150rpx;
				height: 150rpx;
				background-color: #161618;
				border: 15rpx solid #272822;
				border-radius: 50%;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				font-size: 28rpx;
				color: #fff;
				margin-top: 20rpx;
			}
		}
	}
</style>

前端小透明~白云之
关注
uniapp(全端兼容) - 最新详细实现 “在线多端“ 实时聊天通讯功能，电商客服消息聊天列表实时接收发送消息，支持检测对方是否已读/未读、从相册发送图片、录制视频发送、发送本机文件、历史消息等等！
高级前端工程师
07-07 2030
uni-app，在线聊天，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，多端聊天，uni-app聊天页面发表情 发文件 发图片，微信小程序聊天发表情，IM聊天，即时通讯，超详细教程示例源码，IM聊天教程:发送图片/视频/语音/表情，聊天室，vue，仿微信聊天，钉钉聊天，消息列表，淘宝京东拼多多，客服聊天列表及聊天页面，已读，未读，发视频，发文件，IM聊天，实现app聊天页面功能，好用的聊天插件，组件，聊天列表(类似微信的消息列表)、历史聊天
行业分析| 为什么uni-app在音视频领域这么火？
anyRTC的博客
11-24 1783
首先我们要了解uni-app究竟是什么？ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。uni-app 继承自 Vue.js，提供了完整的 Vue.js 开发体验。uni-app 组件规范和扩展api与微信小程序基本相同。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ，开发出兼容多端的应用。 为什么这么多人会选择用uni-app呢？ uni-app 在开
uniapp实现录音、播放功能.rar
06-12
uniapp实现录音、播放功能，类似微信 语音按住说话松开结束，可指定时长，参照uniapp的API实现，记录录音时长，播放录音，超出时长自动结束录音
uniapp 录音组件
qq_43513271的博客
11-02 1405
uniapp原生录音组件,微信小程序录音
uniapp中实现语音识别(app+小程序)
最新发布
weixin_45389051的博客
07-31 757
【代码】uniapp中实现语音识别(app+小程序)
uniapp实现录音
在校前端菜菜大学僧
03-04 2159
当我们录音完毕，需要调用这个初始化出来的对象的stop方法，将会返回给我们一个音频链接，我们将该获取到的链接赋值给audio组件的value值，待其初始化后即可进行播放暂停等操作。3. 当用户在录制息屏会主动触发该实例对象的stop哦，记得处理一下息屏时的时间，否则容易给用户造成一种看起来还在录制的错觉~如上图所示，主要功能就是录音，获取音频链接，使用音频组件进行播放，话不多说，我们开始实现功能吧。2. 我们视觉上的录音时间是通过计时器来计算的，但是这个组件有它的录音限制，最长只能录制十分钟。
uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化
高坚果兄弟
01-10 1万+
在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能，uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好，用Recorder插件可避免这些问题。支持vue2、vue3、nvue，支持已有的大部分录音格式：mp3、wav、pcm、amr、ogg、g711a、g711u等
uni-app实现录音及播放功能
热门推荐
DOM曼珠沙华的博客
11-20 1万+
实现录音功能 这里就需要用到uni.getRecorderManager() 大部分是直接搬了官网的代码，但是还是需要记录一下修改的部分 export default { data: { recorderManager: {}, innerAudioContext: {}, }, onLoad(options) { this.recorderManager = uni.getRecorderManager(); this.innerAudioContext = uni.c.
uniapp录音
m0_47843571的博客
12-07 949
<template> <view class=""> <view> <button @tap="startRecord">开始录音</button> <button @tap="endRecord">停止录音</button> <button @tap="playVoice">播放录音</button> </view> <button @tap="ju
uniapp 实现录音上传
撑戌圆爱痒生
09-05 3556
uniapp实现录音上传功能html部分js部分创建实例开始录音结束录音播放录音暂停播放提交录音到后端重新录制onLoad部分计时器数据部分 html部分 我是写了个录音的图片 点击之后弹出一个弹出层(仿了下qq的样式) 样式怎么写我就不赘述了大家都会 js部分 这是重点敲黑板!!! 创建实例 为了全局都好获取到,可以随时开始录音,随时停止录音,我把他扔进全局了 const recorderManager = uni.getRecorderManager();//创建一个录音实例 const in
【uni-app】模仿微信实现简易发送/取发语音功能
weixin_43655896的博客
02-15 1万+
记录学习小程序开发聊天应用语音录制功能
uni-app技术分享| uni-app转小程序_实时音视频
anyRTC的博客
04-07 3216
uniapp转小程序_实时音视频 微信小程序 实现实时音视频与 uniapp 转码成微信小程序 实现实时音视频两者是一样的，区别仅仅是一个是原生小程序一个是 uniapp 转码成小程序 本文使用uniapp转码成小程序实现音视频通话 前提 确保微信开发平台 =》开发 =》开发管理 =》接口设置 的 实时播放音视频流与实时录制音视频流开启 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvSzutl4-1649304145472)(./3.jpg)] 线上版本配置 an
兼容小程序和app安卓 录音功能uniapp
weixin_46211267的博客
02-25 3999
这是一个按钮录音弹窗：你也可你自己换成别的！ 点击保存会返回 录音的 路径 通过 v-model 绑定的！（你也可以自己写个emit 返回方法，） 我代码中有 我项目录音转文字的接口，使用者注意吧这些删除了就行 # 要删除的（就这俩） import { usualUploadFileOne, removeFile, usualGetFileList, getSpeech } from '@/common/api/ip' try{ let res = await getSpeech({
Uniapp录音实时回调原生插件-YL-AudioRecorder
白玉梁的专栏
08-12 1053
由于uni提供的录音管理器uni.getRecorderManager()，不支持APP上的实时回调，由此便诞生了该原生录音插件。该录音插件支持PCM录音实时帧回调，支持获取录音文件路径，支持pcm转wav，支持pcm播放，//第3个参数audioFormat：位宽：默认16，可选8或16。//第1个参数sampleRate：采样率，默认16000。//第2个参数channel：声道：默认1，可选值1或2。需要注意的是，目前该插件仅支持安卓端，不支持IOS！支持设置录音参数如采样率，声道，位深等；
小程序实现文字转语音
Rux子兮的博客
12-28 3297
1、在微信公众平台登录小程序，添加插件微信同声翻译 搜索微信同声翻译点击添加，即可进行开发 代码 index.html <view> <button class="showCharacter" bindtap="wordYun">跟我读</button> </view> index.js //index.js //获取应用实例 const app = getApp() //引入插件：微信同声传译 const plugin = requirePlug
uniapp录音功能
qq_19820589的博客
06-04 471
【代码】uniapp录音功能。
uni-app小程序录音上传解决方案（后续更新Taro版)
Senar的博客
09-16 2982
能力依赖 RecorderManager 全局唯一的录音管理器 录音功能的要求与限制 与当前页面其他音频播放/录音功能互斥 是否在录音中状态显示 结束/不需要录音时，回收RecorderManager对象 材料 可以/结束 录音 录音中 Codeing（结果代码直接看最后） 构造一个简单的DOM结构 <image @click="recordAction" :src="recordImg" class="record"/> 先实现小程序的录音功能 import iconRecord f
android 实现录屏功能(悬浮窗)
浮世三千
11-18 5624
前言：网上关于录屏的介绍已经很多了，本篇文章也不过多介绍详细，主要是阐述其流程原理，输出demo，该demo样式仿照小米自带的系统录屏 1.如何录屏 Android中在5.0以上的版本中系统已经提供了屏幕获取的相关类。整个录屏的实现主要涉及到下面4个类 MediaProjectionManager 主要提供捕获屏幕的Intent() 和MediaProjection MediaProjection 获取媒体投影 MediaRecorder 录制视频.
uniapp：仿微信发送音频，录制音频。
sunluyi的博客
03-25 1601
防微信发送音频，录制音频功能
uniapp 封装请求
06-06
Uniapp封装请求是指在Uniapp开发中，通过编写封装好的request模块，实现对网络请求的统一管理。通过封装请求模块，开发者可以方便快捷地调用API接口，避免代码冗余，提高代码的可扩展性和可维护性。 Uniapp封装请求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值