# Controlling audio in uibuilder from node-red flow

**URL:** <https://discourse.nodered.org/t/controlling-audio-in-uibuilder-from-node-red-flow/66983>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [26 August 2022 17:50 UTC](https://discourse.nodered.org/t/controlling-audio-in-uibuilder-from-node-red-flow/66983 "2022-08-26T17:50:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MPlauborg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mplauborg/32/66627_2.png) [@MPlauborg](https://discourse.nodered.org/u/MPlauborg)\
**Post date:** [26 August 2022 17:50 UTC](https://discourse.nodered.org/t/controlling-audio-in-uibuilder-from-node-red-flow/66983/1 "2022-08-26T17:50:13Z")

</div>

I am trying to control a mp3 audio on my uibuilder.

I would like to be able to inject various parameter from node-red to uibuilder to control the audio. It should be play, pause, stop and currenttime (go to a specific point in the mp3 file and start playing).

I have spent several days on varieus sites and tested a lot of thinks. The closes thing to solution provided in the Topic: Vue VideoJS in UIBuilder from Totallyinformation. But i cannot get the videojs to accept mp3, and I can get others audio to work.

I have a version working (more or less) but that is based on click on the uibuilder page and not from injects from node-red.Currently i have only been testing the currenttime.

Here are the files for that test:

Here is the flow:  
[  
{  
"id": "69e8685217c73feb",  
"type": "uibuilder",  
"z": "64e1ba5a89b339ef",  
"name": "",  
"topic": "",  
"url": "audotest2",  
"fwdInMessages": false,  
"allowScripts": false,  
"allowStyles": false,  
"copyIndex": true,  
"templateFolder": "blank",  
"extTemplate": "",  
"showfolder": false,  
"reload": false,  
"sourceFolder": "src",  
"deployedVersion": "5.1.1",  
"credentials": {},  
"x": 590,  
"y": 180,  
"wires": [  
,  
  
]  
}  
]

Index.html

[  
{  
"id": "69e8685217c73feb",  
"type": "uibuilder",  
"z": "64e1ba5a89b339ef",  
"name": "",  
"topic": "",  
"url": "audotest2",  
"fwdInMessages": false,  
"allowScripts": false,  
"allowStyles": false,  
"copyIndex": true,  
"templateFolder": "blank",  
"extTemplate": "",  
"showfolder": false,  
"reload": false,  
"sourceFolder": "src",  
"deployedVersion": "5.1.1",  
"credentials": {},  
"x": 590,  
"y": 180,  
"wires": [  
,  
  
]  
}  
]

index.js  
var app = new Vue({  
// The HTML element to attach to  
el: '#app',

```
// Variables defined here will be avalable and updated within the HTML
data: {
    msg: '[No Message Received Yet]',
    audioPlay: 'true',
    audioGotoTime: 0,
},
methods: {
},
// Callback function when Vue library is fully loaded
mounted: function () {
    // Start up uibuilder
    uibuilder.start();
    // Keep a reference to the Vue app
    var vueApp = this;
    // Callback triggered when node receives a (non-control) msg
    uibuilder.onChange('msg', function (msg) {
        vueApp.msg = msg;
        vueApp.audioPlay = msg.audioPlay;
        vueApp.audiogotoTime = msg.audiogotoTime;
    });
},

```

});

I hope that somebody can help.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 October 2022 17:50 UTC](https://discourse.nodered.org/t/controlling-audio-in-uibuilder-from-node-red-flow/66983/2 "2022-10-25T17:50:55Z")

</div>

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