使用原生js五行代码实现文字转语音功能

最新推荐文章于 2023-03-05 15:36:33 发布

前端wikc

最新推荐文章于 2023-03-05 15:36:33 发布

阅读量365

点赞数 1

文章标签：语音识别人工智能 javascript html5

本文链接：https://blog.csdn.net/qq_64469057/article/details/128740190

版权

首先我们需要借助一个api叫做：SpeechSynthesisUtterance下面我们就看看怎么使用。

SpeechSynthesisUtterance基本属性：

SpeechSynthesisUtterance.text    //获取并设置话语的文本
SpeechSynthesisUtterance.voice    //获取并设置话语的声音
SpeechSynthesisUtterance.volume    //获取并设置话语的音量
SpeechSynthesisUtterance.tate    //获取并设置话语的速度(值越大语速越快，越小语速越慢)
SpeechSynthesisUtterance.lang    //获取并设置话语的语言
SpeechSynthesisUtterance.pitch    //获取并设置话语的音调(值越大越尖锐，越低越低沉)

其次我们还需要使用到：speechSynthesis（语音合成）语音服务，它有如下这些方法

speak()  //将对应的实例添加到语音队列中
cancel() //删除列队中所有的语音，如果正在播放，则直接停止
pause()  //暂停语音
resume()  //恢复暂停的语音
getVoices  //获取支持的语言数组  注意：必须添加在voiceschanged事件中才能生效

最后我们五行代码实现文字转语音播报：

//指定文字合成语音
let speakAudio = new window.SpeechSynthesisUtterance('开始语音播报')
//配置
speakAudio.rate = 1;//播放语速
speakAudio.volume = 1;//播放音量
speakAudio.text = '学前端，就来铅笔头';//改变播放文本内容
window.speechSynthesis.speak(speakAudio);//控制播放

全部代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">点击播放</button>
</body>
<script>
  btn.addEventListener("click", function () {
    //指定文字合成语音
    let speakAudio = new window.SpeechSynthesisUtterance('开始语音播报')
    //配置
    speakAudio.rate = 1;//播放语速
    speakAudio.volume = 1;//播放音量
    speakAudio.text = '学前端，就来铅笔头';//改变播放文本内容
    window.speechSynthesis.speak(speakAudio);//控制播放
  })

</script>

</html>