前端 js + google Text-to-Speech API 实现文字转 mp3 文件

Design by xpy

使用由 Google 的 AI 技术提供支持的 API 将文字转换为自然而逼真的语音。

地址 Google Text-to-Speech 官网 (opens new window)

Tip：官网可以在线体验文字转语音，切换语言、男女声、语音速度等功能（详情见下图） 访问需要梯子

官网 API 详情截图

查阅 google 开发者文档发现 Text-to-Speech API 返回的是 base64 编码的 JSON 和 txt 文本文件

Text-to-Speech API key 的试用申请可以这篇博客 (opens new window)

本文主要讲解前端怎么把 base64 编码的字符串转化为.mp3 文件

1.将 base64 转为二进制 Unicode 编码

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
}

2.JS 二进制转文件流

以上方法得到了 ArrayBufferView 类型的二进制数据, 要将它转换为二进制文件流 这里要用到Blob 对象

const fileStream = new Blob([data], { type: 'audio/mpeg' })

3.通过 url 下载文件流

这里需要用到window.URL.createObjectURL方法

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。
这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

最后通过 download 类型 a 标签调用浏览器下载文件即可

function dataURLtoFile(data, fileName, fileType) {
  const fileStream = new Blob([data], { type: fileType })
  let url = window.URL.createObjectURL(fileStream)
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
  link.remove()
}

最后贴一个.html 的 demo，需要 demo 的小伙伴可以留下 email，看到后发

完