H5语音合成SpeechSynthesis

SpeechSynthesis 介绍:文档传送门

网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

因此我们在某些业务中,我们可以不需要服务端提供第三方合成语音接口;如百度TTS等第三方语音合成服务;

let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);

由于各大浏览器支持度不同,拿chrome来说,某些版本支持,某些版本不支持,所以目前业务场景局限于某些固定浏览器版本的内网项目,线上项目谨慎使用。

注:由于有些浏览器版本限制 如播放不出声音,建议试试chrome86以下版本,测试过91版本不行,92,86,83可以。

实现H5语音播报和语音文字互转,可以通过以下两种方式: 1. 使用Web Speech API Web Speech API是一个JavaScript API,可以让开发者在网页上实现语音识别和语音合成功能。使用Web Speech API实现H5语音播报和语音文字互转,可以按照以下步骤: - 检查浏览器是否支持Web Speech API。 - 使用SpeechRecognition对象实现语音识别功能。 - 使用SpeechSynthesis对象实现语音合成功能。 以下是一个简单的示例代码: ```javascript // 检查浏览器是否支持Web Speech API if ('speechSynthesis' in window && 'SpeechRecognition' in window) { // 创建语音合成对象 var synth = window.speechSynthesis; // 创建语音识别对象 var recognition = new window.SpeechRecognition(); // 监听语音识别结果 recognition.onresult = function(event) { var result = event.results[0][0].transcript; console.log(result); }; // 开始语音识别 recognition.start(); // 播放语音 var utterance = new SpeechSynthesisUtterance('Hello world!'); synth.speak(utterance); } else { console.log('Web Speech API is not supported.'); } ``` 2. 使用第三方服务 除了使用Web Speech API,还可以使用第三方服务实现H5语音播报和语音文字互转。例如,可以使用百度语音技术实现语音识别和语音合成功能。具体步骤如下: - 注册百度语音技术开发者账号,并创建应用。 - 在网页中引入百度语音技术的JavaScript SDK。 - 使用百度语音技术的API实现语音识别和语音合成功能。 以下是一个简单的示例代码: ```javascript // 引入百度语音技术的JavaScript SDK <script src="https://cdn.jsdelivr.net/npm/bd-audio"></script> // 创建百度语音技术的语音识别对象 var speechRecognizer = new BaiduASR(); // 开始语音识别 speechRecognizer.start({ onComplete: function(result) { console.log(result); } }); // 创建百度语音技术的语音合成对象 var speechSynthesizer = new BaiduTTS(); // 播放语音 speechSynthesizer.speak('Hello world!'); ``` 需要注意的是,使用第三方服务需要遵守相关服务条款和隐私政策,并保障用户个人隐私安全。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值