前端实现语音播报功能

近期接到需求,内容页中的文字要实现语音播报功能,语音生成已经存入数据库

var myAudio = new Audio();
//arr 中存放的是音频数据,数组的大小是不确定的
var arr = ['xxx.wav','xxx.wav','xxx.wav']
// 记录播放音频数组位置
var i = 0;
// 音频对象预加载
myAudio.preload = true;
// 控制按钮不显示
myAudio.controls = false;
// 取消自动播放(自制按钮实现)
myAudio.autoplay = false;
// 将第一个音频放入对象
myAudio.src = arr[i];
$(document).on('click', '.value', function () {if (myAudio.paused) {myAudio.play();// 播放$('.fa-volume-up').attr('style', 'color: #FF5151')myAudio.loop = false;//禁止循环，否则无法触发ended事件 // 给对象添加播放结束监听,结束后触发playEndedHandler()myAudio.addEventListener('ended', playEndedHandler, false);} else {myAudio.pause()$('.fa-volume-up').attr('style', '')}})
function playEndedHandler() {// 音频结束向下一个移动i++;if (i + 1 > arr.length) {// 当数组中的音频全部结束后取消监听        myAudio.removeEventListener('ended',playEndedHandler, false);// 将音频对象中的播放地址置为第一个i = 0;myAudio.src = arr[i]$('.fa-volume-up').attr('style', '')return true} myAudio.src = arr[i]if (myAudio.paused) {myAudio.play();// 播放} else {myAudio.pause()}
}

3.总结

代码是不是有些绕,其实代码中用到了递归思想,还记得递归条件吗?
1.起始条件:点击事件
2.终止条件:当全部的音频播放结束(注意是播放结束)
3.自身调用条件:一条音频播放结束
在回头看一遍就会豁然开朗

前端实现语音播报功能相关推荐

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

前端实现语音播报功能

前端实现语音播报功能相关推荐

最新文章

热门文章