1、控制台

• 讯飞控制台注册后即可使用

1-1、创建应用后得到接口服务认证信息

• APPID，APISecret，APIKey在控制台-我的应用-语音合成（流式版）页面获取

  
  
  image.png

1-2、发音人

• 通过配置vcn，切换各种特色发音

  
  
  基础发音人.png
  
  
  特色发音人.png

1-2-1、代码

//切换发音人(item: string vcn)
onSelect(item, index) {
      this.ttsRecorder.stop()
      this.ttsRecorder.resetAudio()
      this.composeSuccessed = false
      this.startflag = false
      this.ttsRecorder.setParams({
        voiceName: item.language,
        text: this.noteInfo.content.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, '').replace(/ /g, '').replace(/>/g, '').replace(/[ ]|[&nbsp;]/g, ''),
        composeCallback: this.composeCallback,
        endCallback: this.endCallback
      })
      this.selectLangue = item.name 
      this.queryWxConfigs(this.ttsRecorder.voiceName) //微信分享的配置
      this.showSheet = false
      setTimeout(() => {
        if (this.ttsarry.indexOf(this.noteInfo.id) === -1) { // 是新的一篇帖子
          if (this.ttsarry.length >= 3) { // 已经读过3篇文章
            this.$toast('已使用3篇正文语音阅读，去凯迪APP体验更佳')
            setTimeout(() => {
              this.$router.push('/download')
            }, 3000)
            return
          } else {
            this.ttsarry.push(this.noteInfo.id)
            storage.set('limit_three', this.ttsarry)
            // 第一次来，不满足3次，读帖
            this.ttsRecorder.start()
            this.startflag = true
          }
        } else {
          // 曾经读过的文章，可以继续读
          this.ttsRecorder.start()
          this.startflag = true
        }
      }, 500)
    },

2、class TTSRecorder

2-1、原有 prototype

• 改录音听写状态 setStatus(status) 使用状态进行交互逻辑处理，状态可自定义，参考

 let btnState = {
    init: '立即合成',
    ttsing: '正在合成',
    play: '停止播放',
    endPlay: '重新播放',
    errorTTS: '合成失败',
  }

• 设置合成相关参数 setParams({ speed, voice, pitch, text, voiceName, tte })
  

  相关参数.png

• 连接websocket connectWebSocket

• websocket发送数据 webSocketSend

• websocket接收数据的处理 result(resultData) 可在此放置合成失败回调

• 重置音频数据 resetAudio

• 音频初始化 audioInit

• 音频播放audioPlay 使用start更为合适

 start() {
    if(this.audioData.length) {
      this.audioPlay()
    } else {
      if (!this.audioContext) {
        this.audioInit()
      }
      if (!this.audioContext) {
        alert('该浏览器不支持webAudioApi相关接口')
        return
      }
      this.connectWebSocket()
    }
  }

• 音频播放结束audioStop 同 stop

3、websocket （demo中transcode.worker.js）

• transWorker为相关的websocket数据处理，通过接口密钥基于hmac-sha256计算签名，向服务器端发送Websocket协议握手请求

let transWorker = new TransWorker()
//APPID，APISecret，APIKey在控制台-我的应用-语音合成（流式版）页面获取
const APPID = 'APPID'
const API_SECRET = 'API_SECRET'
const API_KEY = 'API_KEY'

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 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)
  })
}