Text-to-speech on the PC side can use the API in HTML5, SpeechSynthesisUtterance
const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance();
- The specific method is not introduced here, because the above method does not work on the web mobile terminal
- To achieve text-to-speech playback on the mobile terminal, I use a third-party interface to implement new Audio(), but the computer needs to be connected to the Internet
third party interface
Baidu interface
url is
http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=你需要播放的文字
lan language type
lan=en in English
lan = zh Chinese
ie text encoding method
spd speech rate
Numbers from 1 to 9, the larger the number, the faster the speaking speed.
text the text to convert
Sogou interface
url is
https://fanyi.sogou.com/reventondc/synthesis?text=需要播放的文字&speed=1&lang=zh-CHS&from=translateweb&speaker=6
text the text to convert
speed Speech speed 1~? (I tested it to 15 and it's ok) The bigger the speech speed is, the slower it is
lan language type
lan=en in English
lan = zh-CHS Chinese
I don’t understand from (I guess it should be where you requested from and which method you requested from)
speaker voice type 1-6 digits
Youdao interface
Update, the latest Youdao interface is var url = "https://dict.youdao.com/dictvoice?audio="+text+"&le=zh"
text is the parameter that needs to be passed in,Just open the f12 playback language in Youdao Translator and view the official interface url called by Youdao on the network
url is
http://tts.youdao.com/fanyivoice?word=需要播放的文字&le=zh&keyfrom=speaker-target
Word text to be converted
le language type
en Chinese
en English
Realize play, pause, continue to play, and listen to the end of playback
play text to speech
Take Youdao API as an example, set audio as global data in vue
first new Audio(url);
audio.play() is the playback interface
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();
}
Pause playback
this.audio.pause();
Continue to play, also play
this.audio.play();
The monitoring of the end of the playback, because some operations may be required at the end of the playback (such as changing the icon, etc.)
//添加播放结束的监听器
this.audio.addEventListener('ended', (event) => {
console.log("播放结束")
//这里进行播放结束后的操作
});