# New Feature: Audio Component

**URL:** <https://forum.inductiveautomation.com/t/new-feature-audio-component/57285>\
**Category:** Ignition Early Access\
**Created:** [March 16, 2022, 9:11pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285 "2022-03-16T21:11:33Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 16, 2022, 9:11pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/1 "2022-03-16T21:11:33Z")

</div>

Hello everyone, I'm happy to announce the release of the Audio component that will be available on the nightly builds. The primary purpose of this component is to allow users to play audio in Perspective, providing both the component, scripting functions for the component, and events. Of course, how can we forget the opportunities to Rick Roll your fellow operators.

The Audio component comes in two flavors that is driven by the display property of the component. By default, the display property Audio component is set to false. This allows designers to add audio without having to worry about the component affecting document flow and the layout of their Views. Instead, one can use the provided scripting functions to play/ pause media files. When the Audio component is set to be displayed, the Audio component will use the user agent's default UI for controls. Here is an example of the Audio component in Chrome:

 ![audio](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9b15fb93617f9acb9f2f80deecd1007f3dbbfeaa.png)

# Properties

**source** : `string` - The URL of the media file.  
**play** : `boolean` - The play state of the media file. Will be kept in sync with with the user agent's UI controls and any scripting functions called.  
**loop** : `bolean` - Determines if the media file should be looped.  
**volume** : `number` - Determines the volume of the media file.  
**playbackRate** : `number` - Determines the playback rate of the media file. _Note_: Some browsers may mute the audio if certain ranges of playback rate are exceeded.  
**allowDownload** : `boolean` - Determines if the browser's UI should display the download button. This depends whether or not the specific user agent implements the UI with a download button.  
**display** : `boolean` - Determines if the Audio component should be rendered.  
**style** : `StyleObject` - The style of the Audio component.

# Events

**onPlay** - Event fired when the media file is playing. _Note_: If the Audio component is set to loop, this event will fire on every loop.  
**onPause** - Event fired when the media file is paused.  
**onError** - Event fired when the Audio component encounters an error.

- **errorMessage** : `string` - The message when encountering an error.

**onEnded** - Event fired when the media file has reached the end. _Note_: If the Audio component is set to loop, this event will fire on every loop.  
**onLoaded** - Event fired when the media file has loaded its first playable frame. _Note_: Be aware that if the intention is to call play() in this event, some user agent's may block you from doing so until the user has interacted with the client.  
**onRateChanged** - Event fired when the media file playback rate is changed.

# Scripting Functions

**play()** - Play the media file of the Audio component.  
**pause()** - Pause the media file of the Audio component.  
**replay()** - Set the time of the media file back to 0 and play the media file of the Audio component.

  
That concludes the overview. Feel free to give this component a try and post any feedback below. Thanks!

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [March 16, 2022, 9:14pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/2 "2022-03-16T21:14:44Z")

</div>

> [@ayu](#):
>
> ...opportunities to Rick Roll your fellow operators.

Got my image ready to go.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5fc840129d5d3f44163d69a96fade94c6a16e011.jpeg)

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [March 16, 2022, 9:16pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/3 "2022-03-16T21:16:51Z")

</div>

Will there be a video component in the future?

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 16, 2022, 9:19pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/4 "2022-03-16T21:19:37Z")

</div>

Hey Jordan,

The video player is already available as a component in Perspective, unless this is an elaborate ploy to troll me 😆.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 16, 2022, 9:49pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/5 "2022-03-16T21:49:31Z")

</div>

Yay, now I can add twinkle noises every time someone clicks on a button 😃

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [March 16, 2022, 9:50pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/6 "2022-03-16T21:50:36Z")

</div>

I was more thinking of a randomized smoke detector chirp 😅

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [March 16, 2022, 10:14pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/7 "2022-03-16T22:14:19Z")

</div>

Pinned on March 16, 2022, 10:14pm UTC



---

<div class="post-metadata">

**Author:** ![cmgriggs93](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@cmgriggs93](https://forum.inductiveautomation.com/u/cmgriggs93)\
**Post date:** [March 28, 2022, 12:44pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/8 "2022-03-28T12:44:22Z")

</div>

Will the sound source file have to be local to the client, or can a source point to a file located on the gateway?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 28, 2022, 1:02pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/9 "2022-03-28T13:02:07Z")

</div>

For anything in Perspective, you can safely assume that the source file _ **cannot** _ be local.

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 28, 2022, 8:35pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/10 "2022-03-28T20:35:59Z")

</div>

Hi @cmgriggs93,

Yes you can have a file located on the gateway. For example, you can upload an audio file through the WebDev module and use the mounted url as the source for the audio component.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [March 28, 2022, 10:14pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/11 "2022-03-28T22:14:57Z")

</div>

Out of curiosity, apart from the version of the audio component that can still play audio while its display property is set to false, what is the expected use case for this component? I have always just used the video player component for this.

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 28, 2022, 10:43pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/12 "2022-03-28T22:43:02Z")

</div>

Hi @swolnisty,

Functionally between the two there is no difference if I take advantage of theming and set the video components video display to none but keep the controls displayed. There may be some file format differences, potentially MP3, that may not be recommended to be used in the underlying video element of the component. However, I’ve yet to find hard evidence to support this. Perhaps the only difference is aesthetics, whether you’d prefer our custom-built UI or the user agent’s (browser’s) UI for controls.

---

<div class="post-metadata">

**Author:** ![dmachuca](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@dmachuca](https://forum.inductiveautomation.com/u/dmachuca)\
**Post date:** [April 8, 2022, 2:08am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/13 "2022-04-08T02:08:17Z")

</div>

Can this be used to play an alarm sound every time there is an unknowledged active alarm?

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [April 8, 2022, 2:25am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/14 "2022-04-08T02:25:12Z")

</div>

Should be doable with an expression binding on the play property using [isAlarmActiveFiltered](https://docs.inductiveautomation.com/display/DOC81/isAlarmActiveFiltered)

I didnt test this, may have gotten the flags wrong:

~~ 

```auto
isAlarmActiveFiltered("[default]*", "*", "*", 0, 4, 0, 0, 0)

```

 ~~

Meh i couldnt get that to work, try this:

```auto
runScript('len(system.alarm.queryStatus( state=["ActiveUnacked"]))', 2500)

```

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [April 8, 2022, 4:04pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/15 "2022-04-08T16:04:34Z")

</div>

Hi @dmachuca,

Sure, adding onto what @josborn has already provided. Once you’ve set up a way to detect unacked alarms, you can also call self.play() or self.getSibling(…).play() in a scripting function, depending on where your script is defined.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 9, 2022, 7:57pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/16 "2022-04-09T19:57:49Z")

</div>

Don’t call this on your view though unless you will only have a very small number of clients. It’s scales horribly, and _ **never** _ call this in Vision

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [April 9, 2022, 8:37pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/17 "2022-04-09T20:37:47Z")

</div>

A fair point. I actually wouldn’t do this at all, i handle all of this in the PLC and have a Boolean that triggers the sound player.

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [April 11, 2022, 12:21am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/18 "2022-04-11T00:21:18Z")

</div>

> [@nminchin](#):
>
> It’s scales horribly, and _ **never** _ call this in Vision

Ok, so now i am curious. I did both of these on a dev environment to see what the impact was, and i found nothing. It may be that my setup just didnt have much going on but loading multiple vision clients with the binding above and 30+ perspective sessions there was no appreciable change in memory, cpu , or ui responsiveness. Just for my understanding can you tell me what you would expect to see performance wise?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2022, 12:42am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/19 "2022-04-11T00:42:54Z")

</div>

At a customer of ours with 120 clients (~80 vision ~40 perspective), calling system.alarm.queryStatus would kill the gateway. You can see this with the load that the alarm status tables in older 8.1 versions place on the gateway which call this. Last year we were using these in 8.1.5 on a single gateway system and the CPU usage was through the roof and was crashing the server all the time, not to mention destroying client performance. In later versions I think after 8.1.10? they added caching to reduce the need to query the alarm table every time.

Back in my old Ignition days, in my naive wisdom I created an alarm summary Template in Vision which called `system.alarm.queryStatus` to count the number of alarms given a tagPath. This was on a very small 3-client system with decently-resourced clients, and I had maybe 5-10 of these templates on the page at any one time. Operators complained for weeks about terribly slow performance; clicking nav links or opening popups would take 5-10s to even start to load, very slow to write to tags. In the end, I removed these templates from the screens and all of a sudden no more issues.

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [April 11, 2022, 12:45am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/20 "2022-04-11T00:45:45Z")

</div>

Thanks for the background Information. All of my setups would be extremely small compared to what you have described which is probably why i didn’t notice the hit. My cpu usage is nearly always in single digit territory.

[Next page](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285.md?page=2)
