1.第一步:下载插件
首先登录微信公众平台找到设置选择第三方设置。
选择下面的插件管理 ——>添加插件 搜索我下面图片这个 本人使用的是这个当然还有其他 我只记录自己使用,怎么使用。
2.使用插件
打开HBuilderx 找到uniapp项目 下的manifest.json 打开视图源码在视图源码下加入这些代码
/* 小程序特有相关 */
"mp-weixin": {
"appid": "",//自己的appId
"setting": {
"urlCheck": false
},
"usingComponents": true,
"plugins": {
"WechatSI": {
"version": "0.3.5",
"provider": "wx069ba97219f66d99"//插件的appId
}
}
},
3.在代码中使用同声传译
因为我这里的需求只需要读出语音就可以了,这边我使用的Vue3的语法 所以会和Vue2有点区别,不过区别不大修改成Vue2也是这样用的。
// 生成 音频的地址
const getAudioUrl = (text) => {
let reg = /<[^>]+>/gi;//去除富文本的标签正则
let overText = "";
if (text) {
overText = text.replace(reg, '');
}
// #ifdef MP-WEIXIN
let plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager();
// #ifdef MP-WEIXIN
plugin.textToSpeech({
lang: "zh_CN",//中文 当然还可以换成其他语言读出
tts: true,
content: overText,//要读的内容
success: (res) => {
src.value = res.filename;//生成的地址路径
},
})
}
最后使用uniapp自带的音频控制组件 uni.createInnerAudioContext()这个api来读出语音
const getInnerAudioContext = (url) => { //获取url地址
innerAudioContext.obeyMuteSwitch = false;
innerAudioContext.autoplay = true;
innerAudioContext.src = url;
console.log(innerAudioContext)
if (innerAudioContext.paused) {
innerAudioContext.play();
} else {
innerAudioContext.pause();
}
innerAudioContext.onEnded(() => {
innerAudioContext.seek = 0;
})
}
因为不需要点击一下就是读取一次 而是点击只读取一下所以音频实例我放到这个位置
import {
onLoad
} from '@dcloudio/uni-app';
import {
getCurrentInstance,
ref
} from "vue"
const innerAudioContext = uni.createInnerAudioContext();
export default {
setup() {
return{
}
}
}
总结
好了,这就是同声传译基本实现了,至少我的需求是这样,如有说的不对,希望大佬指正,本人也是前端小菜只因坤一枚。