Audio (Waveform)

Uses the Wavesurfer library to play audio with a nicely stylized waveform interface.

Documentation

Video Tutorial

Direct Audio

Plays MP3's.
‍

Full audio player with Soundcloud-style waveform display.

This element is100% functional in the designer.

CCY BY 3.0

Alan Walker - Alone (MonsterFree Remix)

MonsterFree

Link to Source

CCY BY 3.0

The Chainsmokers Alan Walker Ft One Republic - How To Love

Mohammed Rehan

Link to Source

Creative Commons CCY BY 3.0

Kygo x Alan Walker ft. Selena Gomez - It Ain't Faded (STTBRN MASHUP)

Insane Indian Music

Link to Source

Styling

Styling is managed through variables, which can be set site-wide.
Using Sygnal's CSS Isolation component, you can override those variables for a specific player instance.
‍

Full audio player with Soundcloud-style waveform display.

This component is100% functional in designer preview mode.

Creative Commons CCY BY 3.0

Kygo x Alan Walker ft. Selena Gomez - It Ain't Faded (STTBRN MASHUP)

Insane Indian Music

Link to Source

External Audio Link

Audio file hosted on Cloudflare R2 object store.
‍

Creative Commons CCY BY 3.0

Alan Walker - Spectre [NCS Release]

NoCopyrightSoundsFans

Link to Source

CMS Based Audio

Audio component is CMS bound.
‍

The Chainsmokers Alan Walker Ft One Republic - How To Love

Mohammed Rehan

Sing Me To Sleep (Paul De Silva Remix)

Paul De Silva

Kygo x Alan Walker ft. Selena Gomez - It Ain't Faded (STTBRN MASHUP)

Insane Indian Music

Alan Walker - Alone (MonsterFree Remix)

MonsterFree

GSD - Sundance (Original Mix) | Copyright Free EDM Release

Demo

SA5

Heading

This is some text inside of a div block.

View Documentation

View Demo