> 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-waveform.md).

# Audio (Waveform) ✅

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FAnhbdWUMl4YBisrjLkmn%2Fimage.png?alt=media&amp;token=f6355108-6921-4403-b684-b1087d0a8c13" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FZd7XHd2FdiycugP4vPDN%2Fimage.png?alt=media&amp;token=9309d935-352f-45a9-9e7e-d043545162c6" alt=""><figcaption></figcaption></figure>

This audio player is designed to directly play MP3's and OGG's, either stored in the CMS or Webflow assets or hosted elsewhere.

Keep in mind that Webflow's CMS has a file size limit. Files can be up to 10MB in assets but may have a lower size limit in the CMS. Make sure to prepare your MP3 files properly to fit, or host them externally on Amazon S3, Cloudflare R2, Bunny .net, or another hosting platform.

This player is a straight-up file player, it doesn't support any streaming protocols yet, so large files won't work ideally. If you're doing something like long session recordings or hour long podcasts, look for a streaming solution. Most podcast hosting platforms already provide streaming-capable embeddable players that should suffice.&#x20;

## Goals&#x20;

* Support MP3&#x20;
  * Maybe OGG later&#x20;
* Nicely stylized&#x20;
* Theme approximating Soundcloud&#x20;
* Play from any MP3 link&#x20;
* Controls&#x20;
  * Play/pause, clicking the left play button&#x20;
  * Seek by clicking on the waveform&#x20;

## Demos

{% embed url="<https://xfiner-sygnal-demo.webflow.io/>" %}

{% embed url="<https://webflow-core-component-test.webflow.io/media/audio>" %}

## Properties

<table><thead><tr><th width="169.6666259765625">Property</th><th width="117">Type</th><th>Notes</th></tr></thead><tbody><tr><td>MP3</td><td>Link</td><td>Use Webflow's File link type if you have the MP3 stored in assets or in a CMS File type field.  Use the URL link type if you have the MP3 hosted externally. </td></tr><tr><td>Loop</td><td>Boolean</td><td>Can loop or play once</td></tr><tr><td>Preload</td><td>Boolean</td><td>Enables preloading</td></tr><tr><td>ID</td><td>ID</td><td>Used for programmatic purposes if you need an ID attached to this component, e.g. for hash navigation </td></tr><tr><td>ID Namespace</td><td>ID</td><td>Reserved for future use </td></tr><tr><td>Waveform Data</td><td>Text</td><td>For storing <a href="/sygnal-webflow-components/cc/sygnal-media/audio-waveform/waveform-data.md">Waveform Data</a> for rapid preload.</td></tr><tr><td>Label</td><td>Text</td><td>A debugging convenience mechanism to help you identify which Player is identified in the console logs.  Used especially with <a href="/sygnal-webflow-components/cc/sygnal-media/audio-waveform/waveform-data.md">Waveform Data</a>. </td></tr><tr><td>Debug Mode</td><td>Boolean</td><td>Enables or disables debugging mode.  Enable if you need to see console logging. As of 0.1.9, the waveform data has been moved to the Design Mode feature below. </td></tr><tr><td>Design Mode</td><td>Boolean</td><td>Enables or disabled debugging mode.  Enable if you need to copy the <a href="/sygnal-webflow-components/cc/sygnal-media/audio-waveform/waveform-data.md">Waveform Data</a> for waveform preloading. </td></tr></tbody></table>

## JS API&#x20;

Controlling the players&#x20;

<https://codepen.io/memetican/pen/OPyZOZq/56dca14d35c6f8f084b58b910a09714e>

## Updates & Fixes

### 0.1.9

* Fixed variable conflicts in the shadow DOM, so that custom styling passes through consistently.&#x20;
* Centralized the MediaPlayerManager as a singleton
* Added a Designer mode, for easy access to the waveform data at design time&#x20;