公众号 H5 语音输入转文字

 

 

<template>
	<div>
		<u-modal v-model="yyShow" show-cancel-button cancel-text='取消录音' :show-title='false' confirm-text='结束录音' @cancel='cancel'
			@confirm='stop'>
			<view>
				<!-- <button class="record" @click="start">开始录音</button> -->
				<!-- <button @click="stop">结束录音</button>
				<button @click="cancel">取消录音</button> -->
				<image style="width: :100%;"  v-if="!shShow"  @click="start" src="../static/index/unyy.png" mode=""></image>
				<image style="width: :100%;" v-if="shShow" src="../static/index/yy1.gif" mode=""></image>
			</view>
		</u-modal>

	
		<!-- <img src="../../static/image/timg.gif" alt="" @click="translationStart" > -->
	</div>
</template>

<script>
	// import wx from 'weixin-js-sdk';
	import{api_voiceToText}from'@/api/common'
	var wx = require('jweixin-module')
	// var _this = wx;
	import {
		api_wechatscan
	} from '@/api/common.js'

	export default {
		data() {
			return {
				yyShow: false,
				shShow:false,
				localId: '',
				serverId: '',
				downLoadId: '',
				Soff: true,
				time: 0,
				timer: null

			};
		},
		mounted() {},
		created() {
			this.getConfig()
		},
		methods: {
		
			getConfig() {
				const self = this;
				 const apiUrl = window.location.href
				 console.log(apiUrl,'222')
				// var apiUrl = 'http://zhongjianh5.dev.xinzhidi.cn/#/pages/index/medicine/match'
				api_wechatscan({
					url: apiUrl, //获取签名等信息的地址
				}).then(({
					result
				}) => {
					return
					// console.log(res.data.data)
					let list = result
					wx.config({
						beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

						appId: list.appId, // 必填，企业微信的corpID
						timestamp: list.timesTamp, // 必填，生成签名的时间戳
						nonceStr: list.nonceStr, // 必填，生成签名的随机串
						signature: list.signature, // 必填，签名
						jsApiList: [
							'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice',
							'stopVoice', 'uploadVoice', 'downloadVoice', 'downloadVoice'
						] // 必填，需要使用的JS接口列表
					});
					wx.ready(() => {
						wx.checkJsApi({
							jsApiList: ['startRecord', 'stopRecord', 'onVoiceRecordEnd',
								'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice',
								'downloadVoice', 'downloadVoice'
							], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							success: function(res) {
								console.log('返回信息')
								console.log(res)
								// 以键值对的形式返回，可用的api值true，不可用为false
								// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
							}
						});

						// wx.startRecord();
						// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个
						// 客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调
						// 用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					})
					wx.error((res) => {
						// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
					})
				}).catch((error) => {
					// error
				})
			},
			// 开始录音
			start() {
				var that = this
				that.time = 0
				wx.startRecord({
					success: function() {
						that.shShow=true
					
						console.log('成功开始录音')
						that.timer = setInterval(() => {
							that.time++
						}, 1000)
						that.vicoeEnd()
					},
					cancel: function() {
						that.shShow=false
						alert('用户拒绝授权录音')
					}
				})
			},
			stop() {
				this.shShow=false
			
			var  that = this
				// clearInterval(that.timer)
				wx.stopRecord({
					success: function(res) {
						// alert('暂停成功')
						console.log(res, '停止录音')
						
						that.localId = res.localId
						that.upVoice()
					},
					fail: function(error) {
						// alert('死啦停不了')
						console.log(error)
					}
				})
			},
			cancel() {
				wx.stopRecord({
					success: (res) => {
						uni.showToast({
							title: "取消录音",
							icon:'none'
						})
						
						this.shShow=false
						this.yyShow=false
						console.log(res, '取消')
					}
				})
			},
			vicoeEnd() {
				uni.showToast({
					title: "开始录音",
					icon:'none'
				})
				var that = this
				wx.onVoiceRecordEnd({
					// 录音时间超过一分钟没有停止的时候会执行 complete 回调
					complete: function(res) {
						that.shShow=false
						console.log(res, '监听')
						alert('60秒停止录音')
						that.localId = res.localId
						that.upVoice()
					}
				})
			},
			upVoice() {
				
				var that = this
				
				wx.uploadVoice({
					localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
					isShowProgressTips: 1, // 默认为1，显示进度提示
					success: function(res) {
						console.log(res, '上传')
						var apiUrl = window.location.href
						that.yyShow=false
						that.shShow=false
						that.serverId = res.serverId // 返回音频的服务器端ID
						
						api_voiceToText({
							serverId:res.serverId
						}).then((res)=>{
							that.$emit("yyText",res.result);
						})
					},
					error:(error)=>{
						uni.showToast({
							title: error
						})
					}
					
				})
			}

		},
	};
</script>
<style lang="less">
	/deep/image{
		width: 100%;
	}
</style>