Implement long press to speak function and use simultaneous interpretation interface to achieve translation
We can use the speech recognition capabilities in the WeChat applet and the simultaneous interpretation interface of Tencent Cloud to realize the function of long pressing to speak and translate. The specific implementation steps are as follows:
- Adding the long press to speak function in the mini program can be achieved through
longPressStartthe and events. Code example:longPressEnd
<button bindlongtap="longPressStart" bindtouchend="longPressEnd">按住说话</button>
Page({
data: {
isRecording: false, // 是否正在录音
},
longPressStart: function() {
this.setData({
isRecording: true,
})
// 开始录音
// ...
},
longPressEnd: function() {
this.setData({
isRecording: false,
})
// 结束录音
// ...
},
})
- Using the speech recognition capabilities of the WeChat applet, you can use
wx.startRecordthe andwx.stopRecordmethods to record and stop recording. Code example:
Page({
data: {
isRecording: false,
recordFilePath: '', // 录音文件路径
},
longPressStart: function() {
this.setData({
isRecording: true,
})
wx.startRecord({
success: res => {
this.setData({
recordFilePath: res.tempFilePath,
})
},
fail: res => {
console.log('录音失败', res)
},
})
},
longPressEnd: function() {
this.setData({
isRecording: false,
})
wx.stopRecord()
},
})
- Use Tencent Cloud's simultaneous interpretation interface to upload the recording file to Tencent Cloud after the recording is completed, and call the simultaneous interpretation interface for translation. It can be implemented using the SDK provided by Tencent Cloud. Code example:
const appid = '你的腾讯云 appid'
const secretId = '你的腾讯云 secretId'
const secretKey = '你的腾讯云 secretKey'
const region = 'ap-guangzhou' // 地域信息
const projectId = 0 // 项目 ID，默认为 0
Page({
data: {
isRecording: false,
recordFilePath: '',
translationResult: '', // 翻译结果
},
longPressStart: function() {
this.setData({
isRecording: true,
})
wx.startRecord({
success: res => {
this.setData({
recordFilePath: res.tempFilePath,
})
},
fail: res => {
console.log('录音失败', res)
},
})
},
longPressEnd: function() {
this.setData({
isRecording: false,
})
wx.stopRecord({
success: res => {
const filePath = res.tempFilePath
// 使用腾讯云 SDK 上传录音文件
const cos = new COS({
getAuthorization: function(options, callback) {
const authorization = COS.getAuthorization({
SecretId: secretId,
SecretKey: secretKey,
Method: options.Method,
Pathname: options.Pathname,
Query: options.Query,
Headers: options.Headers,
Expires: 60, // 单次签名有效时间，单位秒，默认30秒，最长可设置为600秒
})
callback({
Authorization: authorization,
FileId: options.FileId,
BucketName: options.BucketName,
Region: region,
})
},
})
cos.uploadFile({
Bucket: '你的腾讯云存储桶名称',
Region: region,
Key: 'record/' + new Date().getTime() + '.mp3',
FilePath: filePath,
Success: uploadRes => {
const fileUrl = uploadRes.Location
// 调用同声传译接口进行翻译
const translator = new tmt.Translator({
credentials: {
secretId: secretId,
secretKey: secretKey,
},
projectId: projectId,
})
translator
.speechTrans({
src: fileUrl,
source: 'auto',
target: 'zh',
audioFormat: 'mp3',
audioRate: 16000, // 输入音频码率，仅支持16000，固定值
})
.then(res => {
this.setData({
translationResult: res.targetText,
})
})
.catch(err => {
console.log('翻译失败', err)
})
},
Error: err => {
console.log('上传录音文件失败', err)
},
})
},
fail: res => {
console.log('停止录音失败', res)
},
})
},
})
- Display the translation results on the page, code example:
<view class="translation-result">{
{translationResult}}</view>
.translation-result {
font-size: 18px;
margin-top: 20px;
}
In this way, you can realize the function of long pressing to speak and translate.