更新记录
1.0.0(2022-04-14) 下载此版本
1.语音合成 2.实时语音转写 3.语音听写
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
-
需要帮助请联系: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>