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的数字

有道接口

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("播放结束")
	//这里进行播放结束后的操作
});

你可能感兴趣的:(Vue,前端,vue.js,javascript)