Hola todos :
brusjc : Tengo los mismos reparos con el Flash. Y no puedo creer que no haya un objeto de HTML para manejar con javascript que nos deje escuchar un *.mp3.
Estaba por buscar aquí, en el Foro, pero seguro que ya lo hiciste antes de preguntar. No voy a perder el tiempo.
Revisé viejos apuntes, y todo lo que tengo es para
IExplorer; algún ejemplo anda en
Firefox; pero el más difícil es
Opera, que al cargar se dispara de una con la música, y no hay cómo pararlo.
Un truco con la etiqueta
bgsound o
embed era abrirla con su página en un
frame oculto, y con unos botones JS cambiabamos la ruta del marco. Cada página tenía una ruta distinta, por supuesto.
El método que funciona —pero es una carnicería— es el que propuso
trasgukabi, ocultando el reproductor con
hidden y/o CSS. Como la botonera no se puede manejar desde un JS, lo que hacemos es "borrar" o "escribir" todo el reproductor dentro de un
div para simular el "stop" y el "play". Aunque en
Opera, como dije, hay que recargar la página.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<title>SONIDO EN PÁGINA.</title>
<script type="text/javascript">
/* 'canciones/' será la ruta a la carpeta donde están los *.mp3 */
var aparato1 = '<embed id="repr" hidden src="canciones/'
var aparato2 = '" align="baseline" width="68" height="25" autostart="true" loop="false">';
function musica(T,mus){
document.getElementById('caja').innerHTML = aparato1+ mus +aparato2;
document.getElementById('play').style.display = "none";
document.getElementById('stop').style.display = "inline";
document.getElementById('stop').value = "Stop : " + T.value;
}
function silencio(){
document.getElementById('stop').style.display = "none";
document.getElementById('play').style.display = "inline";
document.getElementById('caja').innerHTML = "";
if(navigator.userAgent.indexOf("Opera") != -1) history.go(0);
}
</script>
<style type="text/css">
#botonera {text-align: center; }
#caja {overflow:hidden; position:absolute; }
#play input {background-color: #ccffcc; color: #006600;
border-color: #008000; display: inline; font-weight: bold; }
#stop {background-color: #ffcccc; color: #660000;
border-color: #800000; display: none; font-weight: bold; }
</style>
</head><body>
<h2>Botón para música. </h2>
<div id="caja"></div>
<p id="botonera"><span id="play" style="position:relative">
<input type=button onclick="musica(this,'tema01.mp3')"
value="Sonido 1">
<input type=button onclick="musica(this,'tema02.mp3')"
value="Sonido 2">
</span>
<input id="stop" type="button"
onclick="silencio()" value="Stop" >
</p>
</body>
</html> El mayor inconveniente es cuando ese reproductor que aparece en el
browser no acepta MP3. Me pasó con un
QuickTime abierto en
Chrome y
Firefox. Pero debe ser un tema de configuración. Supongo. Si alguien sabe qué hay que cambiar para que los abra, nos avisa.