Adding audio elements to your Vev projects can create a rich, memorable soundscape. From subtle sound effects to full-blown soundtracks, audio can help you build an emotional connection with your brand and make your content experience more engaging for your visitors.
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.
Native Audio Components
Vev provides native components for several popular sound hosting sites, as well as an HTML5 audio widget for uploading your own files. To configure any of these components, simply double-click the player on the canvas to open the configuration options in the Properties tab on the right side of the editor.
Apple Music
Media link: Add the URL of your song or playlist.
SoundCloud
SoundCloud link: Add the URL of your song or playlist.
Classic look: Enable this option to use the classic SoundCloud preview style.
Autoplay: Toggles whether the song starts playing automatically.
Spotify
Spotify link: Add the URL of your song or playlist.
Tidal
URL: Add the URL of your song or playlist.
HTML5 Audio
Audio file: Upload your own audio file here.
Controls: Toggle on to show player controls (e.g., play, pause, volume).
Autoplay: Toggle on to make the audio start playing automatically.
Loop: Toggle on to set the audio to repeat continuously.
Note: Autoplay may not work on all mobile devices due to browser restrictions.
Custom Interactions for HTML5 Audio
The HTML5 Audio component supports custom interactions that allow you to create a more immersive experience. You can set up triggers and actions to control the audio player.
Triggers:
On play: Initiates an action in the target when the audio starts playing.
On pause: Initiates an action in the target when the audio pauses.
On end: Initiates an action in the target when the audio finishes playing.
Actions:
Play: Starts playing the audio.
Pause: Pauses the audio.
Toggle play: Toggles the audio's playback state (if playing, it pauses; if paused, it plays).
For more details on how to set up and use interactions, please refer to our interactions guide.