Audio elements
Bring a memorable soundscape to your Vev projects.
Adding audio elements to your Vev project can create a rich, memorable soundscape. From subtle sound effects to full soundtracks, audio helps you build an emotional connection with your brand and makes your content experience more engaging for visitors.
Vev provides native components for four popular streaming platforms, Apple Music, SoundCloud, Spotify, and Tidal, plus an HTML5 audio player for uploading your own files.
Choosing an audio component
Use one of the streaming platform components (Apple Music, SoundCloud, Spotify, Tidal) if you're linking to a song or playlist that already exists on that platform.
Use the HTML5 audio player if you're uploading your own audio file, or if you need custom triggers and actions, since only the HTML5 component supports these.
Native audio components
To configure any of these components, double click the player on the canvas. This opens the configuration options in the Properties tab on the right side of the editor.
Apple Music
Media link: add the share link for your song or playlist from the Apple Music app or website. For example, a link in the format
https://music.apple.com/us/album/example.
SoundCloud
SoundCloud link: add the share link for your song or playlist from SoundCloud. For example, a link in the format
https://soundcloud.com/artist/track.Classic look: enable this option to display the older SoundCloud embed style, with a simpler waveform and a smaller player footprint, instead of the current default embed style.
Autoplay: toggles whether the track starts playing automatically when the page loads. Autoplay may not work on all mobile devices due to browser restrictions.
Spotify
Spotify link: add the share link for your song or playlist from the Spotify app or website. For example, a link in the format
https://open.spotify.com/track/example.
Tidal
URL: add the share link for your song or playlist from Tidal. For example, a link in the format
https://tidal.com/browse/track/example.
HTML5 audio player
Audio file: upload your own audio file here.
Controls: toggle on to show player controls, such as play, pause, and volume.
Autoplay: toggle on to make the audio start playing automatically. Autoplay may not work on all mobile devices due to browser restrictions.
Loop: toggle on to set the audio to repeat continuously.
Custom interactions for HTML5 audio
The HTML5 audio player supports custom interactions, so you can set up triggers and actions to control the player as part of a larger interactive experience. Only the HTML5 audio player supports custom interactions. The Apple Music, SoundCloud, Spotify, and Tidal components do not.
Triggers
On play: starts an action in the target element when the audio starts playing.
On pause: starts an action in the target element when the audio pauses.
On end: starts an action in the target element when the audio finishes playing.
Actions
Play: starts playing the audio.
Pause: pauses the audio.
Toggle play: switches the audio's playback state. If the audio is playing, it pauses. If the audio is paused, it plays.
For more details on setting up triggers and actions, see our interactions guide.
Need help?
If you run into an issue with an audio component, such as a track not embedding or a link not resolving, contact Vev support through the in-app chat or at support@vev.design.