背景
我的应用场景式是将一篇文章通过语音方式播放出来，并且初期通过Vue的纯前端先写一个Demo，所以就用到了科大讯飞的语音合成。
原因分析
Worker()构造函数创建一个Worker对象，该对象执行指定的 URL 脚本。这个脚本必须遵守 同源策略
但是在用的过程中，因为科大讯飞提供的WebAPI的示例是由原生jS来实现的，所以将其转换到Vue的过程中发生了一些问题，其实归根结底都是因为Worker的同源策略导致的。
最后用将代码保存为本地，作为JS文件字符串作为参数传入new Worker()中。
话不多说，直接贴代码。
代码实现
onlineTTS.js:
注意填写里面的APPID、API_SECRET、API_KEY填写
/*
* @Autor: lycheng
* @Date: 2020-01-13 16:12:22
*/
/**
* Created by iflytek on 2019/11/19.
*
* 在线语音合成调用demo
* 此demo只是一个简单的调用示例，不适合用到实际生产环境中
*
* 在线语音合成 WebAPI 接口调用示例 接口文档（必看）：https://www.xfyun.cn/doc/tts/online_tts/API.html
* 错误码链接：
* https://www.xfyun.cn/doc/tts/online_tts/API.html
* https://www.xfyun.cn/document/error-code （code返回错误码时必看）
*
*/
// 1. websocket连接：判断浏览器是否兼容，获取websocket url并连接，这里为了方便本地生成websocket url
// 2. 连接websocket，向websocket发送数据，实时接收websocket返回数据
// 3. 处理websocket返回数据为浏览器可以播放的音频数据
// 4. 播放音频数据
// ps: 该示例用到了es6中的一些语法，建议在chrome下运行
//APPID，APISecret，APIKey在控制台-我的应用-语音合成（流式版）页面获取
const APPID = ''
const API_SECRET = ''
const API_KEY = ''
import CryptoJS from 'crypto-js'
import { Base64 } from 'js-base64'
// main.js
import {dataURL} from "./worker";
var myworker = new Worker(dataURL);
function getWebsocketUrl() {
return new Promise((resolve, reject) => {
var apiKey = API_KEY
var apiSecret = API_SECRET
var url = 'wss://tts-api.xfyun.cn/v2/tts'
//var host = location.host
var host = 'tts-api.xfyun.cn'
var date = new Date().toGMTString()
var algorithm = 'hmac-sha256'
var headers = 'host date request-line'
var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1`
var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
var signature = CryptoJS.enc.Base64.stringify(signatureSha)
var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`
var authorization = btoa(authorizationOrigin)
url = `${url}?authorization=${authorization}&date=${date}&host=${host}`
resolve(url)
})
}
export default class TTSRecorder {
constructor({
speed = 50,
voice = 50,
pitch = 50,
voiceName = 'xiaoyan',
appId = APPID,
text = '',
tte = 'UTF8',
defaultText = '请输入您要合成的文本',
} = {}) {
this.speed = speed
this.voice = voice
this.pitch = pitch
this.voiceName = voiceName
this.text = text
this.tte = tte
this.defaultText = defaultText
this.appId = appId
this.audioData = []
this.rawAudioData = []
this.audioDataOffset = 0
this.status = 'init'
myworker.onmessage = (e) => {
console.log('onmessage in master')
this.audioData.push(...e.data.data)
this.rawAudioData.push(...e.data.rawAudioData)
}
}
// 修改录音听写状态
setStatus(status) {
this.onWillStatusChange && this.onWillStatusChange(this.status, status)
this.status = status
}
// 设置合成相关参数
setParams({ speed, voice, pitch, text, voiceName, tte }) {
// console.log(text)
speed !== undefined && (this.speed = speed)
voice !== undefined && (this.voice = voice)
pitch !== undefined && (this.pitch = pitch)
text && (this.text = text)
tte && (this.tte = tte)
voiceName && (this.voiceName = voiceName)
this.resetAudio()
}
// 连接websocket
connectWebSocket() {
console.log('ttsing')
this.setStatus('ttsing')
return getWebsocketUrl().then(url => {
let ttsWS
if ('WebSocket' in window) {
ttsWS = new WebSocket(url)
} else if ('MozWebSocket' in window) {
ttsWS = new MozWebSocket(url)
} else {
alert('浏览器不支持WebSocket')
return
}
this.ttsWS = ttsWS
ttsWS.onopen = e => {
this.webSocketSend()
this.playTimeout = setTimeout(() => {
this.audioPlay()
}, 1000)
}
ttsWS.onmessage = e => {
this.result(e.data)
}
ttsWS.onerror = e => {
clearTimeout(this.playTimeout)
this.setStatus('errorTTS')
// alert('WebSocket报错，请f12查看详情')
console.error('WebSocket报错，请f12查看详情')
console.error(`详情查看：${encodeURI(url.replace('wss:', 'https:'))}`)
}
ttsWS.onclose = e => {
console.log(e)
}
})
}
// 处理音频数据
transToAudioData(audioData) {}
// websocket发送数据
webSocketSend() {
var params = {
common: {
app_id: this.appId, // APPID
},
business: {
aue: 'raw',
auf: 'audio/L16;rate=16000',
vcn: this.voiceName,
speed: this.speed,
volume: this.voice,
pitch: this.pitch,
bgs: 1,
tte: this.tte,
},
data: {
status: 2,
text: this.encodeText(
this.text || this.defaultText,
this.tte === 'unicode' ? 'base64&utf16le' : ''
)
},
}
this.ttsWS.send(JSON.stringify(params))
}
encodeText (text, encoding) {
switch (encoding) {
case 'utf16le' : {
let buf = new ArrayBuffer(text.length * 4)
let bufView = new Uint16Array(buf)
for (let i = 0, strlen = text.length; i < strlen; i++) {
bufView[i] = text.charCodeAt(i)
}
return buf
}
case 'buffer2Base64': {
let binary = ''
let bytes = new Uint8Array(text)
let len = bytes.byteLength
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary)
}
case 'base64&utf16le' : {
return this.encodeText(this.encodeText(text, 'utf16le'), 'buffer2Base64')
}
default : {
return Base64.encode(text)
}
}
}
// websocket接收数据的处理
result(resultData) {
let jsonData = JSON.parse(resultData)
// 合成失败
if (jsonData.code !== 0) {
alert(`合成失败: ${jsonData.code}:${jsonData.message}`)
console.error(`${jsonData.code}:${jsonData.message}`)
this.resetAudio()
return
}
myworker.postMessage(jsonData.data.audio)
if (jsonData.code === 0 && jsonData.data.status === 2) {
this.ttsWS.close()
}
}
// 重置音频数据
resetAudio() {
this.audioStop()
this.setStatus('init')
this.audioDataOffset = 0
this.audioData = []
this.rawAudioData = []
this.ttsWS && this.ttsWS.close()
clearTimeout(this.playTimeout)
}
// 音频初始化
audioInit() {
let AudioContext = window.AudioContext || window.webkitAudioContext
if (AudioContext) {
this.audioContext = new AudioContext()
this.audioContext.resume()
this.audioDataOffset = 0
}
}
// 音频播放
audioPlay() {
this.setStatus('play')
let audioData = this.audioData.slice(this.audioDataOffset)
this.audioDataOffset += audioData.length
let audioBuffer = this.audioContext.createBuffer(1, audioData.length, 22050)
let nowBuffering = audioBuffer.getChannelData(0)
if (audioBuffer.copyToChannel) {
audioBuffer.copyToChannel(new Float32Array(audioData), 0, 0)
} else {
for (let i = 0; i < audioData.length; i++) {
nowBuffering[i] = audioData[i]
}
}
let bufferSource = this.bufferSource = this.audioContext.createBufferSource()
bufferSource.buffer = audioBuffer
bufferSource.connect(this.audioContext.destination)
bufferSource.start()
bufferSource.onended = event => {
if (this.status !== 'play') {
return
}
if (this.audioDataOffset < this.audioData.length) {
this.audioPlay()
} else {
this.audioStop()
}
}
}
// 音频播放结束
audioStop() {
this.setStatus('endPlay')
clearTimeout(this.playTimeout)
this.audioDataOffset = 0
if (this.bufferSource) {
try {
this.bufferSource.stop()
} catch (e) {
console.log(e)
}
}
}
start() {
if(this.audioData.length) {
console.log('audioPlay')
this.audioPlay()
} else {
if (!this.audioContext) {
console.log('audioInit')
this.audioInit()
}
if (!this.audioContext) {
alert('该浏览器不支持webAudioApi相关接口')
return
}
this.connectWebSocket()
}
}
stop() {
this.audioStop()
}
}
worker.js：
因为直接export出一个字符串的话，会因为换行符空格等原因导致奇怪的问题，所以需要将主要代码通过一系列的编码转换才能用
const workerCode =
`onmessage = function (e) {
const transcode = function (audioDataStr, fromRate = 16000, toRate = 22505) {
let outputS16 = base64ToS16(audioDataStr)
let output = transS16ToF32(outputS16)
output = transSamplingRate(output, fromRate, toRate)
output = Array.from(output)
self.postMessage({
data: output,
rawAudioData: Array.from(outputS16)
})
}
const transSamplingRate = (data, fromRate = 44100, toRate = 16000) => {
let fitCount = Math.round(data.length * (toRate / fromRate))
let newData = new Float32Array(fitCount)
let springFactor = (data.length - 1) / (fitCount - 1)
newData[0] = data[0]
for (let i = 1; i < fitCount - 1; i++) {
let tmp = i * springFactor
let before = Math.floor(tmp).toFixed()
let after = Math.ceil(tmp).toFixed()
let atPoint = tmp - before
newData[i] = data[before] + (data[after] - data[before]) * atPoint
}
newData[fitCount - 1] = data[data.length - 1]
return newData
}
const transS16ToF32 = (input) => {
let tmpData = []
for (let i = 0; i < input.length; i++) {
let d = input[i] < 0 ? input[i] / 0x8000 : input[i] / 0x7fff
tmpData.push(d)
}
return new Float32Array(tmpData)
}
const base64ToS16 = (base64AudioData) => {
base64AudioData = atob(base64AudioData)
// 检查并调整长度为2的倍数
if (base64AudioData.length % 2 !== 0) {
base64AudioData += '\x00'; // 添加一个额外的字节，使长度成为2的倍数
}
const outputArray = new Uint8Array(base64AudioData.length)
for (let i = 0; i < base64AudioData.length; ++i) {
outputArray[i] = base64AudioData.charCodeAt(i)
}
return new Int16Array(new DataView(outputArray.buffer).buffer)
}
transcode(e.data)
}`
const encoder = new TextEncoder();
const dataUint8Array = encoder.encode(workerCode);
const base64Code = btoa(String.fromCharCode.apply(null, dataUint8Array));
export const dataURL = `data:application/javascript;base64,${base64Code}`;
vue文件
其中
import TTSRecorder from "@/assets/onlineTTS";根据自己的目录结构自行修改，这个文件就是最上面的onlineTTS.js代码
<template>
<view class="body">
<u--text size="40" align="center" :bold="true" :text="title"></u--text>
<u--text size="36" :text="content"></u--text>
<view style="width: 100rpx;height:auto;position: absolute;right: 0rpx;bottom:20%">
<u-icon :name="['init', 'endPlay', 'errorTTS'].indexOf(this.ttsRecorder.status) === -1?'pause-circle':'play-circle'" :color="isPlaying?'#dd524d':'#007aff'" size="80"
@click="handlePlay"></u-icon>
</view>
</view>
</template>
<script>
import TTSRecorder from "@/assets/onlineTTS";
export default {
data() {
return {
title: "雷锋",
content: "我相信,人性的光芒无论被时光冲刷多少遍都不会褪却一点光彩。我相信,所以我坚持。我相信,所以我铭记。雷锋,雷锋......那个我脑海中不断呼唤的名字,那是我心中永恒的坚持。时钟在转动,科技在发展,世纪在变更。良知,良知....越来越多的现实岂能民灭良知?我怀念雷锋了。记起雷锋去世的经历,深深镇嵌在每个人心中;那是一个细雨的夏季,雷锋与他的助手乔安山驾车从工地返回驻地。他们的车子开进队里的车场后,雷锋看见车上滅了许多泥水。便不顾长途行车的疲急,立即叫他的助手乔安山发动车子去空地洗车;绕过一段比较窄的过道为了安全起见,雷锋下车为乔安山指挥倒转弯:“向左,向左……倒!倒因为地滑,突然倒到一根晒衣服的竹竿上,而竹竿却不偏不歪正好打到雷锋的太阳穴上,当场昏倒在地,昏死过去.....队员们急忙用担架护送雷锋到附近的医院。各级首长闻讯之后立即赶到医院,同时以最快的速度把医疗专家请到雷锋面前。因为顺骨的损伤,又耽搁了大量时间,雷锋同志因工牺牲了。他生的伟大,死的光荣。在雷锋的追悼会上有上万人为雷锋送行,他是人们心中永远的英雄。雷锋,那个为别人着想毫无怨言的人;雷锋,那个平凡而伟大的人;雷锋,那个心中永远的英雄。在以后的日子里回忆雷锋这个字眼都是想着他伟大的事迹,记得队曾对雷锋说的一句话:“雷锋出差一千里,好事做了一火车。”这就是雷锋。",
isPlaying: false,
ttsRecorder: null
}
},
onLoad(option) {
this.ttsRecorder= new TTSRecorder()
this.ttsRecorder.setParams({
voiceName: 'xiaoyan',
tte: 'UTF8',
text: this.title + " " + this.content
})
},
methods: {
handlePlay(text) {
if (['init', 'endPlay', 'errorTTS'].indexOf(this.ttsRecorder.status) > -1) {
this.ttsRecorder.start()
} else {
this.ttsRecorder.stop()
}
}
}
}
</script>
<style>
</style>
最终的页面效果：
点击右下角的播放按钮，即可播放、停止
