Skip to main content
Audio elements

Bring a memorable soundscape to your Vev projects.

Diego Muralles avatar
Written by Diego Muralles
Updated over 5 months ago

Audio elements bring a rich, new texture to your web projects. From subtle sound effects to full-blown soundtracks, audio can help build an emotional connection with your brand and make your content experience more memorable.

Vev offers native components for popular sound hosting sites like Apple Music, SoundCloud, Spotify, Tidal, or an HTML5 audio widget for uploading audio files. Double-clicking your chosen audio player on the canvas opens the configuration options in the Properties tab on the editor's right. What configurations each component has are listed below.

Apple Music

Parameter

Options

Media link

Add the URL of your song/playlist

SoundCloud

Parameter

Options

SoundCloud link

Add the URL of your song/playlist

Classic look

Enable the SoundCloud classic preview style

Autoplay

Make the song start playing automatically

Spotify

Parameter

Options

Spotify link

Add the URL of your song/playlist

Tidal

Parameter

Options

URL

Add the URL of your song/playlist

HTML5 Audio

Parameter

Options

Audio file

Upload your audio file

Controls

Toggle on to show player controls

Autoplay

Toggle on to start playing automatically

Loop

Toggle on set the audio to repeat

Note: Autoplay will not work on mobile devices.

Custom interactions for HTML5 Audio

The HTML5 Audio also has custom interactions to make your audio more immersive. Below you can find what triggers and actions are custom to the HTML5 Audio player.

Trigger

Definition

On play

When the HTML5 Audio starts playing it initiates an action in the target.

On pause

When the HTML5 Audio pauses it initiates an action in the target.

On end

When the HTML5 Audio ends it initiates an action in the target.

Action

Definition

Play

The HTML5 Audio starts playing.

Pause

The HTML5 Audio pauses.

Toggle play

The HTML5 Audio toggles audio play (if playing, then stops playing or vice versa).

Did this answer your question?