Node-REDのダッシュボードで効果音ポン出し画面をつくってみた

はじめに

オンラインイベントやライブ配信で盛り上げる効果音を鳴らせるポン出し画面をNode-REDダッシュボードでつくってみました。

効果音ラボ

Node-REDフロー

ダッシュボード機能を利用するために「メニュー」→「パレットの管理」からnode-red-dashboardを追加します。

「button」、「http request」「audio out」ノードをつなげます。
「inject」ノードはフロー画面で動作を確認するために使用します。

「button」ノードのプロパティ

ダッシュボードで表示するGroup、ボタン表示名のLabelを設定して、「inject」ノードで動作を確認するためのチェックボックスにチェックを入れます。

「http request」ノードのプロパティ

効果音を取得するURLを設定して、SSL/TLS接続を有効化にチェックを入れます。

"Error: certificate has expired"のエラーが表示される場合は「TLS設定」→「サーバ証明書を確認」のチェックを外します。

「audio out」ノードのプロパティ

ダッシュボードで表示するGroupを設定します。

サンプルフロー

20220102_flows_pon_dashi.json

[{"id":"74bbddb0.4f63d4","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"517328ef.07aba8","type":"ui_audio","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","voice":"","always":"","x":740,"y":360,"wires":[]},{"id":"7e588bbc.7d28b4","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":140,"wires":[["502cd6e0.cad208"]]},{"id":"502cd6e0.cad208","type":"file in","z":"74bbddb0.4f63d4","name":"","filename":"/tmp/1.mp3","format":"","chunk":false,"sendError":false,"encoding":"none","x":430,"y":140,"wires":[["24414bb1.0dafe4"]]},{"id":"5a15a178.cbd46","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"歓声と拍手1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":310,"y":480,"wires":[["cb1fc432.606b18"]]},{"id":"7a27d8c1.8a08d8","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":200,"wires":[["84ab806b.1ec51"]]},{"id":"84ab806b.1ec51","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"http://kitazaki.ddns.net/audio/1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":430,"y":200,"wires":[["24414bb1.0dafe4"]]},{"id":"aa29ab6a.4c5458","type":"comment","z":"74bbddb0.4f63d4","name":"効果音ラボ・ポン出し画面","info":"","x":130,"y":300,"wires":[]},{"id":"b7ca9b7c.f55018","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":1,"width":0,"height":0,"passthru":true,"label":"和太鼓でドン","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":320,"y":360,"wires":[["59d25e2d.72095"]]},{"id":"4cc7ea6a.f97494","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":360,"wires":[["b7ca9b7c.f55018"]]},{"id":"59d25e2d.72095","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/drum-japanese1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":360,"wires":[["517328ef.07aba8"]]},{"id":"24414bb1.0dafe4","type":"debug","z":"74bbddb0.4f63d4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":200,"wires":[]},{"id":"e6295f04.45d2f","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":1,"width":0,"height":0,"passthru":true,"label":"和太鼓でドドン","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":320,"y":400,"wires":[["c9bd149c.d74d08"]]},{"id":"61c48d60.b14bd4","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":400,"wires":[["e6295f04.45d2f"]]},{"id":"c9bd149c.d74d08","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/drum-japanese2.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":400,"wires":[["517328ef.07aba8"]]},{"id":"a024c83b.cbf628","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":440,"wires":[["5b5f8079.ca58b"]]},{"id":"aecd3f8d.ca64","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/tin1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":440,"wires":[["517328ef.07aba8"]]},{"id":"5b5f8079.ca58b","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":1,"width":0,"height":0,"passthru":true,"label":"チーン","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":290,"y":440,"wires":[["aecd3f8d.ca64"]]},{"id":"cb1fc432.606b18","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/voice/mp3/people/people-performance-cheer1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":480,"wires":[["517328ef.07aba8"]]},{"id":"8dca183f.0000d8","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":480,"wires":[["5a15a178.cbd46"]]},{"id":"5708c45a.f8594c","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"ドンドンパフパフ","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":520,"wires":[["43f592a1.956f8c"]]},{"id":"43f592a1.956f8c","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/dondonpafupafu1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":520,"wires":[["517328ef.07aba8"]]},{"id":"20818869.d92868","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":520,"wires":[["5708c45a.f8594c"]]},{"id":"2ee0e29b.fab2de","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"ツッコミを入れる","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":560,"wires":[["56e05eb1.ab869"]]},{"id":"56e05eb1.ab869","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/feed1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":560,"wires":[["517328ef.07aba8"]]},{"id":"3af6fe86.b20672","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":560,"wires":[["2ee0e29b.fab2de"]]},{"id":"5e320864.eb0a98","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"みんなで大笑い1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":600,"wires":[["5673c066.17962"]]},{"id":"5673c066.17962","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/voice/mp3/people/people-studio-laugh-large1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":600,"wires":[["517328ef.07aba8"]]},{"id":"cdb8238c.26275","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":600,"wires":[["5e320864.eb0a98"]]},{"id":"1cbb0f0f.c48751","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"自主規制ピー音","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":320,"y":640,"wires":[["175c6b8d.a702a4"]]},{"id":"175c6b8d.a702a4","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/self-regulation1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":640,"wires":[["517328ef.07aba8"]]},{"id":"d2d5bfb2.92e7c","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":640,"wires":[["1cbb0f0f.c48751"]]},{"id":"e8c70e23.df569","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"クイズ出題1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":310,"y":680,"wires":[["57f4212a.3326c"]]},{"id":"57f4212a.3326c","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/question1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":680,"wires":[["517328ef.07aba8"]]},{"id":"ff5b1680.d170e8","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":680,"wires":[["e8c70e23.df569"]]},{"id":"33eb7dc3.f66442","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"クイズ正解1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":310,"y":720,"wires":[["c57392c8.1e355"]]},{"id":"c57392c8.1e355","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/correct1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":720,"wires":[["517328ef.07aba8"]]},{"id":"15d90bc7.6d6664","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":720,"wires":[["33eb7dc3.f66442"]]},{"id":"dd52298e.71ef68","type":"ui_button","z":"74bbddb0.4f63d4","name":"","group":"284776a6.b5dbea","order":2,"width":0,"height":0,"passthru":true,"label":"クイズ不正解1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":320,"y":760,"wires":[["e875ca75.2d9448"]]},{"id":"e875ca75.2d9448","type":"http request","z":"74bbddb0.4f63d4","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"https://soundeffect-lab.info/sound/anime/mp3/incorrect1.mp3","tls":"a414b47e.2a1c58","persist":false,"proxy":"","authType":"","x":530,"y":760,"wires":[["517328ef.07aba8"]]},{"id":"8d7c3171.2a141","type":"inject","z":"74bbddb0.4f63d4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":760,"wires":[["dd52298e.71ef68"]]},{"id":"284776a6.b5dbea","type":"ui_group","z":"","name":"ポン出し","tab":"6ad2798.0b8f188","order":1,"disp":true,"width":"6","collapse":false},{"id":"a414b47e.2a1c58","type":"tls-config","z":"","name":"","cert":"","key":"","ca":"","certname":"","keyname":"","caname":"","servername":"","verifyservercert":false},{"id":"6ad2798.0b8f188","type":"ui_tab","z":"","name":"効果音ラボ","icon":"dashboard","disabled":false,"hidden":false}]

GitHubにもフローを公開しています。

Node-REDダッシュボード

macOSのChrome、Safari、Firefoxで正常動作を確認しています。

2022/4/20 追記

macOSのSafari(バージョン15.4 (16613.1.17.1.13, 16613))では音声を自動再生する場合、Safariメニュー→このWebサイトでの設定から変更(「サウンド付きメディアは再生しない」→「すべてのメディアを自動再生」)が必要です。

iPhone(iOS) / iPad(iPadOS)のSafariでは音声の自動再生は不可です。