[contact-form-7 id="24084" title="Feedback ES"]

jQuery “jPlayer”

Jplayer es una solución flexible y funcional para reproducir y controlar ficheros multimedia en su página web. Es compatible con HTML5 y reproduce flash en los navegadores que aún no son compatibles con HTML 5. Entre otras ventajas hay una posibilidad de personalizarla mediante HTML y CSS. Para obtener más información, visite la página web oficial http://www.jplayer.org

JavaScript

Debemos incluir framework jQuery y jplayer.min.js señalando el atributo src de la etiqueta de script a esos ficheros .js.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jplayer.min.js"></script>

Colocamos el script de inicialización en la sección <head>. Defina la lista de canciones en array myPlayList (línea 4-6). Nótese, que necesita especificar dos ficheros de audio: mp3 y ogg. Se puede utilizar cualquier herramienta de conversión de sonido para esto (por ejemplo, http://media.io)

$(document).ready(function(){
    var playItem = 0;
    var myPlayList = [
        {name:"Black Plant",mp3:"audio/black_plant.mp3",ogg:"audio/black_plant.ogg"},
        {name:"Hidden",mp3:"audio/hidden.mp3",ogg:"audio/hidden.ogg"},
        {name:"The Separation",mp3:"audio/separation.mp3",ogg:"audio/separation.ogg"}
    ];

    // Local copy of jQuery selectors, for performance.
    var jpPlayTime = $("#jplayer_play_time");
    var jpTotalTime = $("#jplayer_total_time");

    $("#jquery_jplayer").jPlayer({
        ready: function() {
            displayPlayList();
            playListInit(true); // Parameter is a boolean for autoplay.
        },
        oggSupport: true
    })
    .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
        jpPlayTime.text($.jPlayer.convertTime(playedTime));
        jpTotalTime.text($.jPlayer.convertTime(totalTime));
    })
    .jPlayer("onSoundComplete", function() {
        playListNext();
    });

    $("#jplayer_previous").click( function() {
        playListPrev();
        $(this).blur();
        return false;
    });

    $("#jplayer_next").click( function() {
        playListNext();
        $(this).blur();
        return false;
    });

    function displayPlayList() {
        $("#jplayer_playlist ul").empty();
        for (i=0; i < myPlayList.length; i++) {
            var listItem = (i == myPlayList.length-1) ? "
  • " : "
  • "; listItem += ""+ myPlayList[i].name +"
  • "; $("#jplayer_playlist ul").append(listItem); $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() { var index = $(this).data("index"); if (playItem != index) { playListChange( index ); } else { $("#jquery_jplayer").jPlayer("play"); } $(this).blur(); return false; }); } } function playListInit(autoplay) { if(autoplay) { playListChange( playItem ); } else { playListConfig( playItem ); } } function playListConfig( index ) { $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current"); $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current"); playItem = index; $("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg); } function playListChange( index ) { playListConfig( index ); $("#jquery_jplayer").jPlayer("play"); } function playListNext() { var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0; playListChange( index ); } function playListPrev() { var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1; playListChange( index ); } });

    HTML

    Aquí se puede revisar la representación general  de script  HTML:

    CSS

    Incluya el tema por defecto para el jugador (player) mediante la conexión del fichero .css en la sección <head> del fichero .html

    &tl;link href="path/to/file/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />