URL in msg.payload to play audio, UI Template

Dashboard
1

Hello
I am looking to send a URL to a UI template by means of a dropdown to play an internet radio.

I can send the URL (I get the correct url in the debug). However, the audio will not play if the URL is entered via "{msg / payload}". If I look deeper into the html code, the correct url is given. Someone who can get around this?

I had thought to provide a new UI template for each radio station, via a switch node. However when I change the radio station, the UI template remains active, resulting in multiple radios playing together.

Someone who can help me?
Thank you!

UI-template:

image
image1202Ă—250 15.3 KB

Correct url in source-code:
image

I know

I know the problem is loading the msg.payload. According to the post below, it should work through a "scope. $ Watch".However, I have no knowledge of this. Is what I quote correct? If not, someone who will help me?

My Flow:

[{"id":"64135c9.4f093a4","type":"ui_dropdown","z":"667d022a.81efdc","name":"","label":"Radio","tooltip":"Kies de gewenste radio","place":"Kies een radio","group":"ca3fa09.26dd96","order":4,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Geen radio","value":"Geen","type":"str"},{"label":"Studio Brussel","value":"StuBru","type":"str"},{"label":"MNM Hits","value":"MNM","type":"str"},{"label":"Radio 1","value":"Radio1","type":"str"}],"payload":"","topic":"radio","x":160,"y":420,"wires":[["cc14f5cf.fc1cc8"]]},{"id":"10dd6c54.a9e554","type":"debug","z":"667d022a.81efdc","name":"Na Template","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":420,"wires":[]},{"id":"bb931fa5.c0191","type":"ui_template","z":"667d022a.81efdc","group":"ca3fa09.26dd96","name":"","order":5,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<body>\n\n<audio autoplay>\n  <source src=\"{{msg.payload}}.ogg\" type=\"audio/ogg\">\n  <source src=\"{{msg.payload}}.mp3\" type=\"audio/mpeg\">\n</audio>\n\n</body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":480,"y":420,"wires":[["10dd6c54.a9e554"]]},{"id":"cc14f5cf.fc1cc8","type":"function","z":"667d022a.81efdc","name":"Radiokeuze","func":"var radio = msg.payload;\n\nif (radio == \"Geen\"){\n    msg.payload = \"\";\n}\n\nelse if (radio == \"StuBru\"){\n    msg.payload = \"http://icecast.vrtcdn.be/stubru-high\";\n}\n\nelse if (radio == \"MNM\"){\n    msg.payload = \"http://icecast.vrtcdn.be/mnm_hits-high\";\n}\n\nelse if (radio == \"Radio1\"){\n    msg.payload = \"http://icecast.vrtcdn.be/radio1-high\";\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":420,"wires":[["bb931fa5.c0191"]]},{"id":"ca3fa09.26dd96","type":"ui_group","z":"","name":"Radio","tab":"2e50a2b7.45142e","order":2,"disp":false,"width":"1","collapse":false},{"id":"2e50a2b7.45142e","type":"ui_tab","z":"","name":"Aanmelden","icon":"group","order":2,"disabled":false,"hidden":false}]
2

Just a thought.
form template info

Note: By default, mustache will escape any non-alphanumeric or HTML entities in the values it substitutes. To prevent this, use {{{triple}}} braces.

And should it be {{payload}}, not {{msg.payload}}

3

Hello

I'm using html, so triple {} isn't necessary, if I'm not wrong?
If I use '{...}' 3 times, it seems like I'm even further away from home:
image

Note that when using {{msg.payload}}, the url loads correctly.

Thx!

Edit, after your edit:
image

4

This test flow

[{"id":"392339d5.4c47de","type":"inject","z":"8d22ae29.7df6d","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"http://test-test.url.com","payloadType":"str","x":90,"y":2000,"wires":[["ebbf4807.8ff22"]]},{"id":"ebbf4807.8ff22","type":"template","z":"8d22ae29.7df6d","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the good payload: {{{payload}}}\n\n\nThis is bad payload: {{payload}}","output":"str","x":240,"y":2020,"wires":[["49952583.65b3fc"]]},{"id":"49952583.65b3fc","type":"debug","z":"8d22ae29.7df6d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":430,"y":2020,"wires":[]}]

produces this result

Screenshot_20201026-212850
Screenshot_20201026-2128501920Ă—1080 254 KB

notice the // have been url encoded using {{ }}

5

oh, I see why you use triple. You use "template", I use "UI Template (dashboard)". :slight_smile:

6

To summarize.

I am using 'UI template' to play audio (internet radio).
Via a dropdown in the dashboard, I make a choice between the desired radio. A function in turn ensures the correct url.

The URL is provided via msg.payload, and read in the UI template.

The URL is coming in correctly, see GIF below. However, the audio does not play. If I place the url directly on the desired location, the music will start playing. However, it is not possible, because my url has to be changed via the dropdown.

Radiokeuze
Radiokeuze1206Ă—209 493 KB

(I'm checking the HTML code, via ctrl+shift+I. Using Chrome on windows)

7

Ok this works for me

[{"id":"83a697ca.67da5","type":"ui_dropdown","z":"8d22ae29.7df6d","name":"","label":"Radio","tooltip":"Kies de gewenste radio","place":"Kies een radio","group":"165e1e1a.e752fa","order":4,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Geen radio","value":"Geen","type":"str"},{"label":"Studio Brussel","value":"StuBru","type":"str"},{"label":"MNM Hits","value":"MNM","type":"str"},{"label":"Radio 1","value":"Radio1","type":"str"}],"payload":"","topic":"radio","x":120,"y":2380,"wires":[["1029730c.c3411d"]]},{"id":"1029730c.c3411d","type":"function","z":"8d22ae29.7df6d","name":"Radiokeuze","func":"var radio = msg.payload;\n\nif (radio == \"Geen\"){\n    msg.payload = \"\";\n}\n\nelse if (radio == \"StuBru\"){\n    msg.payload = \"http://icecast.vrtcdn.be/stubru-high\";\n}\n\nelse if (radio == \"MNM\"){\n    msg.payload = \"http://icecast.vrtcdn.be/mnm_hits-high\";\n}\n\nelse if (radio == \"Radio1\"){\n    msg.payload = \"http://icecast.vrtcdn.be/radio1-high\";\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":270,"y":2380,"wires":[["c31d0ee1.fadb38"]]},{"id":"c31d0ee1.fadb38","type":"change","z":"8d22ae29.7df6d","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"'<!DOCTYPE html>\t<html>\t<body>\t\t<audio autoplay>\t  <source src=\"' & payload & '.mp3\" type=\"audio/mpeg\">\t  <source src=\"' & payload & '.ogg\" type=\"audio/ogg\">\t</audio>\t\t</body>\t</html>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":2400,"wires":[["a23b16cb.cc11f8"]]},{"id":"a23b16cb.cc11f8","type":"ui_template","z":"8d22ae29.7df6d","group":"165e1e1a.e752fa","name":"test","order":5,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":410,"y":2300,"wires":[["f98b95cf.92cb"]]},{"id":"f98b95cf.92cb","type":"debug","z":"8d22ae29.7df6d","name":"Na Template","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":620,"y":2300,"wires":[]},{"id":"165e1e1a.e752fa","type":"ui_group","z":"","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

firefox on android

1 Like
8

Hello

The cdde you shared works! I just noticed that my code apparently works too. However, the buffer time to start the audio is extremely much longer than yours. I don't know why this is because the requested url is read directly into both codes.

Tested on Windows 10, Google Chrome.

Thank you for your time!

9

Soon as you said (corrected me) that you were using ui-template, it reminded me i had issues with it and have always found it works better using the msg.template property. I have no idea why.

here is what i ended up doing as the function node is not needed

[{"id":"781005ba.a02be4","type":"inject","z":"29248d4b.2780fa","name":"","props":[{"p":"options","v":"[{\"Stop\":\"\"},{\"lazer\":\"http://188.40.135.197:8656/listen.mp3\"},{\"Studio Brussel\":\"http://icecast.vrtcdn.be/stubru-high\"},{\"MNM Hits\":\"http://icecast.vrtcdn.be/mnm_hits-high\"},{\"Radio 1\":\"http://icecast.vrtcdn.be/radio1-high\"}]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":160,"y":180,"wires":[["7e15de16.d3b868"]]},{"id":"7e15de16.d3b868","type":"ui_dropdown","z":"29248d4b.2780fa","name":"","label":"Radio","tooltip":"Kies de gewenste radio","place":"Kies een radio","group":"165e1e1a.e752fa","order":4,"width":"0","height":"0","passthru":true,"multiple":false,"options":[],"payload":"","topic":"radio","x":300,"y":180,"wires":[["31724f4f.8bc6a8"]]},{"id":"31724f4f.8bc6a8","type":"change","z":"29248d4b.2780fa","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"'<!DOCTYPE html>\t<html>\t<body>\t\t<audio autoplay>\t  <source src=\"' & payload & '.mp3\" type=\"audio/mpeg\">\t  <source src=\"' & payload & '.ogg\" type=\"audio/ogg\">\t</audio>\t\t</body>\t</html>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":180,"wires":[["c96c65d6.bfc148"]]},{"id":"c96c65d6.bfc148","type":"ui_template","z":"29248d4b.2780fa","group":"165e1e1a.e752fa","name":"test","order":5,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":650,"y":180,"wires":[[]]},{"id":"165e1e1a.e752fa","type":"ui_group","z":"","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Edit/ Remove extra nodes exported by accident.

1 Like
10

I notice that the buffer time of your stream is much shorter. I will also try to reach the other streams directly, without DNS.

Thanks again.

Edit: The stream you have added, is just a lot faster. :wink:

11

Yes that was a direct stream. DNS may be a better option as the IP may change.

12

In the meantime I have found new streams for the same radios, with "lower" quality but much faster load times. Works great!

13

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