uni-app中使用jssdk.md 实现录音功能以及语音识别

清疚 2021-12-15 04:39 1022阅读 0赞

参考

[vue中使用微信jssdk][vue_jssdk]

[微信jsSDK文档][jsSDK]

[JSSDK用法][JSSDK]

1.首先使用npm工具安装wx jssdk

> npm install weixin-js-sdk

2.安装完成之后，引入

> import wx from ‘weixin-js-sdk’;

3.使用jssdk

> 这里以一个录音功能的小例子讲解

注意这里的地址栏上的地址要对应后台编码上的地址，不需要携带的参数，即不要?后面的参数

index.vue

<template>
    	<view class="content">
    		
    		<button @tap="begin">开始录音</button>
    		<button @tap="stop">停止录音</button>
    		<button @tap="play">播放语音接口</button>
    		<button @tap="translateVoice">语音识别</button>
    
    	</view>
    </template>
    
    <script>
    	import wx from 'weixin-js-sdk';
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    				prefix: "http://2b81958e.ngrok.io"
    			}
    		},
    		onLoad() {
    		},
    		methods: {
    			initAudio(){
    				let prefix=this.prefix;
    				uni.showLoading({
    					title: '初始化...',
    					mask: false
    				});
    				uni.request({
    					url: prefix+'/front/jssdk/ticketconfig',
    					method: 'GET',
    					data: {
    						localAddress:location.href.split('#')[0]
    						//向服务端提供授权url参数，并且不需要#后面的部分
    					},
    					success: res => {
    						let status=res.data.status;
    						let result=res.data.data;
    						
    						if(status==true){
    							wx.config({
    								  debug: false ,
    								  appId: result.appId,
    								  timestamp: result.timestamp,
    								  nonceStr: result.nonce_str,
    								  signature: result.signature,
    								  jsApiList: [
    									'startRecord',
    									'stopRecord',
    									'onVoiceRecordEnd',
    									'playVoice',
    									'pauseVoice',
    									'stopVoice',
    									'onVoicePlayEnd',
    									'uploadVoice',
    									'downloadVoice',
    									'translateVoice',
    									'updateAppMessageShareData'
    								  ]
    							 });
    							 
    							 
    							 alert("开始录音");
    							 wx.ready(function() {
    							 	wx.startRecord();
    							 });
    							 
    							 wx.onVoicePlayEnd({
    							 	success: function(res) {
    							 		var localId = res.localId; // 返回音频的本地ID
    							 		console.log("语音播放完毕----》", res);
    							 	}
    							 });
    							 wx.error(function(res) {
    							 	alert("error,---->", res);
    							 	// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    							 });
    						}
    					},
    					complete() {
    						uni.hideLoading();
    					}
    				});
    			},
    			begin() {
    				this.initAudio();
    
    			},
    			stop() {
    				alert("停止录音");
    				let that = this;
    				wx.stopRecord({
    					success: function(res) {
    						console.log("停止录音成功--->", res);
    						var localId = res.localId;
    						that.localId = localId;
    					}
    				});
    
    			},
    			play() {
    				let that = this;
    				alert("播放录音");
    				wx.ready(function() {
    					console.log(that.localId);
    					wx.playVoice({
    						localId: that.localId // 需要播放的音频的本地ID，由stopRecord接口获得
    					});
    				});
    			},
    			translateVoice() {
    				let that = this;
    				wx.ready(function() {
    					console.log(that.localId);
    					wx.translateVoice({
    						localId: that.localId, // 需要识别的音频的本地Id，由录音相关接口获得
    						isShowProgressTips: 1, // 默认为1，显示进度提示
    						success: function(res) {
    							console.log("语音识别结果---->", res.translateResult); // 语音识别的结果
    							alert("语音识别结果---->" + res.translateResult);
    						}
    					});
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    	
    </style>

> 后端代码

@RestController
    @RequestMapping("/front/jssdk")
    public class WxJssdkController {
    
    
        @Value("${wx.appid}")
        private String appid;
    
        @Value("${wx.appsecret}")
        private String appsecret;
    
        @Autowired
        private RedisUtils redisUtils;
    
        @GetMapping("/ticketconfig")
        public ResponseData ticketConfig(String localAddress) {
            String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s";
    
            String ticketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi";
    
    
            String ticket = redisUtils.getString("ticket");
    
            if(StringUtils.isNotEmpty(ticket)){
                return joinParams(ticket,localAddress);
            }else{
                String s = HttpUtil.get(String.format(url,appid,appsecret));
                JSONObject jsonObject = JSONUtil.parseObj(s);
                String access_token = jsonObject.getStr("access_token");
                if (StringUtils.isNotEmpty(access_token)) {
    
                    String ticketStr = HttpUtil.get(String.format(ticketUrl, access_token));
    
                    JSONObject ticketObj = JSONUtil.parseObj(ticketStr);
    
                    ticket = ticketObj.getStr("ticket");
    
                    if (StringUtils.isNotEmpty(ticket)) {
    
                        redisUtils.setString("ticket", ticket,TimeUnit.HOURS,2);
                        return joinParams(ticket,localAddress);
    
    
                    }
                }
            }
    
            return null;
        }
    
        private ResponseData joinParams(String ticket,String url) {
            String nonce_str = UUID.randomUUID().toString();
            String timestamp = Long.toString(System.currentTimeMillis() / 1000);
    
            //注意这里的url一定是对应访问时候地址栏上的地址
            String string1 = "jsapi_ticket=" + ticket + "&noncestr=" + nonce_str + "&timestamp=" + timestamp + "&url=" + url;
    
            MessageDigest crypt = null;
            try {
                crypt = MessageDigest.getInstance("SHA-1");
                crypt.reset();
                crypt.update(string1.getBytes("UTF-8"));
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
    
            String signature = byteToHex(crypt.digest()).toLowerCase();
    
            Map map = new HashMap();
            map.put("appId", appid);
            map.put("timestamp", timestamp);
            map.put("nonce_str", nonce_str);
            map.put("signature", signature);
    
    
    
            return ResponseData.success(map);
        }
    
    
    
    
        public static final String byteToHex(byte[] bArray) {
            StringBuffer sb = new StringBuffer(bArray.length);
            String sTemp;
            for (int i = 0; i < bArray.length; i++) {
                sTemp = Integer.toHexString(0xFF & bArray[i]);
                if (sTemp.length() < 2) {
                    sb.append(0);
                }
                sb.append(sTemp.toUpperCase());
            }
            return sb.toString();
        }
    
    }

[vue_jssdk]: https://blog.csdn.net/qq449736038/article/details/80763327
[jsSDK]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
[JSSDK]: https://www.cnblogs.com/lykbk/p/werwerrwer.html