uniapp 小程序 语音录制

uniapp 小程序 语音录制

1. 微信小程序管理平台添加同声编译

   • 微信公共平台
   • 登陆
   • 
   • 添加微信同声传译
   2. 使用 manifest.json

    "mp-weixin" : {
        "appid" : "xxxxxxxxxxxx",
        "plugins" : {
            "WechatSI" : {
                "version" : "0.3.6",
                "provider" : "xxxxxxxxxx" // 插件的AppID，插件内有说明
            }
        },
    },

3. 直接使用 上代码

<!-- z-paging聊天输入框 -->

<template>
	<view class="chat-input-bar-container" style="    margin-top: 500rpx;">
     <view class="" style="text-align: center;">
     	 你说了-----{{ msgCount }}
     </view>
		<view class="chat-input-bar">
			<!-- 按住说话 -->
			<view class="Hold_Talk" v-if="showSpeakBtn==2">
				<image class="icon_keyboard" src="https://eshopfile.zhiyousx.com/173649100402573140.png"
					@click="showSpeakBtn = 1" mode="aspectFill" lazy-load="false"></image>
				<view class="speakBtn" @touchstart="keystart" @touchend="stopVoice">按住说话</view>
			</view>
			<view class="Hold_Talk_f" v-if="showSpeakBtn==3">
				<image class="icon_keyboard" src="https://eshopfile.zhiyousx.com/173397098176315734.png" mode="aspectFill"
					lazy-load="false"></image>
			</view>
			<view class="chat-input-container" v-if="showSpeakBtn==1">
				<image src="https://eshopfile.zhiyousx.com/173647646699774432.png" @click="getSpeak" class="icon"
					mode="aspectFill"></image>
				<input :focus="focus" placeholder-class="title_input" :cursor-spacing="50" class="chat-input" v-model="msg"
					:adjust-position="false" confirm-type="send" type="text" placeholder="发送问题" />
			</view>
		</view>
		<view class="layer-box">
			<view class="prompt-layer" v-if="longPress">
				<view class="prompt-loader">
					<view class="em" v-for="(item,index) in 15" :key="index"></view>
				</view>
				<text class="p">{{value}}</text>
				<text class="span">松手结束录音</text>
			</view>
		</view>


	</view>
</template>

<script>
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	export default {
		name: "chat-input-bar",
		data() {
			return {
				msg: '',
				msgCount:"111",
				// 当前input focus（如果不需要切换表情面板则不用写）
				focus: false,
				// 当前表情/键盘点击后的切换类型，为空字符串代表展示表情logo但是不展示不展示表情面板（如果不需要切换表情面板则不用写）
				showSpeakBtn: 1,
				longPress: false,
				touched: false,
				show: false,
			};
		},
		mounted() {
			this.initVoice()

		},
		methods: {

			stopVoice() {
				this.touched = false
				this.longPress = false
				this.showSpeakBtn = 2
				manager.stop()
			},
			keystart(e) {
				if (this.longPress) {
					this.touched = false
					this.longPress = false
					this.showSpeakBtn = 2
					manager.stop()
				} else {
					let that = this
					this.showSpeakBtn = 3
					// this.recordAuth = true
					this.touched = true
					uni.vibrateShort();
					this.recordShow().then(res => {
						if (!res) {
							//防止未获取权限时依然开始识别空字符
							// this.recordAuth = false
							this.touched = false
							return
						} else {
							if (!this.touched) return
							this.longPress = true
							manager.start({
								duration: 10000
							})
						}
					})
				}
			},
			getSpeak() {
				this.showSpeakBtn = 2
			},
			stopSpeak() {
				this.$emit('stopSpeak')
			},
			initVoice() {
				console.log(manager)
				let that = this
				manager.onStop = function(res) {
					console.log("record file path", res.tempFilePath)
					console.log("result", res.result)
					that.msgCount = res.result
					that.$forceUpdate()
				}
				manager.onStart = function(res) {
					console.log("成功开始录音识别", res)
				}
				manager.onError = function(res) {
					console.error("error msg", res.msg)
				}
			},


			recordShow() {
				var that = this;
				return new Promise((resolve, reject) => {
					uni.getSetting({
						success(res) {
							// console.log(res.authSetting['scope.record']);
							//判断是否第一次获取录音功能
							if (!res.authSetting['scope.record']) {
								//调用后会立刻弹窗询问用户是否同意授权录音给小程序
								uni.authorize({
									scope: 'scope.record',
									success() {
										// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
										resolve(false)
									},
									fail() {
										resolve(false)
										wx.showModal({
											title: '提示',
											content: '您未授权录音，功能将无法使用',
											showCancel: true,
											confirmText: "授权",
											confirmColor: "#52a2d8",
											success: function(res1) {
												if (res1.confirm) {
													//确认则打开设置页面（重点）
													wx.openSetting({
														success: (res2) => {
															if (!res2.authSetting['scope.record']) {
																//未设置录音授权
																console.log("未设置录音授权");
																wx.showModal({
																	title: '提示',
																	content: '您未授权录音，功能将无法使用',
																	showCancel: false,
																})
																resolve(false)
															} else {
																resolve(false)
																console.log("未设置录音授权1");
															}
														},
														fail: function() {
															resolve(false)
															console.log("未设置录音授权2");
														}
													})
												} else if (res.cancel) {
													console.log("未设置录音授权3");
													resolve(false)
												}
											},
											fail: function() {
												that.showSpeakBtn = 2
												console.log("未设置录音授权4");
												resolve(false)
											},
											complete: function() {
												that.showSpeakBtn = 2
												console.log("未设置录音授权5");
											}
										})

									}
								})
							} else if (res.authSetting['scope.record']) {
								resolve(true)
							}
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.stopBtn {
		width: 208rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: -70rpx;
		left: 275rpx;
		font-size: 24rpx;
		background: linear-gradient(137deg, rgba(220, 176, 153, .6) 0%, rgba(235, 207, 188, .6) 20%, rgba(255, 242, 237, .6) 100%);
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(224, 61, 31, 0.1);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #FFFFFF;
		color: #555555;

	
	}
	.icon {
			height: 36rpx;
			width: 36rpx;
			margin-right: 20rpx;
		}
	.chat-input-bar-container {
		position: relative;
	}

	.chat-input-bar-container-bg {
		background-color: #fff;
	}

	.chat-input-bar {
		display: flex;
		flex-direction: row;
		align-items: center;

		padding: 10rpx 20rpx;
	}

	.chat-select-ask {
		padding: 10rpx 30rpx;
	}

	.chat-select-scroll {
		height: 72rpx;
		width: 720rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.chat-select-item {
		display: inline-block;
	}

	.chat-input-container {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		align-items: center;
		/* #endif */
		padding: 24rpx 15rpx 24rpx 40rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 6rpx solid #BF0E0E;
		box-sizing: border-box;
		height: 100rpx;
		width: 400rpx;
	}

	.chat-input {
		margin-left: 20rpx;
		flex: 1;
		font-size: 28rpx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #BF0E0E;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.emoji-container {
		width: 54rpx;
		height: 54rpx;
		margin: 10rpx 0rpx 10rpx 20rpx;
	}

	.emoji-img {
		width: 54rpx;
		height: 54rpx;
	}

	.chat-input-send {
		margin-left: 20rpx;
		height: 52rpx;
		width: 52rpx;
	}

	.disabled {
		opacity: 0.6;
	}

	.chat-input-send-text {
		color: white;
		font-size: 26rpx;
	}

	.emoji-panel-container {
		background-color: #f8f8f8;
		overflow: hidden;
		transition-property: height;
		transition-duration: 0.15s;
		/* #ifndef APP-NVUE */
		will-change: height;
		/* #endif */
	}

	.emoji-panel {
		font-size: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		padding-right: 10rpx;
		padding-left: 15rpx;
		padding-bottom: 10rpx;
	}

	.emoji-panel-text {
		font-size: 50rpx;
		margin-left: 15rpx;
		margin-top: 20rpx;
	}



	.keyboard {
		margin: 0rpx 30rpx 0 20rpx;
	}

	.layer-box {
		position: absolute;
		bottom: 160rpx;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.prompt-layer {
		position: relative;
		width: fit-content;
		max-width: 464rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 30rpx 60rpx 0 rgba(90, 116, 148, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-self: center;
		border: solid 2px #FFFFFF;
		border-radius: 8px;
		padding: 20px;
		z-index: 50;
	}

	.prompt-layer-1 {
		font-size: 12px;
		width: 128px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -60px;
	}

	.prompt-layer-1 .p {
		color: #000000;
	}

	.prompt-layer-1 .span {
		color: rgba(0, 0, 0, .6);
	}

	.prompt-loader .em {}

	/* 语音音阶------------- */
	.prompt-loader {
		width: 96px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;
	}

	.prompt-loader .em {
		display: block;
		background: #333333;
		width: 1px;
		height: 10%;
		margin-right: 2.5px;
		float: left;
	}

	.prompt-loader .em:last-child {
		margin-right: 0px;
	}

	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}

	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}

	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}

	@keyframes load {
		0% {
			height: 10%;
		}

		50% {
			height: 100%;
		}

		100% {
			height: 10%;
		}
	}

	/* 语音音阶-------------------- */
	.prompt-layer-2 {
		top: -40px;
	}

	.prompt-layer-2 .text {
		color: rgba(0, 0, 0, 1);
		font-size: 12px;
	}

	.Hold_Talk {
		padding: 24rpx 15rpx 24rpx 40rpx;
		color: rgba(191, 14, 14, 0.5);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 6rpx solid #BF0E0E;
		display: flex;
		align-items: center;
		flex: 1;
		height: 100rpx;
		background: #ffffff;

		.icon_keyboard {
			height: 52rpx;
			width: 52rpx;
			margin: 0;
		}

		.speakBtn {
			flex: 1;
			text-align: center;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(191, 14, 14, 0.5);
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.Hold_Talk_f {
		padding: 24rpx 40rpx 24rpx 40rpx;
		background: linear-gradient(90deg, #FF8B43 0%, #E92278 47%, #E33525 93%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		display: flex;
		align-items: center;
		flex: 1;
		height: 100rpx;
		text-align: center;
		display: flex;
		justify-content: center;

		.icon_keyboard {
			height: 52rpx;
			width: 52rpx;
			margin: 0;
		}

	}

	.chat-input-send1 {
		height: 100rpx;
		width: 100rpx;
		margin-left: 20rpx;
	}

	.right-btn {
		display: flex;
		align-items: center;
	}

	.prompt {
		text-align: center;
		font-size: 20rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.chat-select-item-image {
		height: 70rpx;
		width: 160rpx;
		margin-right: 10rpx;
	}
	.chat-select-item-image1{
		height: 70rpx;
		width: 180rpx;
		margin-right: 10rpx;
	}

	/deep/.title_input {
		color: rgba(191, 14, 14, 0.5) !important;
	}
</style>

4. 效果
   

5. 搞定。