Controlling audio in uibuilder from node-red flow

General
1

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.

2

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