` or `

` and tag it with a class to turn the container into a grid (or, of course, create your own custom grid style class) > [@MyRandomThoughts](#): > > This is one of them, sized for mobile usage, it's a music controller. That isn't especially complex and is perfect for a grid styled container. I would provide an example but unfortunatley,, I'm recovering from operations on both eyes just now. If you prompt me again in a couple of weeks, I will knock something up to help if you like. > [@ChZeman](#): > > My only challenge now is figuring out how to play audio. I've been doing a lot of searching but coming up empty-handed. > **[: The Embed Audio element - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio)** > > The HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the element: the browser will choose the most suitable one. > It can also be the destination for streamed... If using UIBUILDER, you can use the `uib-tag` node to help build that from Node-RED if you don't want to write any HTML directly. However, I would generally recommend that you simply write the HTML if it is static, the zero-code UIBUILDER nodes (rather like D1/D2) are great to quickly get going but eventually, you will generally find yourself simply wanting the simple code anyway (the big difference between uibuilder and D1/D2 is that its zero-code nodes result in actual native HTML which you can save into your static `index.html` file for ongoing amendments and best performance). You can choose whether to send the audio as data from Node-RED to a uibuilder front-end (though take note of message sizes if your audio is long) or simply use the `uib-save` node to save an audio file from node-red to a static file that the front end can use. > [@ChZeman](#): > > I used a read file node to read "alarm.wav" and sent it to an "audio out" D1 node while the error message text was sent to [elevenlabs.io](http://elevenlabs.io). The file returned by [elevenlabs.io](http://elevenlabs.io) was then read using another read file node and sent to the audio out node. The audio out node was the only D1-dependent part of the flow. It worked well. I just need to figure out how to control an audio element in uibuilder. To translate that to uibuilder, you simply need to use the `uib-save` node to output the TTS file if it is too large to be sent as a message. THe standard alarm.wav should simply be put into the same folder as your index.html file (uib-save simply makes it easier to know where the folder is - there is nothing special other than that). Triggering the play automatically generally requires that the user has taken some kind of action on the page - check out the link that I shared, it should have the details. I think I shared an example using video a long time ago - it is basically the same as audio. ---

**Author:** ![ChZeman](https://avatars.discourse-cdn.com/v4/letter/c/76d3ee/32.png) [@ChZeman](https://discourse.nodered.org/u/ChZeman)\ **Post date:** [25 October 2025 19:37 UTC](https://discourse.nodered.org/t/reproducing-a-d1-dashboard-using-uibuilder/99408/22 "2025-10-25T19:37:10Z")

I actually got the audio issue figured out shortly after I posted that, thanks to an AI summary during a [google search](https://www.google.com/search?client=firefox-b-1-d&q=uibuilder+node+red+Audio()&udm=50&fbs=AIIjpHxU7SXXniUZfeShr2fp4giZud1z6kQpMfoEdCJxnpm_3WBcADgXS0kQ7L92bqYkFCGs4piG0mmPDgZFV1TtUMvZh4b_hOslSO4BbJRk_Rm0e5nkOROTp-nvSsweko3de40ZvCbPf7ZhPfiXAADLufz7zIgFO1D2S8ntKfFlzOqCXF8hEU_ysGpw5LuBfi40A0ywRhjA05aD4GPvJ6DmkPcsOg1pQQ&ved=2ahUKEwiE5I6M4r-QAxUOv4kEHakSJSEQ0NsOegQIJhAA&aep=10&ntc=1&mstk=AUtExfBuVZYUPLywbU_tH4x87lt-iBGalP013EOfxSHObfOwYBsLrxtxciq28hPVdld5QH9V8_-NXw-A0-upnphLFHhrCfBDRzzXMNTeLmh46Uj6evB3my7hR7ICBVGNhTUb4vpr1wK8GbYad6oBPcF_SZ1LxQFElxetwmRp2RKcZrPulbBNDtRKuVqp7-wVKVzHOmP5uQ7-EBIieQy04-IIgsOiCAuSe_MxEQGAJJYJ_1uIboCgmlyl4dibPA&csuir=1). 😀 I just didn't have a chance to post the solution yet. I switched to the Vue3 template and then added... ```auto

``` ...to index.html. I then added... ```auto // Listen for incoming messages from the Node-RED server uibuilder.onChange('msg', function (msg) { // Get a reference to the audio player const audioPlayer = document.getElementById('myAudioPlayer'); // Check if the message has a specific topic and a payload if (msg.topic === 'play' && msg.payload) { // Set the audio source to the URL from the payload audioPlayer.src = msg.payload; // Play the audio audioPlayer.play(); } else if (msg.topic === 'stop') { // Stop and clear the audio source audioPlayer.pause(); audioPlayer.src = ''; } }); ``` ...to index.js. I uploaded Alarm.wav to the src folder (as you indicated) and send... ```auto msg.payload = "Alarm.wav" msg.topic = "play" ``` ...when a downtime occurs. I then send the alarm description to [elevenlabs.io](http://elevenlabs.io) using TTS-Ultimate, configured to save the files in a subdirectory of the src folder, parse the filename from the output and do the same thing I'm doing to play Alarm.wav. It's working really well! I'll experiment tonight with sending the table data as an object instead of an array. Thanks again! ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [24 November 2025 19:37 UTC](https://discourse.nodered.org/t/reproducing-a-d1-dashboard-using-uibuilder/99408/23 "2025-11-24T19:37:54Z")

Closed on 24 November 2025 19:37 UTC This topic was automatically closed 30 days after the last reply. New replies are no longer allowed. [Previous page](https://discourse.nodered.org/t/reproducing-a-d1-dashboard-using-uibuilder/99408.md?page=1)