# Play simple audio with ui\_template (Dashboard 2)

**URL:** <https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943>\
**Category:** Dashboard\
**Created:** [6 November 2024 14:43 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943 "2024-11-06T14:43:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [6 November 2024 14:43 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/1 "2024-11-06T14:43:20Z")

</div>

I am trying to play simple audio in ui\_template, I try the following:

```auto
<template>
    <div>
        <vuetify-audio :file="file" :ended="audioFinish"></vuetify-audio>
    </div>
</template>

```

```auto
<script>
export default {
    data() {
        return {
            file: 'http://www.noiseaddicts.com/samples_1w72b820/290.mp3',
        };
        },
        components: {
            'vuetify-audio': VuetifyAudio
        },
         If you want to use ended callback add below code
            methods: {
                audioFinish () {
            }
    },
}
</script>

```

It doesn't work for me.  
Is there a simple way to do this? I'm just looking for an alert to be played (audio output).

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [13 November 2024 11:41 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/2 "2024-11-13T11:41:06Z")

</div>

Can anyone guide me? The idea is to see an alternative way to run an audio alarm (Audio output).

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [13 November 2024 12:09 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/3 "2024-11-13T12:09:15Z")

</div>

> [@Pepex7](#):
>
> `vuetify-audio`

this is not a built in vuetify component.

I suspect you picked this up on a web search.

the `vuetify-audio` itself uses a regular html5 `audio` element under the hood - so just do that instead.

> <https://github.com/wilsonwu/vuetify-audio/blob/master/src/vuetifyaudio.vue#L25>

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [14 November 2024 12:47 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/4 "2024-11-14T12:47:02Z")

</div>

I'm trying to play an audio by taking the msg.payload, but it doesn't work.

```auto
<template>
    <div :class="msg.payload" id="msg">
        <audio id="myAudio">
            <source src="https://media.geeksforgeeks.org/wp-content/uploads/20240218213800/CantinaBand60.wav"
                type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
</template>

{{msg.payload}}
<script>
    var audio = document.getElementById("myAudio");
    function saludo(mensaje) {
        audio.play();
    }
    
    (function (scope) {
        scope.$watch('msg.payload', function(newValue){
            document.getElementById('myDiv').innerHTML = "valor" + newValue;
            if (newValue === 'Hola'){
                saludo(mensaje);
            }
        });
    }) (scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 November 2024 14:00 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/5 "2024-11-14T14:00:55Z")

</div>

> [@Pepex7](#):
>
> but it doesn't work

Not surprising your html looks (nearly) right but the code is littered with old Angular JS (AKA old depreciated Dashboard 1.0) stuff i.e. `scope.$watch` etc!

There are clear docs and live demos on the @flowfuse/dashboard site that show you the different ways to pass data to the template. [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#receiving-data)

* * *

Never mind.

Here is a working demo

```auto
<template>
    <!-- if you remove the `controls` attribute, you MUST click soomething on the page before initiating play -->
    <audio ref="audio" controls autoplay src=""> </audio>
</template>

<script>
    export default {
        watch: {
            msg: function () {
                if (this.msg?.topic === 'play') {
                    if (this.$refs.audio.src !== this.msg.payload ) {
                        this.$refs.audio.src = this.msg.payload
                    }
                    this.$refs.audio.play()
                } else if (this.msg?.topic === 'stop') {
                    this.$refs.audio.src = ''
                } else if (this.msg?.topic === 'pause') {
                    this.$refs.audio.pause()
                }
            }
        }
    }
</script>

<style>
.hidden {
    display: none !important;
}
</style>

```

Full working flow (CTRL-I to import)

```auto
[{"id":"6a137c41d3addec5","type":"ui-template","z":"3567e03e18126502","group":"d3197b4c4dd7b057","page":"","ui":"","name":"","order":2,"width":0,"height":0,"head":"","format":"<template>\n <!-- if you remove the `controls` attribute, you MUST click soomething on the page before initiating play -->\n <audio ref=\"audio\" controls autoplay src=\"\"> </audio>\n</template>\n\n<script>\n export default {\n watch: {\n msg: function () {\n if (this.msg?.topic === 'play') {\n if (this.$refs.audio.src !== this.msg.payload ) {\n this.$refs.audio.src = this.msg.payload\n }\n this.$refs.audio.play()\n } else if (this.msg?.topic === 'stop') {\n this.$refs.audio.src = ''\n } else if (this.msg?.topic === 'pause') {\n this.$refs.audio.pause()\n }\n }\n }\n }\n</script>\n\n<style>\n.hidden {\n display: none !important;\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"hidden","x":320,"y":340,"wires":[[]]},{"id":"caf334102ab7952d","type":"inject","z":"3567e03e18126502","name":"cantina","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"play","payload":"https://media.geeksforgeeks.org/wp-content/uploads/20240218213800/CantinaBand60.wav","payloadType":"str","x":170,"y":380,"wires":[["6a137c41d3addec5"]]},{"id":"8e135a0e9bfdccb7","type":"inject","z":"3567e03e18126502","name":"march","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"play","payload":"https://www2.cs.uic.edu/~i101/SoundFiles/ImperialMarch60.wav","payloadType":"str","x":170,"y":340,"wires":[["6a137c41d3addec5"]]},{"id":"3c290f1ea6cf8b36","type":"inject","z":"3567e03e18126502","name":"pause","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"pause","x":170,"y":300,"wires":[["6a137c41d3addec5"]]},{"id":"436efb1217534529","type":"inject","z":"3567e03e18126502","name":"stop","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"stop","x":170,"y":260,"wires":[["6a137c41d3addec5"]]},{"id":"d3197b4c4dd7b057","type":"ui-group","name":"P2 G1","page":"6685af11067a04cd","width":11,"height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"6685af11067a04cd","type":"ui-page","name":"grid page","ui":"22ea43815413e748","path":"/page2","icon":"home","layout":"grid","theme":"70e58855f40712e7","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"22ea43815413e748","type":"ui-base","name":"base","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"70e58855f40712e7","type":"ui-theme","name":"pink Theme","colors":{"surface":"#ffffff","primary":"#d355a5","bgPage":"#e1bcbc","groupBg":"#fbe9e9","groupOutline":"#dc8f8f"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

### note

You must click somewhere inside the page before starting a playback. This is a browser thing.

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [14 November 2024 14:55 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/6 "2024-11-14T14:55:24Z")

</div>

Thank you very much, I've been struggling with this for several days.

---

<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:** [14 December 2024 14:55 UTC](https://discourse.nodered.org/t/play-simple-audio-with-ui-template-dashboard-2/92943/7 "2024-12-14T14:55:37Z")

</div>

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