JSatobbtoa⽅法处理base64数据后转Blob类型实现⽂字转语⾳.mp3⽂件前端js + google Text-to-Speech API 实现⽂字转mp3⽂件
使⽤由 Google 的 AI 技术提供⽀持的 API 将⽂字转换为⾃然⽽逼真的语⾳。
Tip：官⽹可以在线体验⽂字转语⾳，切换语⾔、男⼥声、语⾳速度等功能（详情见下图） 访问需要fq
官⽹API详情截图
查阅google开发者⽂档发现 Text-to-Speech API 返回的是base64编码的JSON和txt⽂本⽂件
在线二进制转换Text-to-Speech API key的试⽤申请可以这篇
本⽂主要讲解前端怎么把base64编码的字符串转化为.mp3⽂件
JS base64转⼆进制
⼤多数编码都是由字符串转化成⼆进制的过程，⽽Base64的编码则是从⼆进制转换为字符串。与常规恰
恰相反
js中有两个⽅法专门⽤来处理base64编解码
window.btoa() 和 window.atob()
1. btoa() ⽅法使⽤base-64 编码字符串
2. atob() ⽅法⽤于解码使⽤ base-64 编码的字符串。
注意⚠ ：这两个⽅法都是返回字符串 atob()⽅法解码后返回的是unicode编码的字符串 不是⼆进制对象
下⾯上代码
// 将base64转为⼆进制Unicode编码
function base64toBlob(base64){
bstr =atob(base64),// 获得base64解码后的字符串
n = bstr.length,
u8arr =new Uint8Array(n);// 新建⼀个8位的整数类型数组，⽤来存放ASCII编码的字符串
while(n--){
u8arr[n]= bstr.charCodeAt(n)// 转换编码后才使⽤charCodeAt 到Unicode编码
}
return u8arr
}
JS⼆进制转⽂件流
以上⽅法得到了ArrayBufferView类型的⼆进制数据, 要将它转换为⼆进制⽂件流 这⾥要⽤到Blob对象
const fileStream =new Blob([data],{ type:'audio/mpeg'})
通过url下载⽂件流
这⾥需要⽤到ateObjectURL⽅法
这个 URL 的⽣命周期和创建它的窗⼝中的 document 绑定。这个新的URL 对象表⽰指定的 File 对象或 Blob 对象。最后通过download类型a标签调⽤浏览器下载⽂件即可
function dataURLtoFile(data, fileName, fileType){
const fileStream =new Blob([data],{ type:fileType })
let url = ateObjectURL(fileStream)
let link = ateElement('a')
link.style.display ='none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click();
}
最后贴⼀个.html的demo，需要demo的⼩伙伴可以留下email，看到后发
完

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