[语音播放]-开启报表有声模式

帆软社群问答顾问; 入选2022年帆软产品致谢名单;
      最近偶见论坛有番薯们 发需求说想要实现的报表的语音播报功能。我仔细看一了一下,发现帮助文档里确实有类似文档,一个是通过条件属性中的新值,添加语音播放。
(https://help.fanruan.com/finereport/doc-view-1982.html)
一个是在查询数据后,播放报警提示音
(https://help.fanruan.com/finereport/doc-view-1982.html)
     受此启发。我联想到有时候报表需求,需要播报一些内容,这些内容可能除了数字以外,还有其他信息,比如需要一段文字+数字的语音提示。
还有一种语音播报的需求,就是运用在图表中,当图表数据是动态刷新的,并且达到预警值时,希望立即播报预警声音,以达到及时提醒的效果。
接下来我们就来看看第一情况实现方法.
场景一:报表伴随文字+数字的语音播报(例如业绩播报,事件处理播报,消息提醒等)
         1. 1假设现在有一个需求,需要提醒目前有几条消息待处理,普通的数字,并不能达到有效提醒效果。但是语音循环播报能有效实现。
为了模拟数据,我们可以在报表中用公式创建随机整数,加上文字。
  1. "您有" + RANDBETWEEN(1, 10) + "条消息,请注意查收."
复制代码


截图202012101516556891.png         接下来,只需配上一段代码,就可以实现我们想要的循环播报效果,在模板web属性中的分页预览设置中,添加加载结束事件:
  1. function playAudio(text) {
  2.     const url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&text=" + encodeURI(text);//lan=zh:语言是中文,如果改为lan=en,则语言是英文,ie=UTF-8:文字格式,spd=2:语速,可以是1-9的数字,数字越大,语速越快,text=**:这个就是你要转换的文字。
  3.     const audio = new Audio(url);
  4.     audio.src = url;
  5.     audio.play();
  6.     return audio;
  7. }
  8. setTimeout(function() {
  9.             setInterval(function() {
  10.                 var wb=FR.remoteEvaluate('=A1')//数据在哪个单元格,就指定哪个单元格
  11.                     playAudio(wb)
  12.                  
  13.             }, 8000);//8秒循环播报一次,时间可以自己改.
  14. }, 100);//稍微延时一下,附上代码抛错。
复制代码

预览报表,当看到页面标签上有小喇叭时,代表语音开始播报了。
截图202012101523029889.png     1.2[自动播报进阶版]:对上述的提醒 觉得还不够,我们可能会遇到这样的情况,就是当浏览器上的页面标签闪动的情况下,我们常常会不自觉的优先点击一下,或者刷新一下页面。这就是提醒 的效果。 页面标签提醒.gif

下面我们就在原来 的基础上实现它:
更改上述代码:
  1. function playAudio(text) {
  2.     const url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&text=" + encodeURI(text);//lan=zh:语言是中文,如果改为lan=en,则语言是英文,ie=UTF-8:文字格式,spd=2:语速,可以是1-9的数字,数字越大,语速越快,text=**:这个就是你要转换的文字。
  3.     const audio = new Audio(url);
  4.     audio.src = url;
  5.     audio.play();
  6.     return audio;
  7. }
  8. var timer;
  9. var title=document.head.getElementsByTagName("title")[0].innerHTML
  10. setTimeout(function() {
  11.             setInterval(function() {
  12.                 var wb=FR.remoteEvaluate('=A1')//数据在哪个单元格,就指定哪个单元格
  13.                     playAudio(wb)
  14.              function tixing(timer){//定义页面标签提醒函数
  15.             var index = 0;
  16.             clearInterval(timer);
  17.             timer = setInterval(function() {
  18.                 if(index%2) {
  19.                     document.head.getElementsByTagName("title")[0].innerHTML = '【   】'+ title;
  20.                 }else {
  21.                     document.head.getElementsByTagName("title")[0].innerHTML = '【'+wb+'】'+ title;
  22.                 }
  23.                 index++;
  24.                 if(index > 20) {
  25.                     clearInterval(timer);
  26.                 }
  27.             }, 500);
  28.         }
  29.         tixing (timer);    //执行页面提醒
  30.             }, 8000);//8秒循环播报一次,时间可以自己改.
  31. }, 100);//稍微延时一下,附上代码抛错。
复制代码
   更改代码后效果:
自动播报页面标签提醒.gif


1.3 [手动播报]:上述只是实现了语音播报的第一步,其实你会发现,上面的代码,语音会一直播报,如果在不关闭页面的情况下,想取消语音播报,或暂停一会再播报怎么办呢?,接下来,就来实现它:

   同样在报表单元格中模拟一下数据,在A1单元格中添加公式:
  1. "您有" + RANDBETWEEN(1, 10) + "条消息,请注意查收."
复制代码
然后在B1单元格中添加一个按钮,按钮名称定义为:暂停 截图202012101534178668.png
  此时对这个按钮,添加两个事件,  1.初始化后事件:
  1. function playAudio(text) {
  2.     const url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&text=" + encodeURI(text);//lan=zh:语言是中文,如果改为lan=en,则语言是英文,ie=UTF-8:文字格式,spd=2:语速,可以是1-9的数字,数字越大,语速越快,text=**:这个就是你要转换的文字。
  3.     const audio = new Audio(url);
  4.     audio.src = url;
  5.     audio.play();
  6.     return audio;
  7. }
  8. setTimeout(function() {
  9.             setInterval(function() {
  10.                 var wb=FR.remoteEvaluate('=A1')
  11.                 var bf=contentPane.getWidgetByCell(FR.columnRow2CellStr({
  12.         col:1,//按钮在第二列,这里数值为1
  13.      row:0//按钮在第一行,这里数值为0
  14.                 }))
  15.                 var bf1=bf.getText()
  16.                 if(bf1=='暂停'){
  17.                     playAudio(wb)
  18.                     }
  19.                     else{ }
  20.             }, 5000);
  21.         }, 500);
复制代码

    2.按钮点击事件:
  1. if (this.getText() == "播放") {
  2.         this.setText("暂停")
  3.         }
  4. else if (this.getText() == "暂停") {
  5.         this.setText("播放")
  6.         }
复制代码
   模板web属性不再需要任何js代码,此时用填报预览,预览一下效果(填报预览在单元格中才能使用按钮控件),发现页面加载后,声音就开始播报了。点击一个按钮试一下::
截图202012101538118556.png
   发现按钮的名字变了。页面标签上的小喇叭 也不见了。此时页面停止播报。再次点击按钮后,发现页面又开始继续播报了。
截图202012101539216659.png
  1.4 [手动播报进阶版]:上述代码同样可以添加页面标签闪烁提醒,修改原代码如下:
  1. function playAudio(text) {
  2.     const url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&text=" + encodeURI(text);//lan=zh:语言是中文,如果改为lan=en,则语言是英文,ie=UTF-8:文字格式,spd=2:语速,可以是1-9的数字,数字越大,语速越快,text=**:这个就是你要转换的文字。
  3.     const audio = new Audio(url);
  4.     audio.src = url;
  5.     audio.play();
  6.     return audio;
  7. }

  8. var timer;
  9. var title=document.head.getElementsByTagName("title")[0].innerHTML
  10. setTimeout(function() {
  11.             setInterval(function() {
  12.                 var wb=FR.remoteEvaluate('=A1')
  13.                 var bf=contentPane.getWidgetByCell(FR.columnRow2CellStr({
  14.         col:1,//按钮在第二列,这里数值为1
  15.      row:0//按钮在第一行,这里数值为0
  16.                 }))
  17.                 var bf1=bf.getText()
  18.                 if(bf1=='暂停'){
  19.                     playAudio(wb)

  20.             function tixing(timer){//定义页面标签提醒函数
  21.             var index = 0;
  22.             clearInterval(timer);
  23.             timer = setInterval(function() {
  24.                 if(index%2) {
  25.                     document.head.getElementsByTagName("title")[0].innerHTML = '【   】'+ title;
  26.                 }else {
  27.                     document.head.getElementsByTagName("title")[0].innerHTML = '【'+wb+'】'+ title;
  28.                 }
  29.                 index++;
  30.                 if(index > 20) {
  31.                     clearInterval(timer);
  32.                 }
  33.             }, 500);
  34.         }
  35.         tixing (timer);//执行页面标签提醒

  36.                     }
  37.                     else{
  38.                          document.head.getElementsByTagName("title")[0].innerHTML = title;//还原页面标题
  39.                     }

  40.             }, 5000);
  41.         }, 500);
复制代码


     预览后效果: 手动播报页面标签提醒.gif
场景二:大屏数据图表中,数据动态刷新,当图表中的数据,达到预定值时,立即播放语音提醒。(适用于生产数据监控,车间设备监控等)我们在决策报表中添加一个绝对画布块,然后 新建一个报表块,在A1单元格中模拟一个随机数据:
  1. RANDBETWEEN(110,999)
复制代码
截图202012101545521623.png
   接下来,添加一个180度仪表盘,数据来源指定报表块中的数据:
截图202012101548337823.png
   并对仪表盘设置一个区间颜色:
截图202012101550266473.png
  对图表添加一个初始化后事件:
  1. var form = this.options.form;
  2. var mm=800//设定预警值,此处也可通过参数传递预警值。
  3. var $alramDiv;

  4. setInterval(function() {
  5. form.getWidgetByName("report0").gotoPage(1,"{}",true);//刷新报表块

  6. var num=FR.remoteEvaluate("=report0~A1");//监测值,并读取

  7. //判断报警提示alarmDiv是否存在,如果不存在,则初始化
  8. if($("#alarmDiv").length>0){
  9.     $alramDiv=$("#alarmDiv");
  10. } else{
  11.     $alramDiv=$('<div id="alarmDiv"></div>').appendTo($(document.body));
  12. }
  13. //清空报警对象,防止多次刷新后造成多次播放
  14. $alramDiv.empty();


  15. if(num>=mm){
  16.      
  17.    if(FR.Browser.isIE()){//如果是IE浏览器,执行下面这句
  18.         //loop="-1"表示声音无限循环,可以指定数字来控制循环次数
  19.         $('<bgsound src="../../scripts/dududu.mp3" loop="1">').appendTo($alramDiv);
  20.     } else {//如果不是IE浏览器,执行下面这句
  21.         //loop="true"表示声音无限循环,去掉则播放一次
  22.         $('<audio src="../../scripts/dududu.mp3" type="audio/mp3" hidden="true" autoplay="true">' ).appendTo($alramDiv);
  23.     }
  24.    
  25.     }
  26.    
  27. }, 5000);
复制代码
  此时可以对报表块,设置不可见: 截图202012101553524371.png
   预览后效果:
    (未达到预警)
截图202012101554516982.png
    (达到预警)
截图202012101555512924.png


预警声音文件放在 webapps\webroot\scripts 目录下



编辑于 2020-12-10 17:58  
参与人数 +2 F豆 +350 理由
FR学习路上的树懒 + 150
让过去 + 200 太棒了,给你32个赞,么么哒

查看全部评分

发表于 2020-12-10 16:40:41
挺好的!
发表于 2020-12-18 09:00:55
66666
发表于 2020-12-18 09:13:37
大屏全屏显示后能实现语音报警么
发表于 2020-12-18 09:16:05
发表于 2020-12-18 09:28:51
马一个
发表于 2020-12-18 11:39:20
感觉短视频也快了~~
发表于 2020-12-18 16:30:16
这都啥神仙帖子
发表于 2020-12-20 11:07:42
牛牛牛牛牛牛牛牛牛牛牛牛
发表于 2020-12-21 08:08:51
发表于 2020-12-21 10:44:33
发表于 2020-12-22 09:01:54
移动端可以吗?谁测试了?
发表于 2021-1-26 15:04:01
我的为啥没效果?
发表于 2021-1-27 10:37:37

感谢分享
发表于 2021-1-27 15:17:31
牛牛牛
发表于 2021-4-15 13:05:45
有时候不能自动播放什么情况 编辑于 2021-4-15 13:07  
发表于 2021-7-13 14:10:58
感谢大佬的贴子,原来第一种方法的JS对决策报表也适用,大佬可以去我问答最近的一个问题贴一下链接吗,我补一下
发表于 2021-8-18 00:38:23 发布于APP客户端
牛啊……
发表于 2022-1-13 09:27:26
为什么第一个 我测试使用打开分页预览 没有听到声音啊
发表于 2022-1-13 12:11:18
<p>看了一下目前可用的免费的文字朗读的代码就是这个: function test(){ let text="语音合成器"; if(window.speechSynthesis){ const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance(); msg.text = text; // 文字内容 msg.lang = "zh-CN"; // 使用的语言:中文 msg.volume = 100; // 声音音量:1 msg.rate = 0.75; // 语速:1 msg.pitch = 10; // 音高:1 //synth.speak(msg); // 这个播放是重复播放 speechSynthesis.speak(msg)//这个是不重复播放 } } test() 其他如百度AI,华为云 基本都收费。不过华为可免费使用一年。 https://www.huaweicloud.com/product/tts.html?utm_source=baidu-ei&amp;utm_medium=se-cpc-op&amp;utm_campaign=EI-语音交互&amp;utm_content=语音交互&amp;utm_term=语音合成#section-4&amp;utm_adplace=AdPlace050081&amp;bd_vid=7963543067526112153</p>
发表于 2022-2-15 15:03:11
顶一个!!!!,只是目前谷歌浏览器最新版,都禁用语音自动播放
发表于 2022-2-21 11:00:19
有模板吗大佬
发表于 2024-1-19 15:48:49
不能用
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

33回帖数 27关注人数 28534浏览人数
最后回复于:2024-1-19 15:51

返回顶部 返回列表