![]() ![]() ![]() There are plenty of free and commercial JavaScript frameworks available which can help us create an awesome audio player. On the other hand, we can create a custom player and use it according to our need. ![]() You probably have seen the icon of some audio player with a triangle shape in the user interface of your favorite website. Now more than ever, people over the world use their smartphones to access the internet and one of the most common tasks is playing media files usually music or videos.Īudio players are used to play the audio files in HTML5 applications. It will also create two variables soundIcon and muteIcon to be used to change the icon of the button based on whether the audio is muted or not.Audio players are a much needed component for any website. This will add a soundButton variable, which will be the sound button element. Inside that container, we'll add the track "image" element.Ĭonst soundButton = document. 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. 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 ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |