Nos hemos topado con un hermoso reproductor de música a pantalla completa. Se trata, básicamente, de una manera original de presentar un playlist de archivos MP3 que alojes en tu sitio. Tan sólo por este mes, su descarga es gratuita, y aquí te decimos cómo obtenerlo.

Haz clic aquí para ver una demostración >>

Lo primero que debes hacer, es registrarte en el sitio web Codecanyon, lo cual es extremadamente sencillo. Haz clic aquí para registrarte en Codecanyon >>

Una vez registrado, y habiendo iniciado sesión, debes descargar los archivos del reproductor desde aquí >>

Ahora, tan sólo debes subir esos archivos al directorio de tu servidor, y enlazar los archivos Javascript y CSS necesarios, añadiendo las siguientes lineas al código de tu web:


[sourcecode language=”javascript”] <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="fullScreenMusic/soundmanager/script/soundmanager2.js"></script>
<script type="text/javascript" src="fullScreenMusic/ttwFullScreenMusic.js"></script>
<link rel="stylesheet" type="text/css" href="fullScreenMusic/css/style.css"/>
[/sourcecode]

Luego, deberás inicializar SoundManager, de esta manera:

[sourcecode language=”javascript”] soundManager.flashVersion = 9;
soundManager.useHighPerformance = true;
soundManager.wmode = ‘transparent’;
soundManager.useFastPolling = true;
soundManager.url = ‘fullScreenMusic/soundmanager/swf/’;
soundManager.debugMode = false;
[/sourcecode]

Cómo último paso, debes comenzar el plugin a pantalla completa, así:

[sourcecode language=”javascript”] soundManager.onload = function () {
$(‘.playlist’).ttwFullScreenMusic({style:’fullscreen’)};
}
[/sourcecode]

Y eso es todo. Para que el reproductor sea funcional, debes colocar en tu código:

[sourcecode language=”javascript”] $(’.playlistSelector’).openMediaPlaylist({options});
[/sourcecode]

Y listo. En caso de tener alguna duda, dentro del archivo comprimido que descargarás puedes encontrar la documentación requerida (en inglés). Recuerda, debes apresurarte ya que la promoción sólo estará vigente durante el mes de abril. ¡Esperamos que lo disfrutes!

Haz clic aquí para ver una demostración >>