We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How can we Change the Ui of audio file

I want to change the Ui of the audio file.
can we change the ui of this

 audio-design.png

with another image i like


4 Replies

VJ Vinitha Jeyakumar Syncfusion Team March 24, 2023 12:10 PM UTC

Hi Adnan,

We would like to inform you that we have used the common HTML audio element to load an audio file into the RichTextEditor and we didn't add any custom CSS to customize the UI styles of Audio tag. So you can customize the audio tag using your custom CSS like below, where we have added background image

Code snippet:

<style>
 .e-rte-image.e-imginline,
      .e-rte-audio.e-audio-inline,
      .e-rte-video.e-video-inline {
        height: 200px;
        background-image: url(http://arbordayblog.org/wp-content/uploads/2016/06/tree.jpg);
      }
</style>




Regards,
Vinitha


AK Adnan Khan March 24, 2023 12:26 PM UTC

Hi  Vinitha,
thanks for your suggestion but I want something like this.




VJ Vinitha Jeyakumar Syncfusion Team March 28, 2023 01:49 PM UTC

Hi Adnan,

Currently, we are checking with the possibilities, we will update you the further details soon.

Regards,
Vinitha




VJ Vinitha Jeyakumar Syncfusion Team March 30, 2023 10:42 AM UTC

Hi Adnan,

As we mentioned earlier, we are using HTML audio tag only and if you want to modify the audio element, you can achieve it by customizing the CSS styles as per your requirement like below,

Code snippet:
 audio::-webkit-media-controls-panel {
        background-colorcoral;
        background-imageurl(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHDHoqMcpFVG5BZCI4iIb5trvHyJXNn2h3h6X-B-AifA&usqp=CAU&ec=48665701);
      }
      audio::-webkit-media-controls-play-button {
        background-colorpurple;
      }