> 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/technical-notes.md).

# Technical Notes

## Features 

{% hint style="info" %}
For Audio (Wavesurfer), CC1 does not exist as Webflow does not have a built-in audio player element. 
{% endhint %}

| Feature          | CC1                                                           | CC2                | CC3                                                          |
| ---------------- | ------------------------------------------------------------- | ------------------ | ------------------------------------------------------------ |
| Implementation   | n/a, as Webflow does not have a built-in audio player element | Standard component | Code component                                               |
| Library          |                                                               | Core Components    |                                                              |
| Demo             |                                                               |                    | [Demo](https://webflow-core-component-test.webflow.io/audio) |
| CMS Compatible   |                                                               | Yes                | Yes                                                          |
| Native MP3       |                                                               | Yes                | Yes                                                          |
| Native MP3 + CMS |                                                               | Yes                | Bug fix                                                      |

## Technical Notes

All variations are based on Wavesurfer 

<https://wavesurfer.xyz/>

##

## Audio Element Attributes&#x20;

#### ✅ `<audio>` element — all standard attributes:

| Attribute                             | Type              | Description                                                      |
| ------------------------------------- | ----------------- | ---------------------------------------------------------------- |
| `src`                                 | URL               | URL of the audio file (optional if `<source>` used)              |
| `controls`                            | Boolean           | Shows browser’s built-in audio controls                          |
| `autoplay`                            | Boolean           | Starts playing automatically when loaded                         |
| `loop`                                | Boolean           | Restarts playback when audio ends                                |
| `muted`                               | Boolean           | Starts playback muted                                            |
| `preload`                             | Enum              | Hints to browser about preloading: `none`, `metadata`, or `auto` |
| `crossorigin`                         | Enum              | Controls CORS: `anonymous` or `use-credentials`                  |
| `playsinline`                         | Boolean           | (iOS Safari) Prevents fullscreen when audio is played            |
| `disableRemotePlayback`               | Boolean           | Prevents casting to remote playback devices                      |
| `class`, `id`, `style`, `title`, etc. | Global attributes | Standard HTML global attributes                                  |

***

#### ✅ `<source>` element — all standard attributes:

| Attribute | Type                    | Description                                  |
| --------- | ----------------------- | -------------------------------------------- |
| `src`     | URL                     | URL of the media file                        |
| `type`    | MIME                    | Media type (e.g., `audio/mpeg`, `audio/ogg`) |
| `media`   | Media query             | Optional: apply only if media query matches  |
| `sizes`   | (unused in audio/video) | Mostly relevant for `<img>` in `srcset`      |
| `srcset`  | (unused in audio/video) | Not applicable for `<audio>` or `<video>`    |

***

#### Notes:

* `<audio>` may use `src` directly **or** contain multiple `<source>` elements.
* `<source>` elements allow fallbacks and are used in sequence.
* Boolean attributes are true if present, false if omitted.

## Blank src

Yes, a `<source>` element **with no `src`** will be safely **ignored** by all major browsers during media selection.

#### Behavior:

* The browser processes `<source>` elements **in order**.
* If a `<source>` has no `src`, it is skipped, even if `type` is valid.
* This is defined in the HTML spec: the `src` attribute is **required**; if missing or empty, the source is considered **invalid** and ignored.

#### Example:

```html
<audio controls>
  <source type="audio/mpeg"> <!-- No src, ignored -->
  <source src="audio.mp3" type="audio/mpeg"> <!-- Used -->
</audio>
```

This is safe and will not cause errors or warnings in any standards-compliant browser.