Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Etiquetas <audio> con comportamiento errático en web con selección de melodía.

Estas en el tema de Etiquetas <audio> con comportamiento errático en web con selección de melodía. en el foro de HTML en Foros del Web. Buenas tardes foreros, (Antes que nada digo: soy novato en esto, programo por hobby). Mi código de página web (para trabajar exclusivamente off-line, esto es, ...
  #1 (permalink)  
Antiguo 18/03/2013, 10:41
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 14 años, 3 meses
Puntos: 1
Etiquetas <audio> con comportamiento errático en web con selección de melodía.

Buenas tardes foreros,
(Antes que nada digo: soy novato en esto, programo por hobby).

Mi código de página web (para trabajar exclusivamente off-line, esto es, todos los archivos están en el HD del usuario) tiene 42 archivos de sonido para reproducir según elección de usuario con un desplegable <select><option>. Utilizo para eso la etiqueta <audio> (ya que hice muchas pruebas con <bgsound>, <embed> y <object>, y <audio> es la que mejor resultado me dió... buenmo, para ser precisos: es la única que me permite el control con JS). Los 42 archivos están en dos formatos: .mp3, y .ogg, este último para poder ser reproducido en Firefox).

Código:
<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
  <TITLE>...</TITLE>
  <meta http-equiv="Content-type" 
      content="text/html;charset=ISO-8859-1" />

<style type="text/css">...</style>

<script type="text/javascript">
/* FUNCIÓN QUE SELECCIONA EL ARCHIVO DE SONIDO EN FUNCIÓN DE ELECCIÓN <SELECT> DEL USUARIO. */
function rep(elaudio){
	var audios = new Array();
	audios=document.getElementsByTagName('audio');
	var i;
	for (i=0;i<audios.length;i++) {
		if (audios[i].id==elaudio){
			itocar=i;
		}
	}
	for (i=0; i<itocar; i++) {
		audios[i].pause();
	}
	for (i=itocar+1;i<audios.length;i++) {
		audios[i].pause();
	}
	audios[itocar].load(); // Esta instrucción, al parecer, hace funcionar todo bien en I.E.
	audios[itocar].play();
	document.forms[0].elements[9].value=itocar;
	document.images[29].src="pause.jpg";
	document.images[30].src="play2.jpg";
}
</script>

<script type="text/javascript">
/* FUNCIÓN QUE DA PAUSA Y PLAY AL ARCHIVO DE SONIDO EN REPRODUCCIÓN. 
LOS FILES .JPG SON IMÁGENES QUE ACTÚAN COMO BOTONES PARA DAR PAUSA O PLAY 
A LA MELODÍA QUE ESTÁ TOCANDO. */
function pauseplay(s){
	var audios = new Array();
	var i=document.forms[0].elements[9].value;
	audios=document.getElementsByTagName('audio');
	if(s==0){
		audios[i].pause();
		document.images[29].src="pause2.jpg";
		document.images[30].src="play.jpg";
	} else if(s==1){
		// audios[i].load();
		audios[i].play();
		document.images[29].src="pause.jpg";
		document.images[30].src="play2.jpg";
	}
} // Fin function pauseplay(s).
</script>
</HEAD>

<body onLoad="javascript:calculo();">

<table>        

<tr>  <!-- FILA 1 -->
...</tr>    
...
<!-- TOTAL 42 DEFINICIONES DE ARCHIVOS DE AUDIO -->
<audio autoplay loop id='sonido1'>
<source src="DanubioAzul.mp3" type="audio/mp3" />
<source src="DanubioAzul.ogg" type="audio/ogg" />
</audio>
<audio loop id='sonido2' preload="none">
<source src="Verdi-Aida-MarchaTriunfal.mp3" type="audio/mp3" />
<source src="Verdi-Aida-MarchaTriunfal.ogg" type="audio/ogg" />
</audio>
<audio loop id='sonido3' preload="none">
<source src="Mozart-LasBodasDeFigaro,obertura.mp3" type="audio/mp3"/>
<source src="Mozart-LasBodasDeFigaro,obertura.ogg" type="audio/ogg"/>
</audio>
...
<audio loop id='sonido42' preload="none">
<source src="EscInfanteríaInstrum-aguaracua.mp3" type="audio/mp3" />
<source src="EscInfanteríaInstrum-aguaracua.ogg" type="audio/ogg" />
</audio>

<tr bordercolor=000000>  <!-- FILA 4 -->
...
<td>
<a href="javascript:pauseplay(0);" title="música PAUSE"><IMG src="pause.jpg" ID="pause"></IMG></a>
<a href="javascript:pauseplay(1);" title="música PLAY"><IMG src="play2.jpg" ID="play"></IMG></a>
</td>

<td>
<select id="select" name="lista">
<option class="disab" value="0" disabled>CLÁSICA</option>
<option class="opcion" value="1" selected onClick="rep('sonido1');">Danubio Azul-J. Strauss (h)</option>
<option class="opcion" value="2" onClick="rep('sonido2');">Marcha Triunfal, Aida-Verdi</option>
<option class="opcion" value="3" onClick="rep('sonido3');">Bodas de Fígaro,obertura-Mozart</option>
...
<option class="opcion" value="42" onClick="rep('sonido42');">Escuela de Infantería</option>
</select>
</td>
</tr>

<input type="hidden" id="actual" value='0' /> <!-- Campo document.forms[0].elements[9] del FORM -->
...
</FORM>
...
...
</table>

</BODY>
</HTML>
El código (transcribo sólo la parte que creo interesa, ya que todo tiene más de 2000 líneas) funciona más o menos bien, pero tiene un comportamiento muy errático.

Problemas:

1. En I.E.9 y Opera: hay melodías que, seleccionadas por el usuario, a veces no comienzan a sonar, otras veces sí lo hacen. Los controles PLAY y PAUSE se comportan correctamente. Este comportamiento errático es más pronunciado en I.E. que en Opera.

2. En Chrome sólo reproduce la melodía por defecto (autoplay), pero no cambia a ninguna otra melodía ante la selección del usuario, sino que sigue tocando la melodía por defecto. Sí actúan correctamente los controles de PLAY y PAUSE programados con dos botones .jpg y comandados por la función pauseplay(s). Y esto no deja de ser una putada para mí, ya que Chrome es el navegador que prefiero para esta web, en razón de que la misma es básicamente un álbum de fotos familiar, y la nitidez de la presentación de fotos de este navegador es, por lejos, la mejor de los 4 navegadores.

3. Firefox es el que, al parecer, ofrece un comportamiento impecable: hace todo lo esperado.

(tanto Chrome, como Firefox y Opera deben de ser las últimas versiones, porque me las he bajado hace unas 3 semanas).

Pues eso, el problema es el comportamiento impredecible de I.E. y Opera, y el que Chrome no haga caso a la selección de usuario.

Hace mes y medio que estoy con este problema, me he empollado dos libros de HTML5, varios docs de Internet, pero no encuentro razones.

Pienso que, quizás, la declaración de lenguaje arriba del encabezamiento tenga algo que ver, no sé...

He bajado de Internet archivos que no se reproducían por otros (pensando en que podrían tener algún tipo de corrupción), y los problemas siguen. EL GRAN PROBLEMA ES LA IMPREDECIBILIDAD EN LA REPRODUCCIÓN: a veces la página hace una cosa y otras, bajo las mismas circunstancias, otra.

Reconozco la complejidad de la nueva etiqueta <audio>: tiene muchísimas propiedades, métodos, etc, etc. Me las he revisado todas, pero mi cerebro de principiante no me da, lo reconozco.

Rogaría alguna opinión de algún entendedor de este tema.

Desde ya, muchas gracias.
  #2 (permalink)  
Antiguo 18/03/2013, 12:00
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 8 meses
Puntos: 131
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Buenos dias

En la documentacion de html5 dice

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.

El texto anterior nos dice en pocas palabras

Una vez que el documento a cargado, cualquier modificacion a los elementos <source> no tiene efecto, si quieres cambiar la cancion/video se debe hacer a travez del atributo src de los elementos media(audio/video)

Asi que debes usar el atributo src del elemento <audio>

Tambien te recomendaria que no uses JQUERY te lo digo por experiencia propia, me daba problemas en chrome

salu2
  #3 (permalink)  
Antiguo 18/03/2013, 12:17
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Muchas gracias hackjose.

Dime, por favor, a qué documentación de HTML5 te refieres (si me puedes pasar un link o referencia, gracias).

Voy a probar con lo que me dices (actuar sobre el src). De todos modos, siendo así, no me explico por qué la mayoría de las veces funciona mi código.

Dices que "una vez que el documento ha cargado..." (supongo que te refieres al file .mp3): pues entonces también probaré con hacer un "audios(x).unload()" de la pieza que está cargada (no sé cómo será esta instrucción, pero creo que hay una), y luego un audios(y).load() de la que el usuario selecciona, como hago en el código. Es probable que esto funcione: yo simplemente hago un audios(x).pause(), y probablemente esto sea la razón del fallo.

Con relación a jQuery: sólo sé que es una biblioteca... no la empleo en mi código por no saber lo que es.

Gracias nuevamente, ya reportaré los resultados.
  #4 (permalink)  
Antiguo 18/03/2013, 12:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Cita:
Iniciado por Profesor_Lambetain Ver Mensaje
...
Dime, por favor, a qué documentación de HTML5 te refieres (si me puedes pasar un link o referencia, gracias).
...
Ya la encontré: http://www.w3.org/TR/html5/embedded-...t-0.html#audio
Gracias.
  #5 (permalink)  
Antiguo 18/03/2013, 13:02
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 8 meses
Puntos: 131
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Cita:
Iniciado por profesor_lambetain Ver Mensaje
ok salu2
  #6 (permalink)  
Antiguo 18/03/2013, 14:14
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Cita:
Iniciado por hackjose Ver Mensaje
Tambien te recomendaria que no uses JQUERY te lo digo por experiencia propia, me daba problemas en chrome
No debería utilizar jQuery, o cualquier otra librería si la solución del problema puede conseguirse con apenas unas líneas de Javascript. Jquery no tiene más o menos problemas con Chrome que los que pueda ocasionar su uso incorrecto

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 20/03/2013, 06:32
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Buenos días,
Después de "sudar mucho la camiseta", llego al siguiente código que funciona perfecto en I.E.9 y Firefox, de manera reproducible, esto es, SIEMPRE BIEN.
En Chrome me tengo que conformar con la melodía de defecto (Danubio Azul, porque el desplegable <select><option> no tiene efecto con mi código en este navegador).
En Opera no hace nada de nada: ni suena la de defecto ni actúa el desplegable... la sección de sonido queda muerta.

Agradeceré algún/a valiente/a que se artreva a dar un diagnóstico de los fallos de Chrome y Opera. Gracias:

Código:
...
<SCRIPT TYPE="text/javascript">
...
// Detección del navegador del usuario.
var navegador;
if(navigator.userAgent.indexOf('MSIE')!=-1) {
	navegador="MSIE";
} else if (navigator.userAgent.indexOf('Chrome')!=-1) {
	navegador="Chrome";
} else if (navigator.userAgent.indexOf('Firefox')!=-1) {
	navegador="Firefox";
} else if (navigator.userAgent.indexOf('Opera')!=-1) {
	navegador="Opera";
}
// Carga de la melodía por defecto.
var audios = document.getElementsByTagName('audio');
if (navegador=="MSIE" || navegador=="Opera" || navegador=="Chrome") {
	audios[0].src="musica/DanubioAzul.mp3";
	audios[0].play();
} else if (navegador=="Firefox") {
	audios[0].src="musica/DanubioAzul.ogg";
	audios[0].play(); 
}
...
// FUNCIÓN QUE SELECCIONA EL ARCHIVO DE SONIDO EN FUNCIÓN DE ELECCIÓN <SELECT> DEL USUARIO.
function rep(z){
	var audios=document.getElementsByTagName('audio');
	audios[0].pause();
	// Detección del navegador del usuario.
	var navegador;
	if(navigator.userAgent.indexOf('MSIE')!=-1) {
		navegador="MSIE";
	} else if (navigator.userAgent.indexOf('Chrome')!=-1) {
		navegador="Chrome";
	} else if (navigator.userAgent.indexOf('Firefox')!=-1) {
		navegador="Firefox";
	} else if (navigator.userAgent.indexOf('Opera')!=-1) {
		navegador="Opera";
	} // Fin if.
	if(navegador=="MSIE" || navegador=="Opera" || navegador=="Chrome") {
		switch (z){
			case '1':
				audios[0].src="musica/DanubioAzul.mp3";
				break;
			case '2':
.....
...
			case '42':
				audios[0].src="musica/EscInfanteríaInstrum-aguaracua.mp3";
				break;
		} // Fin switch.
		audios[0].play();
		document.images[29].src="pause.jpg";
		document.images[30].src="play2.jpg";
	} // Fin if.
	if(navegador=="Firefox") {
		switch (z){
			case '1':
				audios[0].src="musica/DanubioAzul.ogg";
				break;
			case '2':
.....
...
			case '42':
				audios[0].src="musica/EscInfanteríaInstrum-aguaracua.ogg";
				break;
		} // Fin switch.
		audios[0].play();
		document.images[29].src="pause.jpg";
		document.images[30].src="play2.jpg";
	} // Fin if.
} // Fin function rep(z).
// FUNCIÓN QUE DA PAUSA Y PLAY AL ARCHIVO DE SONIDO EN REPRODUCCIÓN.
function pauseplay(s){
	var audios = new Array();
	var i=document.forms[0].elements[9].value;
	audios=document.getElementsByTagName('audio');
	if(s==0){
		audios[i].pause();
		document.images[29].src="pause2.jpg";
		document.images[30].src="play.jpg";
	} else if(s==1){
		audios[i].play();
		document.images[29].src="pause.jpg";
		document.images[30].src="play2.jpg";
	}
} // Fin function pauseplay(s).
<SCRIPT>

<html>
<head>
...
</head>
<body>
...
<audio autoplay loop id='sonido1'></audio>
...
<select id="select" name="lista">  
<option class="disab" value="0" disabled>CLÁSICA</option>
<option class="opcion" value="1" selected onClick="rep('1');">Danubio Azul-J. Strauss (h)</option>
<option class="opcion" value="2" onClick="rep('2');">Marcha Triunfal, Aida-Verdi</option>
.....
<option class="opcion" value="42" onClick="rep('42');">Escuela de Infantería</option>
</select>
...
</body>
</html>
  #8 (permalink)  
Antiguo 20/03/2013, 12:40
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Sin entrar en mucho análisis, ya tenés un problema con el evento onclick sobre un option.
Date una vuelta por
http://www.forosdelweb.com/f13/codig...horme-1041003/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 21/03/2013, 02:50
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Cita:
Iniciado por emprear Ver Mensaje
Sin entrar en mucho análisis, ya tenés un problema con el evento onclick sobre un option.
Date una vuelta por
http://www.forosdelweb.com/f13/codig...horme-1041003/

Saludos
Ok, muchas gracias emprear.

Modificando el código último que dí, sólo su etiqueta <select>, se solucionó el problema de Chrome, y ahora funciona de cine:

Código:
...
<select id="select" name="lista" onChange="chr=String(document.forms[0].elements[8].value);if(navigator.userAgent.indexOf('Chrome')!=-1){rep(chr);}">  
<option class="disab" value="0" disabled>CLÁSICA</option>
<option class="opcion" value="1" selected onClick="rep('1');">Danubio Azul-J. Strauss (h)</option>
<option class="opcion" value="2" onClick="rep('2');">Marcha Triunfal, Aida-Verdi</option>
.....
(se entiende que el campo elements[8] del formulario es el valor que adopta <select> según el <option> seleccionado).

Ahora persiste el problema que Opera no responde a este código. Yo sospecho que este browser ignora las instrucciones de JS que usan el atributo "src" del elemento <audio>... ¿otro valiente que se atreva a diagnosticar?

Hombre, para Opera podría ver la forma de repetir/redirigir_a el código original (ver mi #1), pero éste tiene cierta impredecibilidad sobre Opera, además de que ensuciaría mucho el código (mi mente de principiante me dicta redirigir a otra página cuando se detecte Opera como browser, pero esto es una solución "a lo bruto").

Gracias anticipadas.
  #10 (permalink)  
Antiguo 21/03/2013, 03:37
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Etiquetas <audio> con comportamiento errático en web con selección de melo

Cita:
Iniciado por Profesor_Lambetain Ver Mensaje
...

Ahora persiste el problema que Opera no responde a este código. Yo sospecho que este browser ignora las instrucciones de JS que usan el atributo "src" del elemento <audio>... ¿otro valiente que se atreva a diagnosticar?

...
Bueno, pasó lo siguiente: pensé que Opera soportaba el formato de audio .mp3... ¡pues no: soporta el .ogg! Así que los oportunos sencillos cambios en el código han solventado totalmente los problemas reportados.

CONCLUSIÓN: EL CÓDIGO PERMITE (AUNQUE CON POSIBILIDADES DE OPTIMIZACIÓN EN LA EXTENSIÓN DEL CÓDIGO) REPRODUCIR VARIOS ARCHIVOS (UNO A LA VEZ) DE AUDIO, A ELECCIÓN DEL USUARIO (desplegable <select><option>). Código válido para las últimas versiones de I.E.(9), Chrome, Firefox y Opera.

Gracias a todos por vuestra colaboración. Saludos.

Etiquetas: audio, comportamiento, css, etiqueta, etiquetas, html5, javascript, navegador, navegadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:48.