Any way to make html5 audio responsive in Bootstrap?

Question

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

    <div class="col-sm-4 col-sm-offset-4">
      <audio controls style="width: 600px;">
        <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!

Solution 1

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 https://www.w3schools.com/tags/tag_audio.asp)

Solution 2

Try:

<div class="col-sm-4 col-sm-offset-4 embed-responsive embed-responsive-4by3">
    <audio controls class="embed-responsive-item">
        <source src="sample.mp3">
    </audio>
</div>

Ref: http://getbootstrap.com/components/#responsive-embed

Comments

[Casey]

Thanks but this does not work. "embed-responsive-4by3" should only be used for video tags as opposed to audio.

[Casey]

This worked, thanks! Guess I figured there was a BootStrap built in class but this was a nice work around!