Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 895
user704063 Avatar asked Apr 12 '11 12:04

user704063


People also ask

Does HTML5 support audio tag?

HTML5 <audio> Tag. Since the release of HTML5, audios can be added to webpages using the “audio” tag.

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

How do I change the size of an audio file in HTML?

<audio> can be styled as any other html element. To increase the width just use the css property width .

How do I embed audio in HTML5?

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.


2 Answers

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.

like image 54
robertc Avatar answered Sep 18 '22 15:09

robertc


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 :)

like image 20
rogerdpack Avatar answered Sep 20 '22 15:09

rogerdpack