Audio Player

Audio Player

Welcome to the “Audio Player” documentation. Looking to integrate audio player into your website? Our widget empowers you to seamlessly integrate audio content into your web pages. In this guide, we'll show you how to use the editor to customize your audio player widget.

Step 1: Open the Editor
Step 2: customize the content
Step 3: Configure settings
Step 4: Adjust the Appearance
Step 5: Adjust the Layout
Step 6 : Adjust The Button
Step 7 : Choose Colors
Step 8 : Preview


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




Step 2: customize the content

In this panel, you can write your audio title and artist , choose an audio image,  insert the audio link.







Step 3: Configure settings

Here, you'll handle the settings:
1. Begin by selecting your preferred audio player preview settings and then defining the default values.



2. You can enable autoplay, adjust the minimum and maximum speed, customize backward and forward settings, set a default speed, activate shuffle and repeat modes, control the volume, and open the playlist by clicking the button..




Step 4: Adjust the Appearance

Customize the appearance of your audio player widget by selecting which options you want to display."








Step 5: Adjust the Layout

In the Layout panel, you can adjust how your audio 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 6 : Adjust The Button


  •  You can manage the display timing of the button using the button panel.



  •  Modify the button label and weight, include an icon if desired, and then select the mode and position of the button.





  • You can incorporate animation effects into the button for both entrance and exit as needed.





  •   Customize the button color or upload an image of your choice to meet your preferences.





    • Step 7 : Choose Colors

    Finally, you can select colors that match your website's design.




    Step 8 : Preview

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

    https://cdn2.fouita.com/0x2729/media/imgs/audio13.png


    Related Articles:
    Background Music Single Video