html 5 audio tag width

Question

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:

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

robertc · Accepted Answer · 2011-04-14 09:54:58Z

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

audio{width:200px;}

Note thataudiois an inline element by default in Firefox, so you might also want to set it todisplay: block.Here's an example. 这个例子必须看看

Shame the Chrome player only expands to a width of 800px before centering itself. — Harvey, Sep 2 '15 at 22:39

rogerdpack · Answer 2 · 2016-09-13 15:56:44Z

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

<audio controlsstyle="width:200px;"><sourcesrc="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 :)

Calvin · Answer 3 · 2016-02-08 15:06:58Z

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

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

score 0 · Answer 4

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

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

You are here

html audio 音频控制条宽度高度 controls size 有大用

html 5 audio tag width

4 Answers 正确答案

友情链接

搜索表单

用户登录

You are here

html audio 音频 控制条宽度 高度 controls size 有大用

html 5 audio tag width

4 Answers 正确答案

友情链接

html audio 音频控制条宽度高度 controls size 有大用