Voice record via dashboard

Hi to you all,
Im pretty new in this forun and also on node red.

Has part of my final high school project i need to record audio (via user mic) from the dashboard and play it through the raspberry pi speakers.

  1. I have searched the web alots of times but i didnt found the answer.
  2. I dont use the Microphone UI node becouse its doesnt integrated with my other Dashboard Nodes. (When i put this node in the editor, i cannot see any other UI nodes in the dashboard.
  3. This is flow i am trying to use
    (A dashboard tempmete to implement browser recording to the sox play node):

        "id": "84b603f51c69a255",
        "type": "ui_template",
        "z": "b912939ba17bf70c",
        "g": "e93feab2be728c8c",
        "group": "39e549dfe3be6225",
        "name": "",
        "order": 30,
        "width": 4,
        "height": 1,
        "format": "<div class=\"form-group\">\n    <div id=\"recording\">\n        <button type=\"button\" id=\"record\">\n         <i class=\"material-icons\">mic </i>\n        <button type=\"button\" id=\"stop\">\n         <i class=\"material-icons\">stop</i>\n      </button>\n    </div>\n    <div id=\"processing\">\n    </div>\n</div>\n<script>\nvar recordButton, stopButton, recorder, audio, msg;\nwindow.onload = function() {\n        recorder = new MediaRecorder(stream, options);\n        recordButton = document.getElementById('record');\n        stopButton = document.getElementById('stop');\n        navigator.mediaDevices.getUserMedia({ audio: true })\n        .then(function(stream) {\n        recordButton.addEventListener('click', startRecording);\n        stopButton.addEventListener('click', stopRecording);\n}\nfunction startRecording() {\n    recorder.addEventListener('dataavailable', onRecordingReady);\n    function() {\n        recordButton.disabled = true;\n        stopButton.disabled = true;\n        $(\"#audioMediaNotAvailable\").show();\n    });\n    //navigator.mediaDevices.getUserMedia({audio: true})\n    recorder.start();\n    }\nfunction stopRecording() {\n    recorder.stop();\n    var audio = document.getElementById('audio');\n    audio = e.data;\n    msg.payload = audio;\n    return msg.payload;\n}\nfunction onRecordingReady(e) {\n    var audio = document.getElementById('audio');\n    audio = e.data;\n    msg.payload = audio;\n    return msg.payload;\n}\n</script>\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 220,
        "y": 2840,
        "wires": [
        "id": "8e47fca2fddfbba8",
        "type": "sox-play",
        "z": "b912939ba17bf70c",
        "g": "e93feab2be728c8c",
        "name": "",
        "outputDevice": "default",
        "manualOutput": "",
        "gain": "0",
        "startNew": "skip",
        "playStream": true,
        "inputEncoding": "signed-integer",
        "inputChannels": 1,
        "inputRate": 16000,
        "inputBits": 16,
        "debugOutput": false,
        "x": 560,
        "y": 2780,
        "wires": [
        "id": "39e549dfe3be6225",
        "type": "ui_group",
        "name": "PetCareSystemUI",
        "tab": "3a10e87df447c6fb",
        "order": 1,
        "disp": true,
        "width": 30,
        "collapse": false
        "id": "3a10e87df447c6fb",
        "type": "ui_tab",
        "name": "PetCareSystem",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
  1. My current setup is:
    Raspberry pi 3b+
    Node red
    Speakers (connected Trough the pl plug)

PLEASE Help me (i need to submit it in 12 o'clock today :frowning: )

Hi @tzionlevy,
I think your best chance is to use that node... So you can start looking at errors in the console log, or other logs.
But I am afraid it will take time to get it up and running. Good luck!

Thanks a lot for the quick respond.
I got an extension for few more days (until Sunday) from my teacher.

can you maybe help me understand why this UI node doesn't "sit" with the rest.. ?

thanks in advance

if i remember correctly if your want to use the ui microphone node from anywhere but local host (so a browser running on the same system as node-red) you will have to enable https for your node-red instance / the dashboard as the browser will not allow access to the microphone for unsecured websites.
And also try what @BartButenaers says and open the browser console to look for errors happening when you open the dashboard.
It would also help if you could tell us more about your set up.
Is the browser running on the same system as node-red? What kind of system is it?



fist of all, thanks for the replay. form both of you!
my setup is an 2 ultrasonic sensor that act as an "water level" sensor that connected to gauges in node red UI.
I also connected an 5kg load cell (with hx711 board) and also connected it to gauges in node red UI
now all that remain is the microphone part...
I don't understand way this UI widget descent line with the gauges and battens and templet...

btw I am secure SSL (https) and I can enable the "microphone UI node" but automatedly its alone, cant see the others (gauges and battens and templet.)

the truth is that there is a lot of "UI node" that "dessert line" with the rest.. :frowning:

Hey @tzionlevy,
Can you show that with a screenshot and some manually drawn arrows on top of it, to explain this. I am not native English speaking, and google translate doesn't help me to explain these sentences...

Do I understand this correctly: your two gauges work fine (i.e. they show the values of the ultrasonic sensors correctly). When you add a template node, then all other UI widgets disappear?

If you say that "a lot of UI nodes" have a problem, then I am wondering whether you are using the official Node-RED dashboard. Because there are some alternative dashboards, but they don't support our UI nodes. The gauges on the other hand are standard widgets, which are part of some other alternative dashboards also.

You should have this one, and ONLY this one installed:


If that is not your problem, then you should start by troubleshooting:

  • Errors in the browser console log, or in your Node-RED log?
  • Do a right click in your browser on your dashboard and choose "inspect" to open the developer tools of your browser. Then you need to start looking why the md-card element of your microphone ui widget is invisible.

BTW what I don't understand: your teacher gives you one week extra, and then you respond to @JGKK (who is trying to help you) only after a few days. Unless you really like heavy adrenaline shots, I would suggest that you take another approach next time :wink:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.