Abrir reproductor en ventana nueva mediante javascript

Necesitaba que un reproductor basado en jQuery se cargase en un popup y desapareciese de la ventana original para que el usuario pudiese navegar por la página y seguir escuchando las canciones sin interrupción.

Decidí usar variables de sesión. En la página original condicioné que se mostrase el reproductor a si la siguiente variable era falsa:


if Session("ventana_reproductor_abierta") = false then

...

end if


Al reproductor le añadí un enlace y usé jQuery para enlazarle el evento.


//Busco el enlace al que hay que añadirle el evento click.

var botonReproductorVentanaNueva = $('#columnaUno #reproductor-ventana-nueva');

botonReproductorVentanaNueva.click(function(){

abrePopup('carga_reproductor_ventana.asp','Titulo',300,400);


});

function abrePopup(url,titulo,h,w){

newwindow=window.open(url,titulo,'height=' + h + ',width=' + w);
if (window.focus) {newwindow.focus()}
return false;

}


El script ASP 'carga_reproductor_ventana.asp' se asegura de establecer la variable de sesión a verdadero, de manera que al recargarse la página original no se muestre el reproductor:


Session("ventana_reproductor_abierta") = true


Ahora viene la parte difícil. Necesitamos que cuando la ventana abierta se cierre, se devuelva la variable de sesión a falso y se recargue la página que lanzó el popup. Para ello necesitamos una función poco documentada llamada window.onbeforeunload que se lanza cuando uno cierra la ventana. Además necesito llamar a otro script ASP mediante AJAX que se encargará de devolver la variable de sesión al valor adecuado.


//Funciones para el reproductor cargado en un popup.

$(document).ready(function(){

//Controlo el evento que se dispara cuando intenta quitar la página.

window.onbeforeunload = function() {

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cierra_ventana_reproductor.asp"

});

window.opener.location.reload();


}

});


Como se ve, window.opener permite acceder a la ventana que llamó al popup, y location.reload() recarga la página. El script 'cierra_ventana_reproductor.asp' establece la variable de sesión al valor necesario.


<%

Session("ventana_reproductor_abierta") = false

%>

Guardar una cuenta de reproducciones usando AJAX en ASP

Primero localizamos el botón de play del reproductor y asociamos una función al evento click:


var botonPlay = $('#player_play_archivos');

$(botonPlay).click(function(){

$('#jquery_jplayer').play();

//Necesito los datos de la canción que se está escuchando en este momento.

almacenaReproduccion();

});


La función almacenaReproduccion() coge el nombre del archivo (en el ejemplo, la ruta completa), y la envía por AJAX al servidor.


function almacenaReproduccion(){


var cancion = myPlayList[playItem].filename;

//Los dos otros datos que necesito guardar son el id de la sesión y la fecha y hora
// actual, pero los recojo en el servidor.

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cuenta_reproduccion.asp",
data: "archivo=" + myPlayList[playItem].filename,

});


}


Como se ve, se llama a un archivo llamado 'cuenta_reproduccion.asp'. En el servidor añado el ID de la sesión actual y la fecha y la hora en la que se ha reproducido el archivo.



dim archivo
archivo = LimpiarRequest(Request("archivo"))

dim intCurrentPos, intFileNamePos

'Cojo el nombre del archivo encontrando la última barra
Do

intCurrentPos = InStr(intCurrentPos + 1, archivo, "/", vbTextCompare)
If intCurrentPos <> 0 then
intFileNamePos = intCurrentPos
else
intFileNamePos = intFileNamePos + 1
Exit Do
End If
Loop

dim FileName

If intFileNamePos <> 1 then

FileName = mid(archivo, intFileNamePos, len(archivo) - intFileNamePos + 1)

End If

'FileNamewExt contiene el nombre del archivo, sin la ruta.

'Necesitamos tanto el id de la sesión y la fecha y hora actuales.

dim idSesion,momentoActual

idSesion = Session.SessionID

momentoActual = now()

'Envío los datos a la consulta que realiza la inserción.

dim resultado

set resultado = setCuentaReproduccion(FileName,idSesion,momentoActual)

'response.write(resultado)