Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Varios reproductores en un mismo documento

Estas en el tema de Varios reproductores en un mismo documento en el foro de Frameworks JS en Foros del Web. Hola a todos. Lo primero pedir disculpas por si elegí el subforo equivocado, dudaba entre el de HTML5 y este, pero el ser el js ...
  #1 (permalink)  
Antiguo 05/10/2012, 15:22
 
Fecha de Ingreso: octubre-2012
Mensajes: 11
Antigüedad: 8 años
Puntos: 0
Varios reproductores en un mismo documento

Hola a todos. Lo primero pedir disculpas por si elegí el subforo equivocado, dudaba entre el de HTML5 y este, pero el ser el js el que me presenta los mayores problemas he decidido postear aquí. Si hay algún problema ruego a los mods que lo muevan a donde gusten

Bien, al lío. Ando dando mis primeros pasos en esto del desarrollo web haciéndole una página personal a un colega músico. Tenemos un home con enlaces a tres secciones, y la idea era que junto a estos enlaces apareciese un botón de play para escuchar una muestra de cada sección. Para ello googlee hasta encontrar un ejemplo sencillo en el que con HTML5 y algo de Javascript hacían un reproductor sencillo que constaba sólo de un botón de play que al clicar reproducía una pista de audio, cambiándose a su vez el icono de play por otro de pause. Sin más.

El problema es cuando intento modificar el archivo .js para los otros plays, que no tengo ni idea de que instancias debo cambiar para que me funcione y me entran en conflicto. Os dejo el código html y javascript que funciona para un solo play, a ver si alguien me podría decir qué hacer para hacer funcionar varios plays en un mismo documento. Gracias por adelantado.

html:
Código:
<li class="posplay1">
                  <a href="#" id="play" class="audio_control">
                  <img src="imagenes/web/play_index.png" width="36" height= "36" 
                   alt="play" border="0"></a>
                  <a href="#" id="pause" class="audio_control" style="display:none">      
                  <img src="imagenes/iconos/pause_plat.png" width= "46"
                  height="46" alt="pause" border="0"></a>
                  <audio id="player" preload="auto" >
	          <source src="audio/jorge_salan_la_lluvia_quedo_atras.mp3" />
	          Si tuviésemos la fuente en ogg, la pondríamos aquí 
                  </audio>  
            </li>
Js:
Código:
var player = false;
var canvas = false;
var context = false;
var paused = false;







var pause = function(){
	//Pausamos la reproducción
	player.pause();
	paused = true;

	//Escondemos el pause y mostramos el play
	$('#pause').hide(); $('#play').show();
}

var play = function(){
	//Iniciamos la reproducción
	player.play();
	paused = false;

	//Escondemos el play y mostramos el pause
	$('#play').hide(); $('#pause').show();
}


//
var init = function(){
	//Inicializamos el player
	player = document.getElementById('player');

	//Asociamos eventos a los botones de play y pause
	$('#play').click(play);
	$('#pause').click(pause);
	$('#volUp').click(function() { addVol(0.1) } );
	$('#volDown').click(function(){ addVol(-0.1) });

	

	
};

$(document).ready(function(){
	$('.audio_control').click(function(event){
		event.preventDefault(); //Evitamos que se mueva la ventana al hacer clic en los enlaces
	});

	$('#player').bind('loadedmetadata', init); //Lanzamos la función init cuando se hayan cargado los metadatos

});
// JavaScript Document
  #2 (permalink)  
Antiguo 08/10/2012, 06:38
 
Fecha de Ingreso: octubre-2012
Mensajes: 11
Antigüedad: 8 años
Puntos: 0
Respuesta: Varios reproductores en un mismo documento

Nadie me puede echar una mano??

Etiquetas: funcion, html, js
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 04:57.