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. canPlayType() method to determine what audio file is supported by the user’s web browser.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
#Html5 audio javascript how to#
NOTE: The accompanying demo will only work in Chrome 10+ and FireFox 3.6+.īy getting creative with the audio’s javascript methods and properties, you can avoid relying on the clunky controls provided by web browsers and inject pizazz into your pages! In a future post, I’ll examine how to use the. Check out my previous post for details about using HTML5’s element natively and how it is supported. In addition, various browsers only support certain kinds of audio file types. What developers must keep in mind with the element is that it is not yet widely supported by browsers.
#Html5 audio javascript download#
Download the demo to view an example of how this can be done.
currentTime property to have the file begin playback at the time the PauseAudio() function was executed. If the PlayAudio() function is called again, the audio file will reload and begin playing the file from the start. The simple PauseAudio() function pauses the playback.
0 kommentar(er)
