![]() ![]() We'll start by adding in the HTML the container. We'll just an icon from Heroicons to simulate that. It gives a nice style to the audio player. Usually, audio players have an image of the track playing. You can see the full demo on CodePen at the end of the section. Then with the help of Javascript bind the audio element's functionalities to these elements.Īll the icons used in this section are from Heroicons. We'll a nice looking player that uses different elements to achieve a good style. In this section, we'll create our own custom audio player. In the example below, we add a background color, a border radius, and some padding. ![]() To style the volume slider, which on Chrome appears after hovering the mute button, you can use the selector audio::-webkit-media-controls-volume-slider. In the example below, we add a background color and a border radius. To style the timeline you can use the selector audio::-webkit-media-controls-timeline. In the example below, we change the color of the text. To style the remaining time you can use the selector audio::-webkit-media-controls-time-remaining-display. To style the current time you can use the selector audio::-webkit-media-controls-current-time-display. In the example below, we change the background color of the play button as well as add a border-radius. To style the play button, you can use the selector audio::-webkit-media-controls-play-button. In the example below, we change the background color of the mute button as well as add a border-radius. To style the mute button, you can use the selector audio::-webkit-media-controls-mute-button. In the example below, we use the selector to change the background color. To style the control panel, which is the container of all the audio's controls, you can use the selector audio::-webkit-media-controls-panel. So, if you want to see how the audio element's style changes, please use Chrome. We'll see a few examples of how we can use some of these selectors to style the audio element.Īll the examples below will only work on Chrome. However, these only work on select browsers like Chrome. Using these selectors, you can give basic styling to audio elements. Use the CSS display grid property in which we’ll place the player’s controls.Audio : :-webkit-media-controls-mute-buttonĪudio : :-webkit-media-controls-play-buttonĪudio : :-webkit-media-controls-timeline-containerĪudio : :-webkit-media-controls-current-time-displayĪudio : :-webkit-media-controls-time-remaining-displayĪudio : :-webkit-media-controls-volume-slider-containerĪudio : :-webkit-media-controls-volume-sliderĪudio : :-webkit-media-controls-seek-back-buttonĪudio : :-webkit-media-controls-seek-forward-buttonĪudio : :-webkit-media-controls-fullscreen-buttonĪudio : :-webkit-media-controls-rewind-buttonĪudio : :-webkit-media-controls-return-to-realtime-buttonĪudio : :-webkit-media-controls-toggle-closed-captions-button Similarly, define the box-shadow and keep the overflow hidden. The "audio-player " class is the player’s container, define its width, height, background color, and font-size, etc. The CSS StylesĪfter creating the HTML elements, now we’ll use the CSS to customize the audio player. Similarly, you can also add some extra elements (audio thumbnails, etc) to the above HTML. In the tag you can add the custom text (music name etc). Similarly, create elements for timeline, progress, controls, etc as described below: In HTML, create a div tag with "audio-player" class that will be used as a player’s container. So, let’s create the HTML structure for a custom audio player. Anyhow, you can define the additional CSS styles to customize the audio player according to your needs. Basically, you don’t need to deal with JavaScript code as we are going to share the JavaScript file for the custom audio player. After that, we’ll get all these elements in JavaScript and attach the function. We need to create the custom HTML tags for the audio player interface in order to style these elements with CSS. There, I have placed two audio players, one of them is the default browser player and the other one is the CSS customized audio player with custom controls. So, this tutorial explains how you can customize an HTML5 audio player with CSS.īefore starting the customization process, I’d suggest you browse the demo page to test the audio player. It is because the “controls” attribute replaces the default browser’s audio player. If you have tried to style the HTML5 audio player, you may have not got the result. But, we can easily customize the player interface if we have a custom controls function. Basically, HTML5 audio player can’t be styled if we used the “controls” attribute inside the audio tag. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |