目录
后续使用的时候可以看详情里面的信息进行使用
注意!!在这个源码视图中开始引入插件!! 在小程序相关插件中引入 版本要是0.3.5的 因为版本过高或者过低都会报错!
- "mp-weixin" : {
- "appid" : "自己小程序的id",
- "setting" : {
- "urlCheck" : false
- },
- "plugins" : {
- "WechatSI" : {
- "version" : "0.3.5",
- "provider" : "wx069ba97219f66d99"
- }
- },
接下来直接上源码 可以根据自己的需求进行修改代码:
代码全部直接放在下方,可以直接拿走用,好用记得点赞收藏!
- <template>
- <view>
- <view class="voicepad">
- {{voiceState}}
- </view>
- <button class="cu-btn bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd">
- <image src="../../static/logo.png" mode="widthFix" style="width: 50rpx;"></image>
- </button>
- <view class="center" style="background-color: #555555; color: #FFF;" v-show="isShow">
- 正在录音...
- </view>
- </view>
- </template>
-
- <script>
- var plugin = requirePlugin("WechatSI")
- let manager = plugin.getRecordRecognitionManager();
-
- export default {
- data() {
- return {
- voiceState: "你可以这样说...",
- isShow: false
- }
- },
- onShow() {
-
- },
- onLoad() {
- this.initRecord();
- },
- methods: {
- touchStart() {
- this.isShow = true
- manager.start({
- //指定录音的时长,单位ms,最大为60000
- duration: 60000,
- //识别的语言,目前支持zh_CN en_US zh_HK
- lang: "zh_CN"
- });
- },
- touchEnd() {
- uni.showToast({
- title: '录音完成',
- icon: "none"
- })
- this.isShow = false
- manager.stop();
- },
- /**
- * 初始化语音识别回调
- * 绑定语音播放开始事件
- */
- initRecord() {
- manager.onStart = (res) => {
- console.log('start', res.msg);
- this.voiceState = res.msg;
- };
- //有新的识别内容返回,则会调用此事件
- manager.onRecognize = (res) => {
- this.voiceState = res.result;
- console.log('onRecognize');
- }
-
- // 识别结束事件
- manager.onStop = (res) => {
- this.voiceState = res.result;
- console.log('onStop', res.result);
- }
-
- // 识别错误事件
- manager.onError = (res) => {
- this.voiceState = res.msg;
- console.log('onError');
-
- }
- },
- }
- }
- </script>
-
- <style>
- .voicebtn {
- height: 130upx;
- display: block;
- width: 130upx;
- line-height: 130upx;
- border-radius: 65upx;
- font-size: 50upx;
- position: absolute;
- top: 1060upx;
- left: 310upx;
- }
-
- .voicepad {
- height: 250upx;
- width: 680upx;
- background: #fff;
- margin: 30upx auto;
- border-radius: 8upx;
-
- padding: 20upx;
- font-size: 35upx;
- }
-
- .center {
- text-align: center;
- align-items: center;
- width: 200rpx;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- padding: 20rpx;
- border-radius: 20rpx;
- /* height: 50rpx; */
- opacity: 0.8;
- }
- </style>