[SOLUCIONADO] >> Apagar/encender música de fondo <<

seoista · #1 (**permalink**) 12/08/2004, 06:27

Hola a tod@s.
NOTA: Cómo no sé donde va esta pregunta, la pongo aquí.
Si no corresponde, que los moderadores la cambien
¡¡¡Gracias!!!
Mi pregunta es:

¿Cual sería el código para poner música de fondo (esto lo sé), pero que se pudiera ENCENDER y APAGAR haciendo click en una misma IMAGÉN (no dos imágenes diferentes) y que estén posicionadas en el mismo sitio (o sea, que una esté encima de la otra, ocupando el mismo sitio) ... ?

He estado mirando la página de caricatos (¡¡¡Hola

!!!) www.sucaricatura.com, a la izquierda-abajo donde está el piano (eso es lo que quiero), pero no logro descifrar de cual es el código (me lio, ¡torpe, torpe!

que soy

y no doy para más

).

Gracias a tod@s y un abrazo

caricatos · #2 (**permalink**) 12/08/2004, 12:13

Hola seoista:

Justamente mi primera participación en estos foros, era respondiéndo esa misma pregunta formulada en esa ocasión por KarlanKas (¡Hola

!)

Sencillamente se trata de un frame oculto en donde al pinchar en el piano se carga una página con un fondo musical cambiándose la imágen por el pianito, y al volver a pinchar se cambia la imagen otra vez cargándose otra página sin fondo musical...

Si no quieres usar marcos propuse hace un tiempo un tema sobre precarga de sonidos (supongo que lo podrás buscar) y el código es bastante más complejo... o tal vez la página de las postales que hay aquí: http://www.pepemolina.com/postales

Intenta implementarlo (sé que puedes) y si tienes problemas avisa...

Saludos

seoista · #3 (**permalink**) 13/08/2004, 03:48

Gracias caricatos, lo miraré y ya te diré.

Saludos

seoista · #4 (**permalink**) 13/08/2004, 05:59

Cita:

Iniciado por caricatos

Hola seoista:

Justamente mi primera participación en estos foros, era respondiéndo esa misma pregunta formulada en esa ocasión por KarlanKas (¡Hola

!)

¡Esta no la encuentro!.

Cita:

Iniciado por caricatos

Si no quieres usar marcos propuse hace un tiempo un tema sobre precarga de sonidos (supongo que lo podrás buscar) y el código es bastante más complejo... o tal vez la página de las postales que hay aquí: http://www.pepemolina.com/postales

Intenta implementarlo (sé que puedes) y si tienes problemas avisa...

¿Te refieres a este?:

Código:

<script type="text/javascript">
var sones;

function _desactivar()	{
	this.sonido.innerHTML = "";
}

function _activar()	{
	var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' style='display: inline'></embed>";
	this.sonido.innerHTML = son;
}

function preSonidos()	{
	this._entradas = preSonidos.arguments;
	this.total = this._entradas.length;
	this.son = new Array(this.total);
	for (var i = 0; i < this.total; i ++)	{
		this.son[i] = document.createElement("embed");
		this.son[i].src = this._entradas[i];
		this.son[i].autostart = false;
		this.son[i].style.display = "none";
		document.body.appendChild(this.son[i]);
	}
	this.sonando = false;
	this.incrustado = false;
	this.activar = _activar;
	this.desactivar = _desactivar;
	this.sonido = document.createElement("div");
	document.body.appendChild(this.sonido);
}

function ini()	{
	sones = new preSonidos('celtic0.mid', 'celtic1.mid', 'celtic2.mid', 'celtic3.mid', 'Starway_to_Heaven.mp3');
}
</script> 

y el body de ejemplo:

<body onload="ini();">
<button onclick="sones.activar(0)">celtic0.mid</button>
<button onclick="sones.activar(1)">celtic1.mid</button>
<button onclick="sones.activar(2)">celtic2.mid</button>
<button onclick="sones.activar(3)">celtic3.mid</button>
<button onclick="sones.activar(4)">Starway_to_Heaven.mp3</button>
<button onclick="sones.desactivar()">desactivar</button>
<br />
</body>

Pero yo lo quiero sin button (lo que he puesto en rojo), sino con un solo sónido y una imagen para apagar y encender, cómo tienes en tu pàgina (www.sucaricatura.com - EL PIANO).

Perdona que te moleste tanto.

Saludos caricatos

caricatos · #5 (**permalink**) 13/08/2004, 09:46

Hola otra vez:

El tema que no encuentras es este: http://www.forosdelweb.com/f13/intercambiar-sonidos-para-que-no-solapen-69783/
... y dice lo que te dije antes, pero tal como dije, se trata de usar frames...

Con respecto al otro código, es fácil adaptarlo en una imagen:

function ini() {
sones = new preSonidos('tuMusica.mid');
}

... y si usas las imágenes: activo.gif e inactivo.gif:

<img src=inactivo.gif onclick="if (this.src == 'activo.gif') {this.src = 'inactivo.gif'; sones.desactivar()} else {this.src = 'activo.gif'; sones.activar(0)}" />

Saludos

seoista · #6 (**permalink**) 13/08/2004, 23:54

Otra vez aquí caricatos.

He puesto este código:

Código:

<html>
<head>

<title>#</title>

<script type="text/javascript">
var sones;

function _desactivar()	{
	this.sonido.innerHTML = "";
}

function _activar()	{
	var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' 

style='display: inline'></embed>";
	this.sonido.innerHTML = son;
}

function preSonidos()	{
	this._entradas = preSonidos.arguments;
	this.total = this._entradas.length;
	this.son = new Array(this.total);
	for (var i = 0; i < this.total; i ++)	{
		this.son[i] = document.createElement("embed");
		this.son[i].src = this._entradas[i];
		this.son[i].autostart = false;
		this.son[i].style.display = "none";
		document.body.appendChild(this.son[i]);
	}
	this.sonando = false;
	this.incrustado = false;
	this.activar = _activar;
	this.desactivar = _desactivar;
	this.sonido = document.createElement("div");
	document.body.appendChild(this.sonido);
}

function ini() {
sones = new preSonidos('grease.mid');
}

</script> 

</head>

<body onload="ini();">

<img src=desactivar.gif onclick="if (this.src == 'activar.gif') {this.src = 'desactivar.gif'; sones.desactivar()} else 

{this.src = 'activar.gif'; sones.activar(0)}" />

</body>
</html>

Es lo que quiero y funciona ... ¡pero! ...

1.- Al abrir la página comienza la música y la imagen que se vé es "PARAR MUSICA" (CORRECTO).

2.- Al hacer click en la imagen "PARAR MUSICA", la para, ... pero ... ¡sólo durante unos segundos! y sigue sonando, y aunque continue pinchando la imagen que está en ese momento ("OIR MUSICA"), ... no hace "ná de ná" ..., la imagen no cambia y la musica continua indefinidamente (INCORRECTO]).

Vaya coñazo que te estoy dando, pero, es que no me funciona bien.

Muchas gracias por las molestias que te estoy causando.

Hasta luego

caricatos · #7 (**permalink**) 14/08/2004, 02:35

Hola otra vez:

Con qué navegador lo has probado... me parece que con opera no va bien...

Cuando pueda poner los altavoces lo pruebo... de todos modos te paso un enlace con otro código parecido: http://www.pepemolina.com/sonidos/index5.html

Saludos

seoista · #8 (**permalink**) 14/08/2004, 03:10

Hola de nuevo caricatos y gracias por las molestias que te estás tomando.

Cita:

Iniciado por caricatos

Con qué navegador lo has probado... me parece que con opera no va bien...

Con "Internet Eexplorer 6.0", no uso otro.

Cita:

Iniciado por caricatos

Cuando pueda poner los altavoces lo pruebo...

Veo que han cortado el servidor (www.iespana.es). ¡Estarán en mantenimiento!.

Cita:

Iniciado por caricatos

de todos modos te paso un enlace con otro código parecido: http://www.pepemolina.com/sonidos/index5.html

Lo probaré también y ya te contaré.

Ruego perdones mis molestias, soy un :-p plasta :-p .

Mientras tanto, recibe un abrazos

caricatos · #9 (**permalink**) 14/08/2004, 04:05

Hola otra vez:

Creo que sé la razón de que no funcione...

Al comparar el valor del src de una imagen el navegador, aunque se le dé una ruta corta, te devuelve la ruta completa.

En vez de usar src, prueba con otra cosa, incluso puedes crearte un atributo o usar una variable global...

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar()} else
{activo = 'si'; sones.activar(0)}" />

y en otra parte de la página inicializar la variable activo:
var activo = "si"

Saludos

seoista · #10 (**permalink**) 14/08/2004, 05:49

caricatos, otra vez el :-p :-p :-p

He tardado un poco en contestar porque he estado probando de distintas formas, pero ... psee ... , no lo entiendo bien. Hay que machacármelo

.

Te digo:

Cita:

Iniciado por caricatos

Veo que solo hay una imagen (desactivar.gif)

Le falta la otra imagen (activar.gif)

(las he puesto en otro servidor para que la veas, ya que sigue sin funcionar w w w.iespana.es).

Quiero que cuendo esté funcionando la música, aparezca la imagen "PARAR MUSICA" y cuando pulse esta, se pare y aparezca la imagen "OIR MUSICA", para que esta vuelva a comenzar. --> (no sé si me he explicado bien)

Cita:

y en otra parte de la página inicializar la variable activo:
var activo = "si"

¿Esto donde lo pongo?. ¿Aquí? (lo he señalado en rojo):

<html>
<head>

<title>#</title>

<script type="text/javascript">
var sones;

function _desactivar() {
this.sonido.innerHTML = "";
}

function _activar() {
var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' style='display: inline'></embed>";
this.sonido.innerHTML = son;
}

function preSonidos() {
this._entradas = preSonidos.arguments;
this.total = this._entradas.length;
this.son = new Array(this.total);
for (var i = 0; i < this.total; i ++) {
this.son[i] = document.createElement("embed");
this.son[i].src = this._entradas[i];
this.son[i].autostart = false;
this.son[i].style.display = "none";
document.body.appendChild(this.son[i]);
}
this.sonando = false;
this.incrustado = false;
this.activar = _activar;
this.desactivar = _desactivar;
this.sonido = document.createElement("div");
document.body.appendChild(this.sonido);
}

function ini() {
sones = new preSonidos('grease.mid');
}
var activo = "si" //------> (DIME SI VA AQUI o DONDE)

</script>

</head>

<body onload="ini();">

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar()} else
{activo = 'si'; sones.activar(0)}" />
<br />

</body>
</html>

Te diré que funciona bastante bien, pulsando en "PARAR MUSICA" se para la música y pulsando otra vez "PARAR MUSICA" (ya que no cambia a "OIR MUSICA"), vuelve a oirse (TODO ESTO CORRECTO). Menos el cambio de imagen.

Un abrazo

y paciencia conmigo.

P.D.: Joder, que "coñazo" te estoy dando

caricatos · #11 (**permalink**) 14/08/2004, 10:48

Hola otra vez:

Se trata de volver a poner el this.src...

Lo quité en el script por hacer otra comparación y usar una variable nueva... tan solo tienes que poner:

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar(); this.src = 'sactivar.gif'} else
{activo = 'si'; sones.activar(0); this.src = 'desactivar.gif'}" />

Saludos

seoista · #12 (**permalink**) 14/08/2004, 13:27

Vuelvo otra vez

.

Cita:

Iniciado por caricatos

Esto es una pregunta tonta (como todas las mías), pero la "s" que está en rojo sobra, ¿verdad?.

Bueno, mañana lo miraré y diré como me ha ido (ahora estoy en mi trabajo, de 0900 de la noche hasta las 0900 de mañana).

¡Esperemos que ahora funcione!.

Hasta mañana y cierro

.

Un abrazo

seoista · #13 (**permalink**) 15/08/2004, 01:58

Hola caricatos.

Con este código: (

) (

)

Código:

<html>
<head>

<title>Musica</title>

<script type="text/javascript">
var sones;

function _desactivar()	{
	this.sonido.innerHTML = "";
}

function _activar()	{
	var son = "<embed src='" + this.son[_activar.arguments[0]].src + "' autostart='true' hidden='true' style='display: inline'></embed>";
	this.sonido.innerHTML = son;
}

function preSonidos()	{
	this._entradas = preSonidos.arguments;
	this.total = this._entradas.length;
	this.son = new Array(this.total);
	for (var i = 0; i < this.total; i ++)	{
		this.son[i] = document.createElement("embed");
		this.son[i].src = this._entradas[i];
		this.son[i].autostart = false;
		this.son[i].style.display = "none";
		document.body.appendChild(this.son[i]);
	}
	this.sonando = false;
	this.incrustado = false;
	this.activar = _activar;
	this.desactivar = _desactivar;
	this.sonido = document.createElement("div");
	document.body.appendChild(this.sonido);
}

function ini() {
sones = new preSonidos('grease.mid');
}
var activo = "si"

</script> 

</head>

<body onload="ini();">

<img src=desactivar.gif onclick="if (activo == 'si') {activo = 'no'; sones.desactivar(); this.src = 'activar.gif'} else 
{activo = 'si'; sones.activar(0); this.src = 'desactivar.gif'}" />

</body>
</html>

Lo que pasa es que NO ABRE LA PAGINA CON LA MUSICA YA FUNCIONANDO (que es lo que me interesaría), hay que pinchar primero en la imagen y después SI va bien, así como los cambios de imagenes.

Muchas gracias por la paciencia que estas teniendo ... con este "zoquete".

Un abrazo

caricatos · #14 (**permalink**) 15/08/2004, 03:31

Hola otra vez:

Para que suene al principio habría que hacer pequeñas modificaciones...

seoista · #15 (**permalink**) 15/08/2004, 06:16

Ahora "SI" caricatos.

¡¡¡ Muchisiiiiisimas gracias !!!

Cómo ya sabes, aquí tienes un amigo para lo que quieras
(¡¡¡ menos para que te proporcione códigos !!!)

Un abrazo y

caricatos · #16 (**permalink**) 16/08/2004, 03:51

¡Hasta otra!

Cizeron · #17 (**permalink**) 20/10/2004, 06:15

Despues de tantos cambios en el codigo... ¿como queda al final?

Gracias.

robert0907 · #18 (**permalink**) 09/10/2008, 22:51

chamos de verdad son unos craneos en cuanto a codigo y demas pero dejenme decirles es demaciado para lo que realmente se nesecita que es parar y poner play ala musica de fondo si quieren que esta interactue que se cambie cada ves que entre un usuario es valido todo ese scrip pero en fin a cada quien lo suyo de mi parte este es mi aporte .

<HTML>
<HEAD>
</HEAD>
<BODY onLoad="document.all.sound.src='ub-40.mp3'">
<bgsound id='sound'>
<FORM>
<INPUT TYPE=BUTTON VALUE="SHHHHHHHHHHHHH!!!!!!" onClick="document.all.sound.src=null">
<INPUT TYPE=BUTTON VALUE="musica!!!!!!" onClick="document.all.sound.src='ub-40.mp3'">
</FORM>
</body>
</html>

robert0907 · #19 (**permalink**) 09/10/2008, 23:17

Chamos de verdad son unos craneos en cuanto a codigo y demas pero dejenme decirles es demaciado para lo que realmente se nesecita que es parar y poner play ala musica de fondo si quieren que esta interactue que se cambie cada ves que entre un usuario es valido todo ese scrip pero en fin a cada quien lo suyo de mi parte este es mi aporte .

lo de la imagen , bueno la verdad es que en este momento estoy full

lo que te puedo decir es que es facil te dare una idea
una tabla con el borde 0 en ella una imagen
la tabla que tenga onmuseover(funcion javascrip X) y onmouseout(llaman a una funcion javasecrip Y) donde en la funcion cuando entras prende la musica y cuando sales nullo cuando entras en la segunda ves null cuando sales apaga la musica no es de mucha ayuda pero es para que tengas mas o menos una idea.

esto es lo de la musica

HTML>
<HEAD>
</HEAD>
<BODY onLoad="document.all.sound.src='ub-40.mp3'">
<bgsound id='sound'>
<FORM>
<INPUT TYPE=BUTTON VALUE="SHHHHHHHHHHHHH!!!!!!" onClick="document.all.sound.src=null">
<INPUT TYPE=BUTTON VALUE="musica!!!!!!" onClick="document.all.sound.src='ub-40.mp3'">
</FORM>
</body>
</html>

caricatos · #20 (**permalink**) 10/10/2008, 00:20

Hola:

robert0907: fíjate que el tema es de hace más de 4 años. Por eso lo cierro, siempre puedes abrir temas nuevos y referenciar los viejos.

Sobre tu aporte, parece que solo pruebas tus códigos con explorer, ya que tanto document.all, como el tag bgsound son para ese navegador... aunque sea el más usado, cada vez hay más usuario de firefox, safari y el nuevo chrome... y tu código en esos navegadores no funciona.

Saludos