• Home
  • Customizing Audio Player Style

Customizing Audio Player Style

Once you have added an audio file to your webpage, you can customize the audio player style by adding a border or shadow.

 

Adding a border to an audio player:

1. Click on the audio player to open the Audio panel. 

2. Select Style.

 

3. From the Style panel, select Border.

 

4. On the Border panel, use the color picker to select a border color.

 

5. Use the Width slider to set the border width. You can also enter the numeric value, in pixels, in the text field provided.

6. Use the Padding slider to set the border padding. You an also enter the numeric value, in pixels, in the text field provided.

7. Use the Corners slider to set the curvature of the corners. This setting is to create rounded corners. You can also enter the numeric value in the text fields provided.

Changes are auto-saved and will apply automatically. 


Adding a shadow to an audio player:

1. Select Style from the Audio panel.

 

2. From the Style panel, select Shadow.

 

3. On the Shadow panel, use the color picker to select a shadow color.

 

4. Use the Horizontal offset slider to set the horizontal offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn to the right side of the audio player; a negative value means the shadow is drawn to the left side.

5. Use the Vertical offset slider to set the vertical offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn below the audio player; a negative value means the shadow is drawn above.

6. Use the Blur slider to customize the blur radius. You can also enter the numeric value in the text field provided. The blur radius defines how big and how much blurred the shadow is. A larger value makes the shadow lighter, and a value of 0 makes the shadow’s edges sharp.

7. Use the Spread slider to customize the spread distance. You can also enter the numeric value in the text field provided. The spread distance makes the shadow bigger (ie. expand) in all directions.

 


Changes are auto-saved and will apply automatically.