更新记录

1.0.0(2022-04-14) 下载此版本

1.语音合成 2.实时语音转写 3.语音听写


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×
  • 需要帮助请联系:1580043700@qq.com

  • 使用前准备

    由于科大讯飞url需要加密,为了减小小程序体积,使用了微信小程序插件,请记得引入插件

    引入插件

    1.全局引入 (manifest.json)

    
    "mp-weixin" : {
          "appid" : "",
          "plugins" : {
              "CryptoJs" : {
                  "version" : "1.0.0",    //版本号(固定值)
                  "provider" : "wxc4dcd44ab0c3682a"   //appid(固定值)
              }
          },
      }
    

    2.分包引入 (pages.json)

    {
    "subpackages": [
          {
              "root": "package",
              "name": "package",
              "pages": [],
              "plugins":{
                  "CryptoJs" : {
                      "version" : "1.0.0",    //版本号(固定值)
                      "provider" : "wxc4dcd44ab0c3682a"   //appid(固定值)
                  }   
              }
          }
    ]
    }
    
  • 目录结构

      |
      |-components 插件
          |
          |-zhangjun-xfyun
              |
              |-audio.vue 语音播放组件
              |
              |-short-record.vue  语音听写(流式版)组件
              |
              |-timely-record.vue 实时语音转写组件
              |
              |-speech_synthesis.js   语音合成组件
    
  • 使用方式

    1.语音播放组件(audio.vue)

    1.1使用

    <template>
      <Audio audioContextId="0001" :src="url" :autoPlay="true"></Audio>
    </template>
    
    <script>
    import Audio from "@/components/zhangjun-xfyun/audio.vue";
    
    export default {
      name: "index",
      components: { Audio },
       data() {
          return {
              url:''
          };
      },
    }
    </script>
    

    2.语音听写(流式版)组件(short-record.vue)

    2.1修改配置文件(修改short-record.vue 中的 appid、apiSecret、apiKey)

    
      config: {
          hostUrl: "wss://iat-api.xfyun.cn/v2/iat",
          host: "iat-api.xfyun.cn",
          uri: "/v2/iat",
          //TODO 在控制台-我的应用-语音听写(流式版)获取
          appid: "",
          apiSecret: "",
          apiKey: "",
      }
    

    2.2使用

    <template>
      <view>
          <view>
              <view class="item" v-for="(item, index) in list" :key="index">
                  <view>
                      <Audio :audioContextId="index" :src="item.url"></Audio>
                  </view>
                  <view>{{ item.text }}</view>
              </view>
          </view>
          <view>
              <Record @stop="bindEnd" @change="bindChange"></Record>
          </view>
      </view>
    </template>
    
    <script>
    import Record from "@/components/zhangjun-xfyun/short-record.vue";
    import Audio from "@/components/zhangjun-xfyun/audio.vue";
    
    export default {
      components: {
          Record,
          Audio,
      },
      data() {
          return {
              list: [],
          };
      },
      onLoad() {},
      methods: {
          bindEnd(event) {
              const { url, text } = event;
              this.list.push({ url, text });
          },
          bindChange(text) {
              console.warn("bindChange", text);
          },
      },
    };
    </script>

    3.实时语音转写组件(timely-record.vue)

    3.1修改配置文件(修改timely-record.vue 中的 appid、apiSecret、apiKey)

    
      config: {
          hostUrl: "wss://rtasr.xfyun.cn/v1/ws",    
          //TODO 在控制台-我的应用-实时语音转写获取
          appid: "",
          apiKey: "",
      }
    

    3.2使用

    <template>
      <view>
          <view>
              <view class="item" v-for="(item,index) in list" :key="index">
                  <view>
                      <Audio :audioContextId="index" :src="item.url"></Audio>
                  </view>
                  <view>{{item.text}}</view>
              </view>
          </view>
          <view>
              <Record @stop="bindEnd"></Record>
          </view>
      </view>
    </template>
    
    <script>
      import Record from '@/components/zhangjun-xfyun/timely-record.vue'
      import Audio from '@/components/zhangjun-xfyun/audio.vue'
    
      export default {
          components: {
              Record,
              Audio
          },
          data() {
              return {
                  list: []
              }
          },
          onLoad() {},
          methods: {
              bindEnd(event) {
                  const {url,text} = event;
                  this.list.push({url,text})
              }
          }
      }
    </script>

    4.语音合成组件(speech_synthesis.js)

    4.1修改配置文件(修改speech_synthesis.js 中的 appid、apiSecret、apiKey)

    
    const config = {
      hostUrl: "wss://tts-api.xfyun.cn/v2/tts",
      host: "tts-api.xfyun.cn",
      uri: "/v2/tts",
      //TODO 在控制台-我的应用-在线语音合成(流式版)获取
      appid: "", 
      apiSecret: "", 
      apiKey: "", 
    }
    

    4.2使用

    <template>
      <Audio audioContextId="0001" :src="url" :autoPlay="true"></Audio>
    </template>
    
    <script>
    import { textToSpeech } from "@/component/zhangjun-xfyuns/speech_synthesis";
    
    export default {
      name: "index",
      components: { Audio },
      data() {
          return {
              text: "人之初,性本善。性相近,习相远。苟不教,性乃迁。教之道,贵以专。昔孟母,择邻处。",
              url:'' //合成语音文件临时地址
          };
      },
      onLoad(option) {
          textToSpeech(this.text).then(data => {
              this.url = data
          });
      },
    };
    </script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

1.麦克风权限 2.微信插件CryptoJs("provider" : "wxc4dcd44ab0c3682a","version" : "1.0.0")

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

需要在微信小程序控制台配置WebSocket URL wss://tts-api.xfyun.cn wss://iat-api.xfyun.cn wss://rtasr.xfyun.cn

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问