# Audio

## What Is An Audio Part?&#x20;

The Audio part allows you to insert audio files, allowing users to listen to pieces of content.

Adding an audio component to your app can improve user engagement, facilitate a better understanding of content, enhance information retention, and serve as a great tool for marketing and storytelling.

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Data Display > Audio
{% endhint %}

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FpYfnZ9ywU7ZaIKHXzlju%2FAudioPart.gif?alt=media&#x26;token=6d789cdf-c37d-4fa6-913b-b0df5d7145ef" alt=""><figcaption><p>Example Audio Part</p></figcaption></figure>

## Adding an Audio Part

To add an audio part, select the part where you’d like to add your audio.

In the Parts Library, go to Base parts, select your preferred Audio part, and add it to your page.

You'll need to replace the placeholder audio file with your preferred audio file. To do that, select the audio part which will activate the property editor panel on the right. Go to Audio > Value Set, then toggle to 'Choose'. You will see the audio files in your Media Gallery. Select the most appropriate file, and it will replace the original audio placeholder.

If you need to upload audio from your device, click the 'Upload' button. Then select the most appropriate audio files from your device and they will be added to your Media Gallery.

## Editing and Styling An Audio Part <a href="#editing-and-styling-a-keyboard-part" id="editing-and-styling-a-keyboard-part"></a>

Like many other parts, [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [rounding](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/rounding), [colors](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/colors-and-themes), and [spacing](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/spacing) can be applied using the property editor on the right, once the audio part has been selected.

A background [image](https://appeggiohelp.gitbook.io/appeggio-help/frequently-used-parts/images) can be added to the audio part. To do this, select the audio part, then go to the Image property editor in the right panel. Select an image from the Media Gallery, or upload a new image from your device. You can then adjust the [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity) of the background image within the Decoration Editor as needed.

### Changing the Icons in Your Audio Part

The audio part comes with a number of [icons](https://appeggiohelp.gitbook.io/appeggio-help/frequently-used-parts/icons), all of which can be changed and styled in the property editing panel on the right.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fif56UVhBtb0sYPEBtUqc%2FAudioIconEditor.png?alt=media&#x26;token=ec71eded-4925-48d6-984b-f01aef0ba2b8" alt=""><figcaption><p>Audio Editor Icons</p></figcaption></figure>

## Related Information <a href="#formatting-images" id="formatting-images"></a>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Media Gallery</mark></td><td></td><td></td><td><a href="../../page-builder/left-toolbar/media-gallery">media-gallery</a></td></tr><tr><td><mark style="color:orange;">Icons</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/icons">icons</a></td></tr><tr><td><mark style="color:orange;">Images</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/images">images</a></td></tr><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr></tbody></table>
