Styling Audio Control

HTML & CSS
1

I was able to use HTML5 to add a small audio clip to my client’s website. Woo hoo!

Here is the code I added…

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

The problem is that while the audio control looked fine in the middle of a blank page, when I add my audio clip to the left column - which is only 200px wide - the control is too big and looks like this…

Is there any way to fix this using HTML/CSS?

2

You can change the width but the appearance of the tag is browser-dependent, but you can hide it, build your own interface and control the playback using Javascript.

Here is something that provides an interface to style.

3

I’m assuming the width of the audio player is extending out of the parents.

Only a shot in the dark since we are talking theory here apparently.

4

No shot in the dark - there is a screenshot above.

And yes, as you can see, the control butts up against the right border of the box which looks a little weird.

Is there a way to make the control narrower so it doens hit the right border of the parent container?

5

How does that help me with how your code is set up?

You can show me a picture of a cake but how in the world can I tell you what’s in it? I’m not psychic.

6 
audio {width: 100%;}
1 Like
7

Because in Post #1 I posted my CODE and a SCREENSHOT… :no_mouth:

8

Thanks Ralph. I figured out on my own that I can style the < audio > tags just like other tags.

9

You did? I see no CSS there. When I take that code and put it into my local testing, it works just fine. Not cut off at all. You are saying that code by itself creates the issue for you? That’s strange.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.