# URL in msg.payload to play audio, UI Template

**URL:** <https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858>\
**Category:** Dashboard\
**Created:** [26 October 2020 20:29 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858 "2020-10-26T20:29:58Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [26 October 2020 20:29 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/1 "2020-10-26T20:29:58Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed5402c815a979ecebe11a4da94eb7aa9ae41774.png)

**Correct url in source-code:**  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e4c62405cd5ce8fd58d119474a407433ccc352c.png)

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?

> [@Using the msg.payload to change ui template](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/19):
>
> I edited manually the flow in order to try to understand the issue at hand. \<!DOCTYPE html\> \<html\> \<body\> \<div ng-bind-html="msg.payload"\>\</div\> \<p\>Image to use:\</p\> \<img id="scream" width="900" height="800" src="/route.png" alt="The Scream"\> \<p\>Canvas:\</p\> \<canvas id="myCanvas" width="1000" height="950" style="border:1px solid #d3d3d3;"\> \</canvas\> \<script\> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var…

**My Flow:**

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [26 October 2020 21:08 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/2 "2020-10-26T21:08:28Z")

</div>

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}}

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [26 October 2020 21:18 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/3 "2020-10-26T21:18:23Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/7/2729c5204580009e9717d695416ed5f0f967a683.png)

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

Thx!

Edit, after your edit:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49deaf7c53f74a6984b68c9ce70249864bbaf74d.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [26 October 2020 21:31 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/4 "2020-10-26T21:31:55Z")

</div>

This test flow

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/7/e7f91279f11087011a455bb30bdabc8e123ad436.png)

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

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [26 October 2020 21:38 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/5 "2020-10-26T21:38:17Z")

</div>

> [@E1cid](#):
>
> ```auto
> [{"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":[]}]
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [26 October 2020 21:57 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/6 "2020-10-26T21:57:14Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2ca768fb357a1617cd72873102302182f9aab59a.gif)  
(I'm checking the HTML code, via ctrl+shift+I. Using Chrome on windows)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [26 October 2020 22:28 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/7 "2020-10-26T22:28:51Z")

</div>

Ok this works for me

```auto
[{"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

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [27 October 2020 17:50 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/8 "2020-10-27T17:50:22Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [27 October 2020 17:56 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/9 "2020-10-27T17:56:49Z")

</div>

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

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [27 October 2020 18:12 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/10 "2020-10-27T18:12:39Z")

</div>

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. 😉_

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [27 October 2020 18:29 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/11 "2020-10-27T18:29:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)\
**Post date:** [27 October 2020 18:33 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/12 "2020-10-27T18:33:17Z")

</div>

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

---

<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:** [10 November 2020 18:33 UTC](https://discourse.nodered.org/t/url-in-msg-payload-to-play-audio-ui-template/34858/13 "2020-11-10T18:33:47Z")

</div>

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