Background Music

Background Music

Welcome to the “Background Music” documentation. Looking to integrate background music into your website? Our widget empowers you to create engaging audio playlists that will captivate your audience. In this guide, we'll show you how to use the editor to customize your background music widget.

Step 1 : Open The Editor
Step2 :  Add And Customize Audios
Step 3 : Configure Settings
Step 4 : Adjust The Layout
Step 5 : Sett Up Button
Step 6 : Preview


Step 1: Open the Editor
1. Go to Background Music template.
 2. Click on "Edit" after choosing your template.




Step 2: add and customize audios

1. In this panel, you can easily add, remove, or rearrange your audios as needed.





2. Customize each audio by uploading the song and its cover, and writing its title and the artist name.






Step 3: Configure settings

Here, you'll handle the settings:
1. Start by specifying the default volume and deciding whether to activate autoplay for the next song. You can choose to hide or show each player, enable downloads, activate RTL (Right-to-Left) mode, and maximize the screen height.



        
           
2. Next, you can specify the playlist's height, select an icon, input the playlist title, and customize the playlist's width and roundness.






Step 4: Adjust the Layout

In the Layout panel, you can adjust how your playlist looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.






Step 5: sett up the button

1. When setting your audio playlist layout as a popup, you have the option to display a button and decide whether the popup should appear initially or not.





2. You can set a fixed button position and specify the margin around it.





3. To edit the button information, simply provide its label, choose an icon, and determine its position.





4. Customize the button by adjusting its size, roundness, applying shadow, and setting padding.





5. Finally, you can select colors that align seamlessly with your website's design.






Step 6 : Preview

Lastly, you can click on “Preview” to see how your background music widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



Related Articles:
Audio Player Single Video