html5实现百度语音播报功能

总结

记录一下，html5调用百度语音接口实现语音播报功能，简单的完整案例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>百度语音播报</title>
</head>
<body><div><button onclick="VoiceAnnouncements('好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。')">点我播放</button><button id="stop">点我暂停</button><button id="come">暂停后可以点我继续刚才的播放</button></div><script src="/Content/jquery-3.2.1.min.js"></script><script>$(function () {$("#stop").click(function () {tape.pause();//暂停当前音频});$("#come").click(function () {tape.play();//继续播放当前音频});});var tape = null;//声明一个参数方便可以对当前播放的语音进行暂停，继续播放等操作。function VoiceAnnouncements(text) {if (tape != null) {//防止用户多次点击播放语音播放重复，如果当前语音正在播放则再点击播放时会先判断然后暂停当前播放的音频重新播放if (!tape.paused) {tape.pause();}}var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(text);        // baidu文字转语音var audio = new Audio(url);tape = audio;audio.src = url;//Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 报这个错的时候可以加click //audio.click();audio.play();//播放音频};</script>
</body>
</html>

总结

audio的暂停播放相关属性 https://www.runoob.com/jsref/dom-obj-video.html

html5实现百度语音播报功能相关推荐

实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
php加入语音播报功能_PHP实现语音播报功能
大家估计都知道现在很多AI音响能够给你播报天气,叫你起床...甚至能够接受语音指令!所谓的人工智能音响,听起来很高大上,都说PHP是最好的编程语言,今天我就带大家来实现一个语音播报功能!先大体说一个思 ...
一定要了解的小常识：聚合支付有语音播报功能
在大部分商机都是使用聚合支付收款,他们在营业收款时都十分需要语音播报,这样可以让他们的收款效率大大提高,那么聚合支付有语音播报功能吗?该怎么去开通呢? 聚合支付二维码:从一柜多码到一柜一码以往,商家 ...
【App开发】有语音播报功能的摇号软件：演示视频、开发历程
文章目录 1 故事背景 2 开发历程 2.1 技术选用 2.2 语音播报功能 2.3 生成随机数 2.4 前端页面编写 3 演示效果 1 故事背景昨晚网上有人找我制作一个自动随机数摇号并语音播报出来 ...
iOS 后台语音播报功能开发过程中的那些坑
上个版本的开发计划中产品同学建议在我们的商家版App中做后台语音播报功能,在评审的时候我就在想,完全可以通过Push静默推送来实现后台播放音频来实现(后续事实证明,这是个大坑). 关于静默推送 ...
Html5实现的语音搜索功能
细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势,下面就介绍一下如何实现此功能,代码如下: 1 <input type=" ...
前端实现语音播报功能
近期接到需求,内容页中的文字要实现语音播报功能,语音生成已经存入数据库 var myAudio = new Audio(); //arr 中存放的是音频数据,数组的大小是不确定的 var arr = ...
APP收款语音播报功能讲解
一.背景比起主动扫码能确定收款多少与是否到账,扫二维码支付场景不能直接确认,需要核对客户付款截屏,目前微信.支付宝在扫二维码支付后,均支持收款方自动播报收款到账信息,为了秦丝APP有更好体验,也需要 ...
MediaPlayer实现金额的语音播报功能
推荐阅读: SurfaceView+MediaPlayer封装之路 Android学习资源分享合集(1) 最近写了一个金额的语音播报功能,已封装成依赖库到Github,希望对大家有所帮助. Githu ...

html5实现百度语音播报功能

html5实现百度语音播报功能

总结

html5实现百度语音播报功能相关推荐

最新文章

热门文章