vue中文字转语言，适配web移动端

在PC端文字转语音可以使用HTML5中的API，SpeechSynthesisUtterance
const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance();

• 具体方法不在这里介绍，因为上面的方法在web移动端不起作用
• 在移动端实现文字转语音播放，我使用第三方接口来new Audio()实现，但是需要电脑能连网

第三方接口

百度接口

url为

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=你需要播放的文字

lan 语言类型

lan=en 英文

lan = zh 中文

ie 文字编码方式

spd 语速

1-9的数字，数字越大，语速越快。

text 要转换的文本

搜狗接口

url为

https://fanyi.sogou.com/reventondc/synthesis?text=需要播放的文字&speed=1&lang=zh-CHS&from=translateweb&speaker=6

text 要转换的文本

speed 语速 1~？（我测试到15都还可以） 越大，语速越慢

lan 语言类型

lan=en 英文

lan = zh-CHS 中文

from 没搞明白 （我猜应该是获取你是从哪里请求的，哪种方式请求的）

speaker 语音类型 1-6的数字

有道接口

更新，最新的有道接口为var url = “https://dict.youdao.com/dictvoice?audio=”+text+“&le=zh”
text为需要传入的参数，直接在有道翻译中打开f12播放语言并在network查看有道官方调用的接口url即可

url为

http://tts.youdao.com/fanyivoice?word=需要播放的文字&le=zh&keyfrom=speaker-target

word要转换的文本

le 语言类型

zh 中文

en 英文

实现播放，暂停，继续播放，播放结束的监听

播放文字语音

以有道api为例，在vue中将audio设置为全局的data
先 new Audio(url);
audio.play()为播放的接口

        Youdaospeak(text){
    
    
            //有道接口
            var url = "http://tts.youdao.com/fanyivoice?word="+text+"&le=zh&keyfrom=speaker-target";
            this.audio = new Audio(url);
            this.audio.src = url;
            this.audio.play();     
        }

暂停播放

this.audio.pause();

继续播放，也是play

this.audio.play();

播放结束的监听，因为可能在播放结束时需要进行一些操作（如更改图标等）

//添加播放结束的监听器
this.audio.addEventListener('ended', (event) => {
    
    
    console.log("播放结束")
	//这里进行播放结束后的操作
});