> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/audio-plyr.md).

# Audio (Plyr)

Plyr.js-based variation of the Audio component.

{% hint style="warning" %}
**PROTOTYPING** 
{% endhint %}

* Supports MP3 and OGG 
  * These can be uploaded directly to assets and sourced 
  * Or can be pulled through a link from an externally hosted resource 

## Appearance 

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FW9zfGkUkIFBh0EvkltAy%2Fimage.png?alt=media&amp;token=4930f525-2c2f-4d59-9bc5-5b65ada9fc8e" alt=""><figcaption></figcaption></figure>

## Implementation & Dependencies&#x20;

|              |                    |                                                                                              |
| ------------ | ------------------ | -------------------------------------------------------------------------------------------- |
| External JS  | Yes, plyr from CDN | Manual                                                                                       |
| External CSS | Yes, plyr from CDN | Manual                                                                                       |
| Internal JS  | Yes                | <ul><li>Forms element from link content</li><li>Handles truthy boolean attributes </li></ul> |
|              |                    |                                                                                              |

<https://webflow-core-components.webflow.io/audio>

<https://webflow-core-components.design.webflow.com/?pageId=6879bddb4f891b941accd738&workflow=canvas>

## Styling&#x20;

Untested.&#x20;