语音录入组件

components/Yl_VoiceInput/index.js

@@ -0,0 +1,80 @@
+const plugin = requirePlugin("WechatSI"),
+    manager = plugin.getRecordRecognitionManager();
+let countDown = null,
+    identifyTheResult = null;
+manager.onStop = function (res) {
+    console.log("识别结束", res)
+    wx.showToast({
+        title: res.result ? '录入成功' : '未接收到录入声音',
+        icon: "none",
+    })
+    identifyTheResult(res.result)
+}
+Component({
+    properties: {
+        callback: {
+            type: Function
+        }
+    },
+    data: {
+        show: false,
+        seconds: 60
+    },
+    methods: {
+        /* 点击遮罩层 */
+        onClose() {
+            manager.stop();
+        },
+        /* 开启语音输入 */
+        talking(e) {
+            const that = this;
+            manager.onError = function (res) {
+                console.error("error msg", res.msg)
+                clearInterval(countDown)
+                that.setData({
+                    show: false,
+                    seconds: 60
+                })
+                wx.showToast({
+                    title: '语音识别错误' + res.msg,
+                    icon: "none",
+                    mask: true
+                })
+            };
+            if (this.data.show) return manager.stop();
+            wx.showToast({
+                title: '语音识别录入中...',
+                icon: "none",
+                duration: 60000
+            })
+            manager.start({
+                duration: 60000,
+                lang: "zh_CN"
+            })
+            this.setData({
+                show: true
+            })
+            countDown = setInterval(() => {
+                if (this.data.seconds == 0) {
+                    clearInterval(countDown)
+                    this.setData({
+                        show: false,
+                        seconds: 60
+                    })
+                } else {
+                    this.setData({
+                        seconds: this.data.seconds - 1
+                    })
+                }
+            }, 1000);
+            identifyTheResult = function (value) {
+                clearInterval(countDown)
+                that.setData({
+                    show: false,
+                    seconds: 60
+                });
+                if (value) that.triggerEvent("callback", value)
+            }
+        },
+    }
+})

components/Yl_VoiceInput/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-overlay": "@vant/weapp/overlay/index"
+    }
+}

components/Yl_VoiceInput/index.scss

@@ -0,0 +1,18 @@
+/* 语音识别按钮样式 */
+.info {
+    width: 48rpx;
+    height: 48rpx;
+    text-align: center;
+    line-height: 48rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    font-family: PingFang SC-Bold, PingFang SC;
+    font-weight: bold;
+    background: #9CBAFB;
+    color: #fff;
+
+}
+.begin{
+    background: #E7EEFF;
+    color: #3874F6;
+}

components/Yl_VoiceInput/index.wxml

@@ -0,0 +1,2 @@
+<view class="info {{show?'begin':''}}" bindtap="talking">{{show?seconds+'S':'语'}}</view>
+<van-overlay show="{{ show }}" bind:click="onClose" root-portal />