H5 语音合成播报功能

采用的 SpeechSynthesisUtterance实现语音播报功能，参考资料： ONE、TWO

实现效果图：

语法介绍

1、speechSynthesis.getVoices()

getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。

2、speechSynthesis.cancel()

cancel()的方法SpeechSynthesis接口从话语队列中删除所有的话语。

3、speechSynthesis.pause()

pause() 把SpeechSynthesis对象处于暂停状态。

4、SpeechSynthesis.speak()

增加了一个语音话语队列; 它将口语当其他话语排队之前一直说。

5、SpeechSynthesis.resume()

把SpeechSynthesis对象non-paused状态:简历如果它已经停了。

浏览器兼容性

代码附上：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>H5语音播报功能</title><style>article {margin: 0 auto;max-width: 800px;text-align: center;}textarea {max-width: 600px;width:100%;text-align: left;}button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}</style></head><body><article><h3 align="center">语音播报功能：</h3><p><textarea rows="15" class="_play">搜狗[1]  是搜狐公司的旗下子公司，于2004年8月3日推出，目的是增强搜狐网的搜索技能，主要经营搜狐公司的搜索业务。在搜索业务的同时，也推出搜狗输入法、搜狗高速浏览器。</textarea></p><p><label>选择播报语言：</label><select id="voiceSelect" onchange="play()"></select></p><button class="_search" onclick="play()">开始</button><button onclick="resume()">继续</button><button onclick="pause()">暂停</button><button onclick="cancel()">清除队列</button></article></body><script>if(!('speechSynthesis' in window)) {throw alert("对不起，您的浏览器不支持")}var _play = document.querySelector("._play"),to_speak = window.speechSynthesis,dataName, voiceSelect = document.querySelector("#voiceSelect"),voices = [];function play() {cancel();to_speak = new SpeechSynthesisUtterance(_play.value);//to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');for(i = 0; i < voices.length; i++) {if(voices[i].name === selectedOption) {to_speak.voice = voices[i];}}window.speechSynthesis.speak(to_speak);}//暂停function pause() {window.speechSynthesis.pause();}//继续播放function resume() {window.speechSynthesis.resume(); //继续}//清除所有语音播报创建的队列function cancel() {window.speechSynthesis.cancel();}//创建选择语言的select标签function populateVoiceList() {voices = speechSynthesis.getVoices();for(i = 0; i < voices.length; i++) {var option = document.createElement('option');option.textContent = voices[i].name + ' (' + voices[i].lang + ')';if(voices[i].default) {option.textContent += ' -- DEFAULT';}option.setAttribute('data-lang', voices[i].lang);option.setAttribute('data-name', voices[i].name);voiceSelect.appendChild(option);}}setTimeout(function() {populateVoiceList();}, 0)</script></html>

gitHub地址

H5 语音合成播报功能相关推荐

集成Android 科大讯飞免费在线语音合成播报功能（附源码）
概述开篇先介绍一下'科大讯飞',毕竟是我家乡合肥的科技公司,我感到骄傲,更重要的是它在语音识别行业也是佼佼者,在如今人工智能横飞的时代,依然能够保持着较高水准的技术优势.在此,希望科大在AI之战中能 ...
H5网页语音实时播报功能的实现
JS实现的H5实时播报功能,先获取后端语音开关状态,如果是打开的,5秒抓一次后端数据,如果有新的,就调用阿里云的语音接口,把文字传过去它返回mp3文件的BASE64,再返回前端播放. <audi ...
thinkphp5 接入百度语音合成接口，前台播报功能实例
版本:thinkphp5 功能:语音播报功能描述:前台实现点击播报网页内容的功能实例. 范围:php原生及其他框架均可使用 1.下载百度php-sdk 版本:1.6.0 点此下载:http://ww ...
php加入语音播报功能_PHP实现语音播报功能
大家估计都知道现在很多AI音响能够给你播报天气,叫你起床...甚至能够接受语音指令!所谓的人工智能音响,听起来很高大上,都说PHP是最好的编程语言,今天我就带大家来实现一个语音播报功能!先大体说一个思 ...
APP收款语音播报功能讲解
一.背景比起主动扫码能确定收款多少与是否到账,扫二维码支付场景不能直接确认,需要核对客户付款截屏,目前微信.支付宝在扫二维码支付后,均支持收款方自动播报收款到账信息,为了秦丝APP有更好体验,也需要 ...
实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
[html] 你最喜欢H5的哪些功能？为什么？
[html] 你最喜欢H5的哪些功能?为什么? 我最喜欢H5中包含的地理定位功能,通过调用geolocation api,用户允许定位后即可获取客户端wgs84坐标信息:相比于某些服务商如IP Geo ...
iOS 后台语音播报功能开发过程中的那些坑
上个版本的开发计划中产品同学建议在我们的商家版App中做后台语音播报功能,在评审的时候我就在想,完全可以通过Push静默推送来实现后台播放音频来实现(后续事实证明,这是个大坑). 关于静默推送 ...
前端实现语音播报功能
近期接到需求,内容页中的文字要实现语音播报功能,语音生成已经存入数据库 var myAudio = new Audio(); //arr 中存放的是音频数据,数组的大小是不确定的 var arr = ...

H5 语音合成播报功能

语法介绍

浏览器兼容性

H5 语音合成播报功能相关推荐

最新文章

热门文章