Gestionar etiqueta <embed> con JS. <embed> genera campo de formulario no deseado

Profesor_Lambetain · #1 (**permalink**) 19/02/2013, 21:47

Hola al foro: (aclaro que soy novato).

Necesito gestionar la etiqueta <embed> con JS para que el visitante pueda seleccionar el archivo mp3 a su voluntad. No he podido encontrar la manera de hacerlo; creo que me he mirado todos los posts de este foro que tratan sobre sonido ¿Alguien me puede orientar?

He probado con <bgsound> y <audio> sin poder hacerlo (necesito una consola de control de sonido, que pueda dimensionar en su ancho y alto porque tengo espacio limitado en pantalla, y esto me lo aporta <embed>).

(Lo siguiente es un tema de html, pero he creído oportuno juntar ambos temas en un solo post de JS). Pero además, la etiqueta <embed>, puesta entre <form> y </form>, me genera un campo del formulario sin yo quererlo, específicamente me lo define como el primer campo, no obstante que <embed> está entre el 3º y 4º campo declarados (8 en total) del formulario. Por razones de posicionamiento de los campos y consola de sonido en la pantalla no puedo modificar este orden (quiero decir que no puedo sacar <embed> del rango de etiquetas cubierto por el <form>. Podría intentar escindir el formulario en dos, pero preferiría no hacerlo para no complicar el código.

Además sospecho que Chrome no reconoce este campo indeseado de formulario que genera <embed> (el desarrollo básico lo hago sobre IE9), impidiéndome ajustar la página para este navegador (esto no lo tengo visto en detalle aún).

Hasta aquí descrito lo que hice. Lo que necesito lograr es que el visitante pueda elegir el archivo mp3 a reproducir, por ejemplo con una serie de campos <select><option>.

Mi proyecto sólo está desarrollado con html y JS. No uso CSS, tampoco PHP porque es una web para trabajar off-line. Y otras herramientas, lenguajes o aplicaciones, no conozco. Sólo tiene que ser en html y JS.

Agradeceré me podáis orientar, a ver si lo que necesito es posible.

Muchas gracias anticipadas por vuestra atención.

emprear · #2 (**permalink**) 20/02/2013, 05:38

Bueno sería ver tu código, porque eso de ta etiqueta embed dentro de un form, "no me suena".
De todas formas, dado que la etiqueta embed requiere lanzar un plugin en el navegador, mi sugerencia es que hagas algo como esto
http://foros.emprear.com/html5/audio...p3/audio5.html
que utiliza <audio> de html5, en el ejemplo son botones, pero bien puede ser un select el que lance la función. eso sí, deberás subir los archivos tanto en mp3 como ogg

Otra alternativa, utilizar un reproductor en flash para tener compatibilidad completa con navegadores viejos, como p.ej
http://www.alsacreations.fr/dewplayer-en.html
que entre los reproductores tiene uno para listas de reproducción

Saludos

Profesor_Lambetain · #3 (**permalink**) 20/02/2013, 07:00

Cita:

Iniciado por emprear

Bueno sería ver tu código, porque eso de ta etiqueta embed dentro de un form, "no me suena".
De todas formas, dado que la etiqueta embed requiere lanzar un plugin en el navegador, mi sugerencia es que hagas algo como esto
[url]http://foros.emprear.com/html5/audio-html5/mp3/audio5.html[/url]
que utiliza <audio> de html5, en el ejemplo son botones, pero bien puede ser un select el que lance la función. eso sí, deberás subir los archivos tanto en mp3 como ogg

Otra alternativa, utilizar un reproductor en flash para tener compatibilidad completa con navegadores viejos, como p.ej
[url]http://www.alsacreations.fr/dewplayer-en.html[/url]
que entre los reproductores tiene uno para listas de reproducción

Saludos

Gracias emprear. Te anexo el código relevante. La función calculo() no interviene en el problema de audio que reporto, sólo que debo tener cuidado de reindexar en ella los valores document.forms[0].elements[x].value en razón del campo que no codifico en html, pero que me agrega la etiqueta <embed> como primer campo del <form> (esto es: yo codifico en html 8 campos, pero aparecen 9 al listarlos con un alert(document.forms[0].length) (te transcribo lo que creo es la parte del código que interesa, ya que todo el código tiene más de 2000 líneas. Tengo todo metido en una tabla, excepto lo que te digo abajo):

Código HTML:

<body ONLOAD="calculo();">
…..
<table>
<tr>
<td><FORM>
<[B]INPUT[/B] NAME="boton1" TYPE="button" … />
<[B]INPUT[/B] NAME="boton2" TYPE="button" … />
</td> 
… 
</tr>
…
<tr>  
…
<td>
<embed src="AvCamelias.mp3" autostart="true" loop="true" width="280" height="42"></embed>
</td>
</tr>
<tr>
<td…>
<[B]INPUT[/B] SIZE="2" ID="Anioselec" VALUE="" />
<[B]INPUT[/B] NAME="boton3" TYPE="button" VALUE="CALCULAR" ONCLICK="calculo();" />
</td>
…
</tr>
…
<tr> 
<td> ttttt </td>
<[B]INPUT[/B] TYPE="hidden" NAME="m" VALUE="23" />
<[B]INPUT[/B] TYPE="hidden" NAME="n" VALUE="34" />
<[B]INPUT[/B] TYPE="hidden" NAME="p" VALUE="14" />
<[B]INPUT[/B] TYPE="hidden" NAME="senial" VALUE="0" />
</FORM>
<td> jjjj </td> 
….
</table>
</body>

Si te fijas, el formulario lo abro dentro de una celda de tabla, y lo cierro fuera de una celda. Y los campos 1 a 4 del form los declaro dentro de celda y los 5 a 8 fuera de celda, pero esto no influye (he probado de las dos maneras).

El asunto es que en IE9 la etiqueta <embed> crea otro campo del form. La página tiene 3 partes, llamémoslas: show de fotos, cálculo matemático y sonido. Todo el código me funciona en IE9 (las 3 partes), pero en Chrome sólo me funciona el show de fotos y sonido, pero no el cálculo (no puedo asegurar, de momento, que este problema sea debido a <embed>, probaré dividiendo el form en dos, dejando entre medias de ambos la etiqueta <embed>).

El código que me pasas me puede llegar a servir. Dado que soy novato debo interpretarlo bien antes y requiero tiempo. Te lo agradezco mucho.

Lo que sí creo, si no me equivoco, es que con <audio>, y como tú bien dices, debo subir los files de audio en los dos formatos, .mp3 y .ogg. La pregunta es: teniendo los .mp3 ¿cómo hago para conseguir los .ogg?

Mil gracias por tu atención.

emprear · #4 (**permalink**) 20/02/2013, 10:29

Si, bastante curioso eso del embed, no lo entendía hasta que probé esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="#">
<table border="1">
<tr>
<td>
<input name="boton1" type="button" value="x1"/>
<input name="boton2" type="button" value="x2"/>
</td> 
</tr>
<tr>  
<td>
<embed src="avcamelias.mp3" autostart="true" loop="true" width="280" height="42" />
</td>
</tr>
<tr>
<td>
<input type="text" size="2" id="anioselec" name="audioselect" value="x3" />
<input name="boton3" type="button" value="x4" onclick="calculo();" />
</td>
</tr>
<tr> 
<td> ttttt </td>
<td> jjjj </td> 
</tr>
</table>
<input type="hidden" name="m" value="x5" />
<input type="hidden" name="n" value="x6" />
<input type="hidden" name="p" value="x7" />
<input type="hidden" name="senial" value="x8" />
</form>
 
 
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
var a= document.forms[0];
for (var i=0;i<a.length;i++)
{
    if(a[i].tagName == 'INPUT'){
alert(a[i].tagName + "-" + a[i].value +  "\n");
}
}
}
//]]>
</script>
 
</body>
</html>

Es decir tuve que corregirlo verificando el tagName. Hecho de esa manera en todos los browsers da 8.
Por lo de la conversión, con esta herramienta desde la linea de comandos es sencillo
http://v2v.cc/~j/ffmpeg2theora/

Saludos

Profesor_Lambetain · #5 (**permalink**) 20/02/2013, 12:38

Cita:

Iniciado por emprear

Si, bastante curioso eso del embed, no lo entendía hasta que probé esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="#">
<table border="1">
<tr>
<td>
<input name="boton1" type="button" value="x1"/>
<input name="boton2" type="button" value="x2"/>
</td> 
</tr>
<tr>  
<td>
<embed src="avcamelias.mp3" autostart="true" loop="true" width="280" height="42" />
</td>
</tr>
<tr>
<td>
<input type="text" size="2" id="anioselec" name="audioselect" value="x3" />
<input name="boton3" type="button" value="x4" onclick="calculo();" />
</td>
</tr>
<tr> 
<td> ttttt </td>
<td> jjjj </td> 
</tr>
</table>
<input type="hidden" name="m" value="x5" />
<input type="hidden" name="n" value="x6" />
<input type="hidden" name="p" value="x7" />
<input type="hidden" name="senial" value="x8" />
</form>
 
 
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
var a= document.forms[0];
for (var i=0;i<a.length;i++)
{
    if(a[i].tagName == 'INPUT'){
alert(a[i].tagName + "-" + a[i].value +  "\n");
}
}
}
//]]>
</script>
 
</body>
</html>

Es decir tuve que corregirlo verificando el tagName. Hecho de esa manera en todos los browsers da 8.
Por lo de la conversión, con esta herramienta desde la linea de comandos es sencillo
[url]http://v2v.cc/~j/ffmpeg2theora/[/url]

Saludos

Muchas gracias emprear. Ya estudiaré tu código (visto así a vuelapluma no lo entiendo), que creo es más sencillo que lo que acabo de hacer, que es lo siguiente:

El formulario del código que pasé antes lo escindí en 3 formularios: uno encierra los 2 primeros campos, el otro encierra el tag <embed> pero sin declarar yo ningún campo, el tercero encierra el resto de inputs (6 campos). Total que un alert(document.forms[i].length); 0<= i <= 2 me arroja lo esperado: 2, 1 y 6 campos. Suman 9 campos cuando yo he declarado en html 8 campos: evidentemente <embed> genera automáticamente un campo. Ver código abajo.

Bueno, con esta modificación, el código funciona bien en IE9, Chrome y FF (este último me hace descargar el plugin QuickTime para reproducir sonido, pero ese es otro tema).

Ahora voy a ponerme con tu sugerencia de uso de <audio>, a ver si puedo hacer que el usuario pueda elegir el file de sonido.

Gracias mil nuevamente.

Código HTML:

<body ONLOAD="calculo();">
…..
<table>
<tr>
<td> [B]<FORM ID="1">[/B]
<[B]INPUT[/B] NAME="boton1" TYPE="button" … />
<[B]INPUT[/B] NAME="boton2" TYPE="button" … />
[B]</FORM>[/B]
</td> 
… 
</tr>
…
<tr>  
…
<td>
[B]<FORM ID="2">[/B]
<embed src="AvCamelias.mp3" autostart="true" loop="true" width="280" height="42"></embed>
[B]</FORM>[/B]
</td>
</tr>
<tr>
<td…>
[B]<FORM ID="3">[/B]
<[B]INPUT[/B] SIZE="2" ID="Anioselec" VALUE="" />
<[B]INPUT[/B] NAME="boton3" TYPE="button" VALUE="CALCULAR" ONCLICK="calculo();" />
</td>
…
</tr>
…
<tr> 
<td> ttttt </td>
<[B]INPUT[/B] TYPE="hidden" NAME="m" VALUE="23" />
<[B]INPUT[/B] TYPE="hidden" NAME="n" VALUE="34" />
<[B]INPUT[/B] TYPE="hidden" NAME="p" VALUE="14" />
<[B]INPUT[/B] TYPE="hidden" NAME="senial" VALUE="0" />
[B]</FORM>[/B]
<td> jjjj </td> 
….
</table>
</body>