CODEWITHSUNDEEP
htmlmp3html5-audioogg
maxmitch
maxmitch

Reputation: 277

HTML5 MP3 player

I am trying to make a simple HTML5 player that has one button for play and pause, from 2 images, and that is it. Instead of having the standard 'controls'. 

<audio controls="controls">
<source src=".ogg" />
<source src=".mp3" />
</audio>

How can I do this?

Upvotes: 1

Views: 1929

Answers (1)

Roger Ng
Roger Ng

Reputation: 779

Simply add the CSS style setting the width as 45px.

CSS:

audio { width: 45px; }

HTML:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

This is how it looks in Google Chrome.

Audio Button Showcase

This is how it looks in IE 9.

enter image description here

Upvotes: 6

Related Questions