近期项目中有个需求,需要点击按钮播放文字答案,然后开始了填坑之旅
首先使用h5的audio标签,由于后台返回音频格式为base64格式,原格式为wav,开始不确定是否可以直接播放base64格式的音频,前端通过npm的base64ToBlob的方式解码,并赋值给audio的src,具体代码如下:
//答案语音播放
playVoice(text,e){
let audio = this.$refs.audio;
// 提取返回答案中的文字
let reg = /<[^<>]+>/g;
if(text.answerMsg || text.promptVagueMsg){
text = text.answerMsg.replace(reg,'') + text.promptVagueMsg.replace(reg,'') + text.vagueList.toString();
}
document.querySelectorAll('.voiceBtn').forEach(item => {
item.className = 'voiceBtn play';
})
e.target.className = 'voiceBtn pause'
if(this.audioText !== text){
//点的不是同一段文字
let params = {
text
};
params = pushDataFormat(params);
this.$axios.post('ncfNewTimeRobot/textToVoice.do',{
params: params
}).then(res => {
console.log(res.data)
this.audioText = text;
if(res.errCode == 0){
// let audioBlob = base64ToBlob(res.data.data, 'wav');
// audio.src = window.URL.createObjectURL(audioBlob);
audio.load();
audio.play