How can we Change the Ui of audio file

[Adnan Khan]

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

 

with another image i like

[Vinitha Jeyakumar]

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

[Adnan Khan]

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

[Vinitha Jeyakumar]

Hi Adnan,

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

Regards,

Vinitha

[Vinitha Jeyakumar]

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-color: coral;

        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHDHoqMcpFVG5BZCI4iIb5trvHyJXNn2h3h6X-B-AifA&usqp=CAU&ec=48665701);

      }

      audio::-webkit-media-controls-play-button {

        background-color: purple;

      }

Sample: https://stackblitz.com/edit/m1joom?file=index.html,index.js

Here is the available list of CSS styles to customize the HTML audio element,

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

Reference Link: https://stackoverflow.com/questions/59024693/style-the-audio-html-tag

Regards,

Vinitha