# 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:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![rbalderrama](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rbalderrama](https://forum.inductiveautomation.com/u/rbalderrama)\
**Post date:** [April 11, 2022, 9:46pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/21 "2022-04-11T21:46:07Z")

</div>

Hi,  
Need help configuring the source to be a file on the local hardrive of the computer where the gateway resides. I have tried using “[https://localhost/c:/Sound/Alarm10.wav](https://localhost/c:/Sound/Alarm10.wav)” and doesn’t work.  
I have tested with a URL from a website and works good.  
Thanks.

---

<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 11, 2022, 10:08pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/22 "2022-04-11T22:08:49Z")

</div>

Hi @rbalderrama,

Looks like the path provided is not where the audio file actually is. If you need to use local file paths I’d suggest trying `file:///<image path>` (you can open an audio file with a browser and inspect the URL for reference); otherwise, you can upload the file onto WebDev and reference it that way.

---

<div class="post-metadata">

**Author:** ![jeffrey.boey](https://avatars.discourse-cdn.com/v4/letter/j/6a8cbe/32.png) [@jeffrey.boey](https://forum.inductiveautomation.com/u/jeffrey.boey)\
**Post date:** [April 30, 2022, 12:25pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/23 "2022-04-30T12:25:43Z")

</div>

Hi I am transforming my iFrames to this component because it looks more suited but I have the same problem with the source.

I used File:/// but it is not doing anything.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b424989f5fefa0557e5e53303b37599fd52dd2a4.png)  
.  
,  
The exact link works when entered in a browser directly.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/7/27f5862fd991c8987f7a23089db6e026dd626b9a.png)

Am I missing something? Thanks 🙂

---

<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:** [May 2, 2022, 10:37pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/24 "2022-05-02T22:37:00Z")

</div>

Hi @jeffrey.boey,

Do you see anything in the browser’s console. I haven’t had a chance to test this personally, but my hunch is this is probably some security measure to prevent users from arbitrarily loading files, or the file path isn’t resolving correctly. If possible, I recommend using the WebDev module to store your audio files. If for whatever reason, that is not possible, I can ask the team to see if there are other options. Thanks.

---

<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:** [May 3, 2022, 8:54am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/25 "2022-05-03T08:54:57Z")

</div>

If you store the audio as blob data in a database, my Blob Server module should be able to deliver it.

> [@Automation Professionals' Blob Server Module](https://forum.inductiveautomation.com/t/automation-professionals-blob-server-module/57970):
>
> Automation Professionals is pleased to announce an alpha release of its new Blob Server Module. Available only for Ignition v8.1, here. The Blob Server Module provides a simple way to deliver images, PDF files, or other binary content from a database to your Perspective clients or other web applications. Without needing the WebDev module. All you need is a Named Query that has appropriate security settings and returns a single row with two columns: Content, and ContentType. Modest documentati…

---

<div class="post-metadata">

**Author:** ![jeffrey.boey](https://avatars.discourse-cdn.com/v4/letter/j/6a8cbe/32.png) [@jeffrey.boey](https://forum.inductiveautomation.com/u/jeffrey.boey)\
**Post date:** [May 4, 2022, 11:09pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/26 "2022-05-04T23:09:02Z")

</div>

Hi Ayu, Thanks for the tip, I checked the console and you were right, the server is preventing me from loading a file from it’s directory directly, image below:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fbf50de7a7676d313b59e6bf051f6e30cc9d11ed.png)  
.  
.  
My company does not have the WebDev module, I’ll try to talk to them to and see if we can get it but it’ll take sometime for the gears to turn, in the meantime, are there other solutions? I am trying to avoid using iframe as java seems to lock down files after being played and I can’t delete them unless I restart the gateway…

I’ll look into storing audio as blob, but Ideally a file is still much more easier to manage, especially if it needs to be used by other applications. Thanks

---

<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:** [May 4, 2022, 11:14pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/27 "2022-05-04T23:14:21Z")

</div>

Hi @jeffrey.boey,

I’m not aware of any other solutions other than the ones listed above. Let me get in touch with the team to see if there are other avenues available or if this is a feature we can potentially implement. Thanks!

---

<div class="post-metadata">

**Author:** ![jeffrey.boey](https://avatars.discourse-cdn.com/v4/letter/j/6a8cbe/32.png) [@jeffrey.boey](https://forum.inductiveautomation.com/u/jeffrey.boey)\
**Post date:** [May 17, 2022, 9:18am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/28 "2022-05-17T09:18:20Z")

</div>

Hi folks, just to update, we tried the WebDev Module on trial mode and it’s a good workaround with the folder mount function, solved all our problem

It does however adds alot to the budget to get the WebDev licences, especially since we are only using it to access local gateway files (and we do have a lot of gateways), so I hope there is a way around the security issue.

I’ll also look into @pturmel 's solution in using Blob from the database 🙂

Thanks for the help ✌

---

<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:** [May 31, 2022, 5:51am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/29 "2022-05-31T05:51:45Z")

</div>

> [@jeffrey.boey](#):
>
> It does however adds alot to the budget to get the WebDev licences

Can you try copying your files to:  
`C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main\YourFolder`

and using the url:  
`http://<Ignition IP or hostname>:8088/main/YourFolder/YourAudio.wav`

This is how we store cached versions of map tiles locally without webdev, but i believe this might be wiped when upgrading? Not sure... However we recently did a patch update from 8.1.9? to 8.1.15 and these files weren't deleted.

@Paul.Scott had some words around this here:

> [@Increase the tile cache size for map perspective component](https://forum.inductiveautomation.com/t/increase-the-tile-cache-size-for-map-perspective-component/28550/23):
>
> I’m not super excited on the premise of storing things in the webserver\webapps\main\ directory, for two reasons. Our installers delete that directory on upgrade, so you’d need to be mindful about managing those tiles yourself on upgrade I’m not an expert on the matter, but my understanding of how files in that directory get served up is sort of a byproduct of some stuff Jetty does. Meaning, nothing we wrote in our code base is directly facilitating that behavior. The next time we upgrade Jet…

I agree though that the web dev module is expensive when you have a very basic use for it

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 31, 2022, 6:46am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/30 "2022-05-31T06:46:08Z")

</div>

> [@jeffrey.boey](#):
>
> java seems to lock down files after being played

I have a solution for that, i made a seperate post so people will find it easier when having the same problem

> [@Unblock and Delete files that have been locked by Java](https://forum.inductiveautomation.com/t/unblock-and-delete-files-that-have-been-locked-by-java/60194):
>
> There is an issue with java locking files that are in use. Mainly when using the webserver. Causing it to be impossible to delete them while the gateway is running. But here is a solution! (For windows atleast). Using handle you can find and unlock files. I made it a bit easier to use by writing a simple bat file. [UnlockAndDelete.zip](https://forum.inductiveautomation.com/uploads/short-url/7eEcAE6JGpz4JvjlyqUCP4CCD1X.zip) (891.3 KB) Unzip on the pc in the gateway (in for example C:\Folder) You can execute this through script or in the cmd line, requires admin rights! script: …

---

<div class="post-metadata">

**Author:** ![woodsb02](https://avatars.discourse-cdn.com/v4/letter/w/6a8cbe/32.png) [@woodsb02](https://forum.inductiveautomation.com/u/woodsb02)\
**Post date:** [June 8, 2023, 12:58pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/31 "2023-06-08T12:58:10Z")

</div>

For some reason the "display" property does not show by default in the PROPS list - so I couldn't work out how to make the audio component visible for a while. It feels like a bug that this doesn't show in the PROPS list - I had to click add property, and then it was there as an option.

While I am here - why does this have a separate "display" property, rather than just using the "visible" META used by every other perspective component?

---

<div class="post-metadata">

**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\
**Post date:** [June 8, 2023, 2:10pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/32 "2023-06-08T14:10:13Z")

</div>

[Difference Between CSS Display and Visibility](https://www.tutorialspoint.com/difference-between-css-display-and-visibility#:~:text=CSS%20Display%20%E2%88%92%20none%20does%20not,made%20visible%20to%20the%20user).

TL;DR: An item with Visibility=false will still take up space on the page, the content just won't be shown. An item with Display=false won't take up space on the page. If you toggle the Display property between true and false for a component, other components are likely to jump around (depending on the layout of course). This doesn't happen when toggling the Visible property.

---

<div class="post-metadata">

**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\
**Post date:** [June 8, 2023, 3:04pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/33 "2023-06-08T15:04:23Z")

</div>

> [@zacht](#):
>
> An item with Visibility=false will still take up space on the page, the content just won't be shown. An item with Display=false won't take up space on the page.

Does this mean when Display=false it will not be loaded on the screen at all?

---

<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:** [June 8, 2023, 3:29pm UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/34 "2023-06-08T15:29:54Z")

</div>

Hi @brandon1,

I believe the mark up will still exist in the DOM with display=false (which is essentially display: 'none'). However, the item will be ignored and not be part of the layout process when rendering. Hopefully, that helps. Thanks.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 23, 2024, 8:47am UTC](https://forum.inductiveautomation.com/t/new-feature-audio-component/57285/35 "2024-10-23T08:47:07Z")

</div>

Is it possible to somehow style the background of the audio component?

It always shows as a grey color and is not good for dark themes.  
I can recreate the whole UI if we have a script function to change the playback position.

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