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.