今天介绍百度云的两种技术：短语音识别和文本在线合成。语音识别，新注册的的用户可以免费领取三个月的使用。
image.png
1. 业务场景是，在查询的输入框加了一个录音按钮，点击录音按钮弹出弹框，点击进行录音，点击结束录音，把录音音频使用百度智能云的短语音识别成文字（音频转文字），然后进行查询搜索。
html部分：
<svg-icon
slot="suffix"
icon-class="icon-recorder"
class="icon-recorder"
style="color: #333333"
@click="startRecorder"
/>
data部分：
// 录音
recorderDialogVisible: false,
rec: null,
recordBase64: '',
flag: false, // false 代表还没开始录音
audioUrl: ''
js部分：
created() {
this.flag = false
},
methods: {
// 录音
startRecorder() {
// 创建录音对象
this.rec = Recorder({
type: 'wav', // 录音格式，可以换成wav等其他格式
sampleRate: 16000, // 阿里采样率16000 录音的采样率，越大细节越丰富越细腻
bitRate: 16, // 录音的比特率，越大音质越好
onProcess: (
buffers,
powerLevel,
bufferDuration,
bufferSampleRate,
newBufferIdx,
asyncEnd
) => {
// 录音实时回调，大约1秒调用12次本回调
// 可实时绘制波形，实时上传（发送）数据
if (this.wave) {
this.wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate)
}
}
})
// 打开录音，获得权限
this.rec.open(
() => {
console.log('录音已打开')
if (this.$refs.recwave) {
// 创建音频可视化图形绘制对象
this.wave = Recorder.WaveView({ elem: this.$refs.recwave })
}
},
(msg, isUserNotAllow) => {
// 用户拒绝了录音权限，或者浏览器不支持录音
console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg)
// isUserNotAllow代表用户拒绝授权或浏览器不支持录音
if (isUserNotAllow) {
this.msgError('无法录音:' + msg)
} else {
// 设备不支持
this.msgError('无法录音:' + '设备不支持')
}
}
)
// 权限请求被忽略
window.waitDialogClick = () => {
this.msgError('麦克风权限请求被忽略')
}
this.recorderDialogVisible = true
},
// 开始录音
recStart() {
this.flag = true
if (!this.rec) {
console.error('未打开录音')
return
}
this.rec.start()
console.log('已开始录音')
},
// 结束录音
recStop() {
if (!this.rec) {
console.error('未打开录音')
return
}
this.rec.stop(
(blob, duration) => {
// blob就是我们要的录音文件对象，可以上传，或者本地播放
this.recBlob = blob
// 简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
var localUrl = (window.URL || webkitURL).createObjectURL(blob)
console.log('录音成功', blob, localUrl, '时长:' + duration + 'ms')
this.size = blob.size // 文件字节大小
this.upload(blob) // 把blob文件上传到服务器
this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
this.rec = null
},
err => {
console.error('结束录音出错：' + err)
this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
this.rec = null
}
)
},
// blob流转换为base64
blobToDataURI(blob, callback) {
var reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = e => {
callback(reader.result)
}
},
upload(blob) {
// blob格式再转换为base64格式 并且去头部
this.blobToDataURI(blob, result => {
var base64String = result
this.recordBase64 = base64String.replace(/^data:audio\/\w+;base64,/, '') // 去掉base64位头部
})
this.main()
},
async main() {
axios({
url: 'https://vop.baidu.com/server_api',
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
data: {
format: 'wav',
rate: 16000,
channel: 1,
cuid: '', // KpvVkGmfdIohVMVI3awvua79
token: await this.getAccessToken(),
speech: this.recordBase64,
len: this.size
}
})
.then(res => {
this.recordBase64 = ''
this.params.searchText = res.data.result[0]
this.recorderDialogVisible = false
this.handleQuery()
this.wave = null
this.flag = false
})
.catch(error => {
console.log('错误提示', error)
this.recordBase64 = ''
this.params.searchText = ''
this.recorderDialogVisible = false
this.wave = null
this.flag = false
})
},
/**
* 使用 AK，SK 生成鉴权签名（Access Token）
* @return string 鉴权签名信息（Access Token）
*/
getAccessToken() {
const request = require('request')
const AK = '' // 百度云申请的
const SK = '' // 百度云申请的
const options = {
method: 'POST',
url:
'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' +
AK +
'&client_secret=' +
SK
}
return new Promise((resolve, reject) => {
request(options, (error, response) => {
if (error) {
reject(error)
} else {
resolve(JSON.parse(response.body).access_token)
}
})
})
},
onClose() {
// 结束录音后关闭弹框把内容传到input框
// 如果点了录音没有结束直接点击关闭弹框
if (this.recordBase64 === '') {
this.rec.close() // 关闭录音
this.rec = null
this.wave = null
this.recorderDialogVisible = false
this.flag = false
return
}
if (!this.rec) {
console.error('未打开录音')
} else {
this.rec.stop(
(blob, duration) => {
// blob就是我们要的录音文件对象，可以上传，或者本地播放
this.recBlob = blob
// 简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
var localUrl = (window.URL || webkitURL).createObjectURL(blob)
this.size = blob.size
this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
this.rec = null
},
err => {
console.error('结束录音出错：' + err)
this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
this.rec = null
}
)
}
this.wave = null
this.recorderDialogVisible = false
this.flag = false
},
}
2. 业务场景是，把文字使用百度智能云的文本在线合成音频文件（文字转音频），进行播放。
js部分：
async playFullText() {
// 合成参数
const options = {
per: 4, // 发音人，4代表度丫丫
spd: 5, // 语速，取值0-9，默认为5中语速
pit: 5, // 语调，取值0-9，默认为5中语调
vol: 5 // 音量，取值0-15，默认为5中音量
}
const playAudio = audioUrl => {
const audio = new Audio(audioUrl)
audio.play()
}
axios({
url: 'https://tsn.baidu.com/text2audio',
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
Accept: '*/*'
},
responseType: 'blob',
params: {
tex: '测试',
tok: await this.getAccessToken(),
cuid: '', // KpvVkGmfdIohVMVI3awvua79
ctp: '1',
lan: 'zh',
spd: '5',
pit: '5',
vol: '5',
per: '1',
aue: '3'
}
})
.then(res => {
const audioData = res.data /* 二进制数据 */
const blob = new Blob([audioData], { type: 'audio/mpeg' }) // 替换 'audio/mpeg' 为你的音频类型
// 创建可供流式播放的 URL
const audioUrl = URL.createObjectURL(blob)
const audio = new Audio(audioUrl)
audio.play()
})
.catch(error => {
console.log('错误提示', error)
})
},
image.png
image.png
网友评论