前端实现文字转语音功能

刚做一个项目，需要将文字内容作为语音内容并播报出来，于是开始研究：

1. 前端尝试实现：

利用 H5 新API SpeechSynthesisUtterance 来实现，基本属性如下所示：

var speech = new SpeechSynthesisUtterance()

• speech.lang 获取并设置话语的语言（en-US、zh-CN）
• speech.pitch 获取并设置话语的音调 (值越大越尖锐，range:0-2, default:1, float)
• speech.rate 获取并设置说话的速度 (值越大语速越快, range:0.1-10, default:1, float)
• speech.text 获取并设置说话时的文本
• speech.voice 获取并设置说话的声音
• speech.volume 获取并设置说话的音量 (range: 0-1, default:1, float)
• speech.onboundary
• speech.onend 播放结束的回调
• speech.onerror 播放出现错误的回调
• speech.onmark 当读到标记文本时的回调
• speech.onpause 播放暂停
• speech.onresume 播放重启
• speech.onstart 播放开始的回调

实现代码如下：

html代码：

    <button id="btn">开始播报</button>
    <button id="pause">停止播报</button>

javascript代码：

   const synth = window.speechSynthesis; // 启用文本
   const msg = new SpeechSynthesisUtterance(); 
   document.querySelector('#btn').addEventListener('click',function(){
            var tips = '开始播放语音，请注意:';
            msg.text = tips; 
            msg.lang = "zh-CN"; // 使用的语言:中文
            msg.volume = 1; // 声音音量：1
            msg.rate = 1; // 语速：1
            msg.pitch = 1; // 音高：1
            synth.speak(msg); // 播放
    })
    document.querySelector('#pause').addEventListener('click',function(){
            msg.text = '';
            msg.lang = "zh-CN";
            synth.cancel(msg); // 取消该次语音播放
    })

这个API的兼容性，需要考虑下，项支持IE11，那就放弃吧。 如下所示：

1.png

2. 百度对外共享的TTS接口实现文本转语音

目前我们选择的是这个方案：

1. 前端将需要转为语音的文字发给后台，
2. 后台会通过tts生成MP3格式的文件，并通过接口返给前端
3. 前端拿到mp3Url地址,绑定到audio的src上

<audio controls="controls" ref="MP3" hidden="true" loop="true">
          <source :src="mp3Url" type="audio/mp3">
</audio>

虽然实现了，兼容性比H5API好点，但是语音有点卡顿，很机械。
各有所需，看情况定吧。