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

番薯交流 发表于 2020-12-10 16:03

关注主题

 
楼主
luojian0323 Lv7 关注ta
帆软社群问答顾问； 入选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) + "条消息,请注意查收."
复制代码


        接下来，只需配上一段代码，就可以实现我们想要的循环播报效果，在模板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);//稍微延时一下，附上代码抛错。
复制代码

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

下面我们就在原来 的基础上实现它:
更改上述代码:
  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);//稍微延时一下，附上代码抛错。
复制代码
   更改代码后效果:



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

   同样在报表单元格中模拟一下数据,在A1单元格中添加公式:
  1. "您有" + RANDBETWEEN(1, 10) + "条消息,请注意查收."
复制代码
然后在B1单元格中添加一个按钮，按钮名称定义为:暂停
  此时对这个按钮，添加两个事件,  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代码，此时用填报预览，预览一下效果(填报预览在单元格中才能使用按钮控件),发现页面加载后，声音就开始播报了。点击一个按钮试一下：:

   发现按钮的名字变了。页面标签上的小喇叭 也不见了。此时页面停止播报。再次点击按钮后，发现页面又开始继续播报了。

  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. }

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

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

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

  44.             }, 5000);
  45.         }, 500);
复制代码


     预览后效果:
场景二:大屏数据图表中，数据动态刷新，当图表中的数据，达到预定值时，立即播放语音提醒。(适用于生产数据监控，车间设备监控等)我们在决策报表中添加一个绝对画布块，然后 新建一个报表块，在A1单元格中模拟一个随机数据:
  1. RANDBETWEEN(110,999)
复制代码

   接下来，添加一个180度仪表盘,数据来源指定报表块中的数据：

   并对仪表盘设置一个区间颜色:

  对图表添加一个初始化后事件:
  1. var form = this.options.form;
  2. var mm=800//设定预警值,此处也可通过参数传递预警值。
  3. var $alramDiv;

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

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

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


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



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



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

查看全部评分

沙发
twshe Lv6 关注ta
发表于 2020-12-10 16:40:41
挺好的！

赞 举报

板凳
晓亮 Lv7 关注ta
发表于 2020-12-18 09:00:55
66666

赞 举报

地板
changcheng@ Lv6 关注ta
发表于 2020-12-18 09:13:37
大屏全屏显示后能实现语音报警么

赞 举报

5楼
星痕番薯互助团队 文档共创团队 Lv6 关注ta
发表于 2020-12-18 09:16:05

赞 举报

6楼
枫城 Lv7 关注ta
发表于 2020-12-18 09:28:51
马一个

赞 举报

7楼
大猫吖 Lv7 关注ta
发表于 2020-12-18 11:39:20
感觉短视频也快了~~

赞 举报

8楼
husky Lv6 关注ta
发表于 2020-12-18 16:30:16
这都啥神仙帖子

赞1 举报

9楼
葛智番薯互助团队 文档共创团队 Lv6 关注ta
发表于 2020-12-20 11:07:42
牛牛牛牛牛牛牛牛牛牛牛牛

赞 举报

10楼
冥王星 Lv7 关注ta
发表于 2020-12-21 08:08:51

赞 举报

11楼
Cc. Lv4 关注ta
发表于 2020-12-21 10:44:33

赞 举报

12楼
葛智番薯互助团队 文档共创团队 Lv6 关注ta
发表于 2020-12-22 09:01:54
移动端可以吗？谁测试了？

赞 举报

13楼
radioliu Lv5 关注ta
发表于 2021-1-26 15:04:01
我的为啥没效果?

赞 举报

14楼
shulato Lv8 关注ta
发表于 2021-1-27 10:37:37

感谢分享

赞 举报

15楼
JackRen Lv6 关注ta
发表于 2021-1-27 15:17:31
牛牛牛

赞 举报

16楼
promiseykl1988 Lv7 关注ta
发表于 2021-4-15 13:05:45
有时候不能自动播放什么情况 编辑于 2021-4-15 13:07  

赞 举报

17楼
让过去 Lv6 关注ta
发表于 2021-7-13 14:10:58
感谢大佬的贴子，原来第一种方法的JS对决策报表也适用，大佬可以去我问答最近的一个问题贴一下链接吗，我补一下

赞 举报

18楼
dingzw Lv3 关注ta
发表于 2021-8-18 00:38:23 发布于APP客户端
牛啊……

赞 举报

19楼
用户3aCDb8859785 Lv5 关注ta
发表于 2022-1-13 09:27:26
为什么第一个 我测试使用打开分页预览 没有听到声音啊

赞 举报

20楼
luojian0323 Lv7 关注ta
发表于 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>

赞1 举报

21楼
FR学习路上的树懒 Lv4 关注ta
发表于 2022-2-15 15:03:11
顶一个！！！！，只是目前谷歌浏览器最新版，都禁用语音自动播放

赞 举报

22楼
用户kWEye3931 Lv5 关注ta
发表于 2022-2-21 11:00:19
有模板吗大佬

赞 举报

23楼
土番薯 Lv5 关注ta
发表于 2024-1-19 15:48:49
不能用

赞 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

33回帖数 27关注人数 29307浏览人数
最后回复于：2024-4-7 10:00

任务进行中

    话题进行中...
    隐私政策
    帆软用户服务协议
    联系管理员
    联系帆软
    Copyright© 帆软软件有限公司 版权所有
    苏ICP备18065767号
    返回顶部 返回列表