Any way to make html5 audio responsive in Bootstrap?

I have a simple HTML5 audio player that I would like to make responsive in Bootstrap.

 <div> <audio controls> <source src="sample.mp3"> </audio> </div> 

Is there a way to make the div containing this audio player responsive no matter what content is in it or at least a class or something to make the audio player responsive? Hoping to not have to use an external library if possible.

Thanks!

2 Answers

I suggest to use width:100% and max-width:600px. When you make the window smaller in a desktop browser you will not see it the same way as on a real mobile device, but the audio element on mobile devices (i.e. iOS, Android) is definitely going to be smaller anyways - you don't have much influence on its apprearance. Together with those settings it should adapt to just about any situation properly.

(You just might want to add a second source tag with the audio in ogg format and also add the file format in the source tag/s, see )

Try:

<div> <audio controls> <source src="sample.mp3"> </audio> </div> 

Ref: