First, sorry for my english which is not my native language !
I'm trying to create a "Control Center" for an Escape Game Room.
One of the issue I have is that I try to make an audio file (.mp3) playing when the timer is running.
Actually, I'm using "read file" and "audio out". But I think it would be better if the sound is playing in the uibuilder (that will be displayed in the room). But I don't know how it could be possible.
I think it would be better because if I refresh the dashboard page, the sound wouldn't stop in the room.
I assume that you are running Node-RED on a Pi in the room? Is that what you want to use to play the sound?
Obviously uibuilder front-end's run in the browser so you would have to transfer a file from the server to the browser or create a stream that the browser can access.
So similar then except that you are using Windows rather than Linux as the base OS. And in your case both the server and the client are on the same device. Still, the same principle applies.
If the nodes don't work on Windows, you could always try to find a command-line player and use the exec node.
Can you check the browser dev tools console for errors or warnings?
Also, when you use a relative path, what path are you using and where have you put the file? Remember that the browser needs to use HTTP(S) to get the file, you can't simply use a local file reference (e.g. \\192.168.1.100\folder\file.mp3) because that won't be allowed by the browser for security reasons. To deliver via HTTP needs a server so you need to put the file somewhere that a web server can deliver it. Either in a suitable uibuilder served folder or using the static folder for Node-RED.
In my uibuilder node, in index.html I'm using this HTML tag <audio ref="audioRef" src="" id="audio-player" loop="true" muted="muted" autoplay></audio>
In index.js, I used that :
var app = new Vue({
el: '#app',
data: {
msg: '[No Message Received Yet]',
},
mounted: function() {
uibuilder.start();
var vueApp = this;
uibuilder.onChange('msg', function(msg) {
vueApp.msg = msg;
if (vueApp.$refs.audioRef.src != msg.audioSrc){
vueApp.$refs.audioRef.src = msg.audioSrc;
}
})
},
});
And, in a function node that is "looped", when I click on a button, this happens : msg.audioSrc = "http://localhost:1880/Capone/bandesonCapone.mp3";
This works well, and the mp3 file starts and continues until the end (it lasts 1 hour and 3 minutes).
But when I replace "http://localhost:1880/Capone/bandesonCapone.mp3" by "../Capone/bandesonCapone.mp3", the mp3 starts, and after one second starts again from the beginning, and again and again... And the path is the only change I make...
Don't worry, it's to create an Escape Room Center Control. The UIBuilder with the sound is on the screen of the room, so I'll interact with it before the game.
