vue 文字转语音mp3_vue项目或网站上实现文字转换成语音播放功能

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

方式一：

摘要：语音合成：也被称为文本转换技术(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项目或网站上实现文字转换成语音内容请搜索乐购源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持乐购源码！