在node-red中实现音频播放动态文本，及轮询循环显示Tab

背景

作为一名研究Node-RED的博主，经常会有读者留言向我询问一些问题的解决方案。
本篇文章就谈一谈最近遇到的两个问题，比较典型。拿出来分析一下，大家可以学习学习。
一共有二个问题：
1：在node-red中如何实现调用系统音频播放动态文本？
2：如何实现dashboard中的3个tab循环显示？

问题描述

第一个问题是要使用调用系统的音频硬件来播放动态内容，这种场景很常见，比如检测到一个设备的温度过高，在Node-RED接收到设备的告警后，会播放设备的报警音频。比如“设备A温度过高，请及时处理。”
通过音频播放来传递信息，要比一直盯着电脑屏幕来的实在。
这个问题如果是音频文件的话倒不难解决，在html中我们使用audio来播放音频，只要你的电脑有播放设备，就能发出声音。
但这里说的是要播放一段文本。一个字符串或数字变量。这就需要查一下资料啦。

第二个问题，我们在使用dashboard制作大屏显示时。有时会涉及多个Tab用来内容的分类显示，且页面同一时间只能显示一个Tab。这就需要一种循环显示每个Tab的机制，来让观光查看的用户获取完整信息。 比如每隔5秒钟，就切换到下一个Tab页。该问题比较难的是，在node-red中无法控制tab的切换，dashboard节点没有暴露出相关的配置，告诉我们当前显示的是那个tab，如何跳转到某个具体的tab。

如下图 一个dashboard中存在多个Tab。

实现思路

第一个问题，需要使用的是JavaScript API是
speechSynthesis与SpeechSynthesisUtterance

网页语音API的SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

创建合成声音需要SpeechSynthesisUtterance这个对象。
利用它你可以创建一个合成的声音，可以使用变量来控制合成剩余的速度，语言，音量等属性。
下面是一个非常简单的示例

const synth = window.speechSynthesis
const u = new SpeechSynthesisUtterance()
u.lang = 'zh-CN'
u.rate = 1
u.text = '桂花香'
synth.speak(u)

这就是第一个问题的答案，如果要播放动态内容的话，内容是从哪个上游传递下来的，我们可以使用template监听上游的msg，在回调函数中播放动态内容。
如下

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      const synth = window.speechSynthesis
      const u = new SpeechSynthesisUtterance()
      u.lang = 'zh-CN'
      u.rate = 1
      u.text = 'msg.payload'
      synth.speak(u)
    }
  });
})(scope);
</script>

第二个问题，经过查询资料dashboard确实没有相关资料，但在切换tab时我发现页面的url中有一部分改变了,确切说是hash那部分，随着切换tab而改变。
这意味着我们重定向当前页面，改变url，就能显示我们想要的Tab

在tab中的template节点中我们只需要定时跳转到下一个tab，就能形成一个循环
如下

<script>
  setTimeout(()=> {
      location.href = './#!/1'
  }, 2000)
</script>

完整代码

[{"id":"a3cac8fa89348ff4","type":"tab","label":"流程 1","disabled":false,"info":""},{"id":"ea401302bd11e20a","type":"inject","z":"a3cac8fa89348ff4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":200,"y":120,"wires":[["1ed565c47e882d78","05df5da79857332c","96fef40df595e471"]]},{"id":"1ed565c47e882d78","type":"ui_template","z":"a3cac8fa89348ff4","group":"cbb46b0d06d43956","name":"Tab1","order":2,"width":0,"height":0,"format":"tab1\n<script>\n    (function(scope) {\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n        const synth = window.speechSynthesis\n        const u = new SpeechSynthesisUtterance()\n        u.lang = 'zh-CN'\n        u.rate = 1\n        u.text = 'msg.payload'\n        synth.speak(u)\n        }\n    });\n})(scope);\n    setTimeout(()=> {\n        location.href = './#!/1'\n    }, 2000)\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":120,"wires":[[]]},{"id":"05df5da79857332c","type":"ui_template","z":"a3cac8fa89348ff4","group":"13f004c6b59bc839","name":"Tab2","order":0,"width":0,"height":0,"format":"tab2\n<script>\n    setTimeout(()=> {\n        location.href = './#!/2'\n    }, 2000)\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":220,"wires":[[]]},{"id":"96fef40df595e471","type":"ui_template","z":"a3cac8fa89348ff4","group":"f8c018c8eb60cd75","name":"Tab3","order":1,"width":0,"height":0,"format":"tab3\n<script>\n    setTimeout(()=> {\n        location.href = './#!/0'\n    }, 2000)\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":320,"wires":[[]]},{"id":"cbb46b0d06d43956","type":"ui_group","name":"g1","tab":"d00f486ab56bd2ee","order":1,"disp":true,"width":"6","collapse":false},{"id":"13f004c6b59bc839","type":"ui_group","name":"g2","tab":"84ef8f9a5d83da7d","order":1,"disp":true,"width":"6","collapse":false},{"id":"f8c018c8eb60cd75","type":"ui_group","name":"Default","tab":"d2e2e3a672a99ef1","order":1,"disp":true,"width":"6","collapse":false},{"id":"d00f486ab56bd2ee","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"84ef8f9a5d83da7d","type":"ui_tab","name":"Home2","icon":"dashboard","disabled":false,"hidden":false},{"id":"d2e2e3a672a99ef1","type":"ui_tab","name":"Home3","icon":"dashboard","disabled":false,"hidden":false}]

总结

遇到问题要善于查阅文档，优先查官方文档，官方没有的话，就要好好利用搜索引擎，最后要加上敏锐的观察，了解事物之间的联系，方能达到无惑境界。

相关链接

SpeechSynthesis

SpeechSynthesisUtterance