一、在网页上实现文字转换成语音

方式一：

摘要：语音合成：也被称为文本转换技术(TTS)，它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。

1、 使用百度的接口：

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字

2、参数说明：

lan=zh：语言是中文，如果改为lan=en，则语言是英文。

ie=UTF-8：文字格式。

spd=2：语速，可以是1-9的数字，数字越大，语速越快。

text=**：这个就是你要转换的文字。

3、代码示例：

语音测试

function doTTS(){

var ttsDiv = document.getElementById('bdtts_div_id');

var ttsAudio = document.getElementById('tts_autio_id');

var ttsText = document.getElementById('ttsText').value;

ttsDiv.removeChild(ttsAudio);

var au1 = '';

var sss = '';

var eee = '';

var au2 = '';

ttsDiv.innerHTML = au1 + sss + eee + au2;

ttsAudio = document.getElementById('tts_autio_id');

ttsAudio.play();

}

方式二：

1、调动方法：参数为指定文字

2、这里主要用的是SpeechSynthesisUtterance的方法

3、代码示例：

在这里插入代码片

点击

// window.οnlοad=function(){

// const synth = window.speechSynthesis

// let msg = new SpeechSynthesisUtterance("你好");

// console.log(msg)

// //msg.rate = 4 播放语速

// //msg.pitch = 10 音调高低

// //msg.text = "播放文本"

// //msg.volume = 0.5 播放音量

// synth.speak(msg);

// }

const synth = window.speechSynthesis

const msg = new SpeechSynthesisUtterance()

msg.text = 'hello world'

msg.lang = 'zh-CN'

function handleSpeak(e) {

synth.speak(msg)

}

function throttle(fn,delay) {

let last = 0

return function() {

const now = new Date()

if(now - last > delay) {

fn.apply(this,arguments)

last = now

}

}

}

console.log(msg);

document.getElementById('abc').οnclick=throttle(handleSpeak,1000);

二、在vue项目中实现文字转换为语音播放

1、调用方法：参数为指定的文字

2、主要使用的也是是SpeechSynthesisUtterance的方法(其他方法也可以，如使用百度的接口)

3、代码示例：

在这里插入代码片

v-on:click="read(word.word)"

src="../../assets/laba.png"

alt="小喇叭"

width="20px"

height="20px"

style="float: right;margin-top: 7px"

/>

在这里插入代码片

methods: {

read: function(word) {

const synth = window.speechSynthesis;

const msg = new SpeechSynthesisUtterance();

msg.text = word;

msg.lang = "zh-CN";

function handleSpeak(e) {

synth.speak(msg);

}

function throttle(fn, delay) {

let last = 0;

return function() {

const now = new Date();

if (now - last > delay) {

fn.apply(this, arguments);

last = now;

}

};

}

console.log(msg);

throttle(handleSpeak(), 1000);

},

}

点击小喇叭即可播放

总结

到此这篇关于在vue项目或网页上实现文字转换成语音的文章就介绍到这了,更多相关在vue项目或网页上实现文字转换成语音内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:vue获取时间戳转换为日期格式代码实例

Vue.js 时间转换代码及时间戳转时间字符串

详解vue2.0 不同屏幕适配及px与rem转换问题

使用Vue开发一个实时性时间转换指令

Vue.js对象转换实例

vue.js将unix时间戳转换为自定义时间格式

利用vue-router实现二级菜单内容转换