# How to control HTML5 Audio Element from UI-Template?

**URL:** <https://discourse.nodered.org/t/how-to-control-html5-audio-element-from-ui-template/31430>\
**Category:** Dashboard\
**Created:** [11 August 2020 08:59 UTC](https://discourse.nodered.org/t/how-to-control-html5-audio-element-from-ui-template/31430 "2020-08-11T08:59:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Herold](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@Herold](https://discourse.nodered.org/u/Herold)\
**Post date:** [11 August 2020 08:59 UTC](https://discourse.nodered.org/t/how-to-control-html5-audio-element-from-ui-template/31430/1 "2020-08-11T08:59:10Z")

</div>

I'm a newbie.  
Would like some example code to get DOM Audio element basic custom control (play() / pause() methods from a button or clickable image) on HTML5 audio element rendered in browser.

I succeed to play audio file from audio controller with "autoplay" or "controls" properties sets in ui-template:

```auto
	<audio id="myaudio" src="myaudio_url" autoplay>
            Your browser does not support the
            <code>audio</code> element.
 </audio>

or 

<audio id="myaudio" src="myaudio_url" controls>
            Your browser does not support the
            <code>audio</code> element.
    </audio>

```

Unfortunately don't know how to script play() / pause () methods from a custom button in NR UI-template.

Any help welcome.  
Thank's

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [11 August 2020 14:04 UTC](https://discourse.nodered.org/t/how-to-control-html5-audio-element-from-ui-template/31430/2 "2020-08-11T14:04:50Z")

</div>

Hi Herold,  
Welcome to the forum!  
Normally - unless I have something misunderstood about your case - you can use the ui\_audio node (which is part of the dashboard node set) for this. [Here](https://discourse.nodered.org/t/playing-mp3-audio/8188/16) is more information. Although pauzing is _ **not** _ possible this way (see [here](https://discourse.nodered.org/t/node-red-dashboard-audio-wish/4798/20))...  
Bart

---

<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 September 2020 14:04 UTC](https://discourse.nodered.org/t/how-to-control-html5-audio-element-from-ui-template/31430/3 "2020-09-10T14:04:50Z")

</div>

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