ferrinweb / voice-input-button2

New version of voice input button using new interface of iflytek voice dictation (the stream version). 基于讯飞新版语音听写(流式版) api 的语音输入按钮 vue 组件。
96 stars 16 forks source link

想问问为什么不触发@record-complete等函数,同时v-model绑定的result也不显示 #67

Closed mksasx closed 1 year ago

mksasx commented 1 year ago

image

mksasx commented 1 year ago
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div class="result">{{ result }}</div>

    <div class="voice-input-button-wrapper">
      <div id="voice"></div>
      <voice-input-button
        appId=""
        apiKey=""
        apiSecret=""
        v-model="result"
        @record="showResult"
        @record-start="recordStart"
        @record-stop="recordStop"
        @record-blank="recordNoResult"
        @record-failed="recordFailed"
        @record-ready="recordReady"
        @record-complete="recordComplete"
        interactiveMode="touch"
        color="#fff"
        tipPosition="top"
      >
        <template slot="no-speak">没听清您说的什么</template>
      </voice-input-button>
    </div>
  </div>
</template>

<script name="DrawPic">
import { defineComponent, ref, toRefs, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import voiceInputButton from "voice-input-button2";
import { Vue2InVue3 } from "@efox/emp-vuett";
const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");
export default {
  name: "App",

  components: {
    "voice-input-button": ContentInVue3,
  },

  data() {
    return {
      result: "",
    };
  },

  methods: {
    recordReady: function () {
      console.info("按钮就绪!");
    },

    recordStart: function () {
      console.info("录音开始");
    },

    showResult: function (text) {
      console.log("收到识别结果:", text);
    },

    recordStop: function () {
      console.info("录音结束");
    },

    recordNoResult: function () {
      console.info("没有录到什么,请重试");
    },

    recordComplete: function (text) {
      console.log("识别完成! 最终结果:", text);
    },

    recordFailed: function (error) {
      console.info("识别失败,错误栈:", error);
    },
  },
};

// function recordReady(): void {
//   console.info("按钮就绪!");
// }
// function recordStart(): void {
//   console.info("录音开始");
// }
// function showResult(text: string): void {
//   console.info("收到识别结果:", text);
// }
// function recordStop(): void {
//   console.info("录音结束");
// }
// function recordNoResult(): void {
//   console.info("没有录到什么,请重试");
// }
// function recordComplete(text: string): void {
//   console.info("识别完成! 最终结果:", text);
// }
// function recordFailed(error: string): void {
//   console.info("识别失败,错误栈:", error);
// }
</script>
<style scoped>
.voice-input-button-wrapper {
  width: 42px;
  height: 42px;
  background-color: mediumpurple;
  border-radius: 50%;
}
.result {
  width: 100%;
  padding: 25px;
  border: #e2e2e2 1px solid;
  border-radius: 5px;
  line-height: 2;
  font-size: 16px;
  color: #727272;
  min-height: 24px;
  margin-bottom: 25px;
}
</style>
ferrinweb commented 1 year ago

你可能需要向 @efox/emp-vuett 提交 issue, voice-input-button2 源码中没有引用 target 属性。