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:

    <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"/>

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

    soundManager.flashVersion = 9;
    soundManager.useHighPerformance = true;
    soundManager.wmode = 'transparent';
    soundManager.useFastPolling = true;
    soundManager.url = 'fullScreenMusic/soundmanager/swf/';
    soundManager.debugMode = false;

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

    soundManager.onload = function () {
    $('.playlist').ttwFullScreenMusic({style:'fullscreen')};
    }

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

$(’.playlistSelector’).openMediaPlaylist({options});

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 >>