Play simple audio with ui_template (Dashboard 2)

Dashboard
1

I am trying to play simple audio in ui_template, I try the following:

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

<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).

2

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

3

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.

1 Like
4

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

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

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

Never mind.

Here is a working demo

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

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

2 Likes
6

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