CODEWITHSUNDEEP
htmllayouthtml5-audio
user704063
user704063

Reputation: 413

html 5 audio tag width

I was wondering if it's possible to set the width of the audio tag. It is not a supported feature by default, so "hacks" will be happily accepted.
I already tried putting them in small div's and tables, but that doesn't look very smooth... As far as I can see, I'm the only one bothering about it, but I really appreciate some help

There is no need for cross-platform/browser support; I'm happy as long as FireFox (3.6 ++) supports it.

Quick example as to what I'll be using:

<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio>

Upvotes: 41

Views: 141182

Answers (4)

XMMR12
XMMR12

Reputation: 73

You can use html and be a boss with simple things :

<embed src="music.mp3" width="3000" height="200" controls>

Upvotes: 1

rogerdpack
rogerdpack

Reputation: 66751

For those looking for an inline example, here is one:

<audio controls style="width: 200px;">
   <source src="http://somewhere.mp3" type="audio/mpeg">
</audio>

It doesn't seem to respect a "height" setting, at least not awesomely. But you can always "customize" the controls but creating your own controls (instead of using the built-in ones) or using somebody's widget that similarly creates its own :)

Upvotes: 23

Calvin
Calvin

Reputation: 993

You also can set the width of a audio tag by JavaScript:

audio = document.getElementById('audio-id');
audio.style.width = '200px';

Upvotes: 2

robertc
robertc

Reputation: 75707

Set it the same way you'd set the width of any other HTML element, with CSS:

audio { width: 200px; }

Note that audio is an inline element by default in Firefox, so you might also want to set it to display: block. Here's an example.

Upvotes: 63

Related Questions