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

# Legacy

## Audio (Wavesurfer) CC2

## UMD Build 

```
<!-- Load UMD build -->
<script src="https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.min.js"></script>

<script>
  const link = document.currentScript; // or another logic to get the element you want
  const wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: '#4F4A85',
    progressColor: '#383351',
    url: link.getAttribute('href'),
  });

  wavesurfer.on('interaction', () => {
    wavesurfer.play();
  });
</script>
```

## CC1&#x20;

Prototype - <https://codepen.io/memetican/pen/raOxgRv/1027467ab9b088408226a8f18d1b64b0>&#x20;