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>
HTML5 <audio> Tag. Since the release of HTML5, audios can be added to webpages using the “audio” tag.
The HTML <audio> element is used to play an audio file on a web page.
<audio> can be styled as any other html element. To increase the width just use the css property width .
How to embed audio in HTML? To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash.
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.
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With