2011-04-12 7 views
19

Me preguntaba si es posible establecer el ancho de la etiqueta de audio. No es una característica compatible por defecto, por lo que se aceptarán "hacks".
Ya intenté ponerlos en divisiones y tablas pequeñas, pero eso no se ve muy suave ... Por lo que puedo ver, soy el único que se molesta, pero realmente aprecio algo de ayudahtml 5 etiqueta de audio ancho

No hay necesidad de soporte multiplataforma/navegador; Estoy contento siempre que FireFox (3.6 ++) lo admita.

Ejemplo rápido cuanto a lo que va a utilizar:

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

Respuesta

36

Conjunto de la misma manera en que se establece el ancho de cualquier otro elemento HTML, con CSS:

audio { width: 200px; } 

Nota que audio es un elemento en línea por defecto en Firefox, por lo que es posible que también desee configurarlo en display: block. Here's an example.

+3

vergüenza el jugador cromo solamente se expande a una anchura de 800px antes centrado en sí. – Harvey

7

Para aquellos que buscan un ejemplo en línea, aquí es una:

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

No parece respetar un ajuste de "altura", al menos no asombrosamente. Pero siempre puede "personalizar" los controles pero crear sus propios controles (en lugar de usar los integrados) o usar el widget de alguien que de manera similar crea el suyo :)

1

También puede establecer el ancho de una etiqueta de audio JavaScript:

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

puede usar hTML y ser un jefe con cosas simples:

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