⼩程序语⾳同步智能识别的实现案例代码解析
⽬录
⼀、背景
⼆、同声传译插件介绍
四、后端SpringBoot实现语⾳⽂件上传webApi
五、实际测试
⼀、背景
在⼩程序的⼀些应⽤场景中，会有语⾳转⽂字的需求。原有的做法⼀般是先通过⼩程序的录⾳功能录下语⾳⽂件，然后再通过调⽤语⾳智能识别WebApi（⽐如百度云AI平台，科⼤讯飞平台）将语⾳⽂件转成⽂字信息，以上的做法⽐较繁琐且⽤户的体验性较差。
为解决此问题，直接开放了同声传译的插件，⼩程序作者可以直接使⽤该插件进⾏语⾳同声传译的开发。此⽂章将通过前后端整合应⽤的完整案例完成语⾳的实时转换，并将语⾳上传到服务端后台备份。
⼆、同声传译插件介绍
同声传译由智聆语⾳团队、翻译团队与公众平台联合推出的同传开放接⼝，⾸期开放语⾳转⽂字、⽂本翻译、语⾳合成接⼝，为开发者赋能。
1、⼩程序后台添加插件
进⼊⼩程序后台-->进⼊设置-->第三⽅设置-->添加插件->搜索同声传译-->完成添加。
2、⼩程序启⽤插件
在⼩程序app.json⽂件中增加插件版本等信息：
"plugins": {
"WechatSI": {
"version": "0.3.3",
"provider": "wx069ba97219f66d99"
}
},
在页⾯程序⽂件中引⼊插件：
/* index.js */
const plugin = requirePlugin("WechatSI")
// 获取**全局唯⼀**的语⾳识别管理器**recordRecoManager**
const manager = RecordRecognitionManager()
recordRecoManager 对象的⽅法列表：
⽅法参数说明
start options开始识别
stop结束识别
onStart callback正常开始录⾳识别时会调⽤此事件
onRecognize callback有新的识别内容返回，则会调⽤此事件
onStop callback识别结束事件
onError callback识别错误事件
官⽅开发⽂档：插件的语⾳识别管理器
三、语⾳同步转换的前端实现
1、界⾯UI与操作
UI参考官⽅的DEMO：长按按钮进⾏录⾳，松开按钮实时将录⾳转换为⽂字。
⽤户可对同步转换的⽂字进⾏编辑，同时可将原始语⾳⽂件与⽂字上传后台服务端。
2、代码实现
语⾳同步转换的主要代码：
//导⼊插件
const plugin = requirePlugin("WechatSI");
// 获取**全局唯⼀**的语⾳识别管理器**recordRecoManager**
const manager = RecordRecognitionManager();
/**
* 加载进⾏初始化
*/
onLoad: function () {
//获取录⾳权限
//初始化语⾳识别回调
this.initRecord();
},
...
/**
* 初始化语⾳识别回调
* 绑定语⾳播放开始事件
*/
initRecord: function () {
//有新的识别内容返回，则会调⽤此事件
let currentData = Object.assign({}, this.data.currentTranslate, {
text: sult,
});
this.setData({
currentTranslate: currentData,
});
this.scrollToNew();
};
// 识别结束事件
let text = sult;
console.pFilePath);
if (text == "") {
this.showRecordEmptyTip();
return;
}
let lastId = this.data.lastId + 1;
let currentData = Object.assign({}, this.data.currentTranslate, { text: sult,
translateText: "正在识别中",
id: lastId,
voicePath: pFilePath,
duration: res.duration
});
this.setData({
currentTranslate: currentData,
recordStatus: 1,
lastId: lastId,
});
//将当前识别内容与语⾳⽂件加⼊列表
this.addRecordFile(currentData, this.data.dialogList.length);
//刷新列表
this.scrollToNew();
};
// 识别错误事件
this.setData({
recording: false,
bottomButtonDisabled: false,
});
};
},
/**
* 按住按钮开始语⾳识别
*/
streamRecord: function (e) {
let detail = e.detail || {};
let buttonItem = detail.buttonItem || {};
//开始中⽂录⾳
manager.start({
lang: buttonItem.lang,
});
this.setData({
recordStatus: 0,
recording: true,
currentTranslate: {
// 当前语⾳输⼊内容
create: dTime(new Date()),
text: "正在聆听中",
lfrom: buttonItem.lang,
lto: buttonItem.lto,
},
});
//刷新列表
this.scrollToNew();
},
/
**
* 松开按钮结束语⾳识别
*/
streamRecordEnd: function (e) {
let detail = e.detail || {}; // ⾃定义组件触发事件时提供的detail对象 let buttonItem = detail.buttonItem || {};
// 防⽌重复触发stop函数
if (!ding || dStatus != 0) {
console.warn("has finished!");
return;
}
manager.stop();
this.setData({
bottomButtonDisabled: true,
});
},
编辑识别⽂字并完上传的主要代码：
/**
* 页⾯的初始数据
*/
data: {
edit_text_max: 200,
remain_length: 200,
edit_text: "",
is_focus: false,
tips: "",
index: -1,
voicePath: "",
},
/**
* 加载初始化
*/
onLoad: function (options) {
//根据传⼊的⽂字内容填充编辑框
this.t)
this.setData({
index: index,
t,
voicePath: options.voicePath
})
},
/**
* 编辑⽂字
*/
editInput: function (event) {
console.log(event)
if (event.detail.value.length > EditTextMax()) {
} else {
this.data.edit_text = event.detail.value
this.updateRemainLength(this.data.edit_text)
}
},
/**
* 上传⽂字与语⾳⽂件
*/
editConfirm: function (event) {
let json=this.data.edit_text
//调⽤上传⽂件api将信息上传⾄服务端webApi
wx.uploadFile({
url: api.wxFileUploadUrl,
filePath: this.data.voicePath,
name: "file",
header: {
Authorization: wx.getStorageSync("loginFlag"),
"Content-Type": "multipart/form-data",
},
formData: {
openId: app.globalData.userInfo.openId,
realName: "语⾳⽂件",
json: JSON.stringify(json),
},
success: (result) => {
console.log("success:", result);
if (result.statusCode == "200") {
let data = JSON.parse(result.data);
console.log("data", data);
if (data.success == true) {
let module = dule;
console.log("module", module);
app.showInfo("上传成功");
setTimeout( ()=>{
wx.navigateBack();
}, 2000)
} else {
app.showInfo("异常错误" + Msg + "，请重新进⼊");
wx.navigateTo({
url: "/pages/index/index",
});
}
} else {
app.showInfo("访问后台异常，重新进⼊系统");
wx.navigateTo({
url: "/pages/index/index",
});
}
},
fail: (result) => {
console.log("fail", result);
wx.navigateTo({
url: "/pages/index/index",
});
},
complete: () => {},
});
},
四、后端SpringBoot实现语⾳⽂件上传webApi
1、SpringBoot项⽬API相关结构树
2、⽂件上传⼯具类的实现
tools⼯具类包中主要存⽂件通⽤的⽂件上传⼯具类，该⼯具类会将⽂件上传⾄配置指定的⽂件夹下，并将⽂件信息写⼊upload_file表中。
⽂件信息实体类：与数据库中表upload_file对应；
⽂件存储仓库类：通过Spring Data JPA接⼝实现数据的CRUD；
⽂件上传⼯具接⼝：对外统⼀封装⽂件上传⽅法；
⽂件上传⼯具实现类：实现⽂件上传⽅法接⼝。
⽂件信息实体类：UploadFile.java
/**
* ⽂件信息表
*
* @author zhuhuix
* @date 2020-04-20
*/
@Entity
@Getter
@Setter
@Table(name = "upload_file")
public class UploadFile {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@NotNull(groups = Update.class)
private Long id;
/**
* ⽂件实际名称
*/
@Column(name = "real_name")
private String realName;
/**
* ⽂件名
*/
@NotNull
@Column(name = "file_name")
代码转换
private String fileName;
/**
* ⽂件主名称
*/
@NotNull
@Column(name = "primary_name")
private String primaryName;
/**
* ⽂件扩展名
*/
@NotNull
private String extension;
/**
* 存放路径
*/
@NotNull
private String path;
/**
* ⽂件类型
*/
private String type;
/**
* ⽂件⼤⼩
*/
private Long size;
/
**
* 上传⼈
*/
private String uploader;
@JsonIgnore
@Column(name = "create_time")
@CreationTimestamp
private Timestamp createTime;
public UploadFile(String realName, @NotNull String fileName, @NotNull String primaryName, @NotNull String extension, @NotNull String path, String type, Long size, String uploader) { alName = realName;
this.fileName = fileName;
this.primaryName = primaryName;
this.path = path;
this.size = size;
this.uploader = uploader;
}
@Override
public String toString() {
return "UploadFile{" +
"fileName='" + fileName + '\'' +
", uploader='" + uploader + '\'' +
", createTime=" + createTime +
'}';
}
}
⽂件存储仓库类:UploadFileRepository.java
/**
* 上传⽂件DAO接⼝层
*
* @author zhuhuix
* @date 2020-04-03
*/
public interface UploadFileRepository extends JpaRepository<UploadFile, Long>, JpaSpecificationExecutor<UploadFile> {
//该接⼝继承JpaRepository及CrudRepository接⼝，已实现了如findById,save,delete等CRUD⽅法
}
UploadFileRepository 接⼝继承JpaRepository及CrudRepository接⼝，已实现了如findById,save,delete等CRUD⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。