一、在網頁上實現文字轉換成語音

方式一：

摘要：語音合成：也被稱為文本轉換技術(TTS)，它是將計算機自己產生的、或外部輸入的文字信息轉變為可以聽得懂的、流利的口語輸出的技術。

1、 使用百度的接口：

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 文字转语音mp3_vue项目或网页上实现文字转换成语音播放功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。