CODEWITHSUNDEEP
htmlhtml5-audio
George
George

Reputation: 7317

Customizing the Audio Tag in HTML5

The following code snippet

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

generates the following audio controls:

enter image description here

Question 1: Is there a way to remove the progress bar portion of these audio controls, such that the only thing visible is the play/pause button and the volume knob?

Question 2: Is there a way to totally customize the appearance of the play button using another image?

Upvotes: 1

Views: 430

Answers (1)

Rok Anne Roll
Rok Anne Roll

Reputation: 123

With MediaElement.js http://mediaelementjs.com/#api you can customize your html5 audio control easily. Live demo with the code http://designshack.net/articles/css/custom-html5-audio-element-ui/

Upvotes: 1

Related Questions