Soporte » Plugins y Hacks » Personalizar plugin “Total Control HTML5 Audio Player Basic”

  • Hola,
    Estoy personalizando el plugin «Total Control HTML5 Audio Player Basic». Tengo el siguiento código que reemplaza las canciones de la lista de reproducción:

    $(document).on('click', '.playOnAP',function() {
        if( $(this).hasClass('playOnAP-pause') ) {
            htmlSound.pause();
            $(this).removeClass('playOnAP-pause');
            $('.total-play').removeClass('total-pause');
        } else {
    
            var tituloAlbum = $(this).siblings( '.entry-header' ).text();
            var caratula = $(this).siblings( '.thumbnail-review' ).children().html();
            var artista = $(this).siblings( '.artista' ).text();
    
            $('.playOnAP').removeClass('playOnAP-pause');
    
            if( supports_mp3_audio() ) {
    
                var clon = $('.total-row').first().clone(true)
                $('.total-row').remove();
                $('#mp3-list ul li',this).each( function( index, element ) {
    
                    $('.jspPane').append(clon.clone(true));
                    var totalTitle = $('.total-title').eq(index);
    
                    totalTitle.attr('src', $(this).text() );                                            //url canción
                    totalTitle.text($(this).text().slice(($(this).text().search("\/[^\/]+$")) + 1));    //canción
                    totalTitle.siblings( '.total-artist' ).text(artista);                               //artista
                    totalTitle.attr('imagen', caratula);
                    });
                $(this).addClass('playOnAP-pause');
            } else if ( supports_ogg_audio() ) {
    
                var clon = $('.total-row').first().clone(true)
                $('.total-row').remove();
                $('#ogg-list ul li',this).each( function( index, element ) {
                    $('.jspPane').append(clon.clone(true));
                    var totalTitle = $('.total-title').eq(index);
    
                    totalTitle.attr('src', $(this).text() );                                            //url canción
                    totalTitle.text($(this).text().slice(($(this).text().search("\/[^\/]+$")) + 1));    //canción
                    totalTitle.siblings( '.total-artist' ).text(artista);                               //artista
                    totalTitle.attr('imagen', caratula);
                    });
                $(this).addClass('playOnAP-pause');
            }
            totalSongs = $('.total-title').length;
            songPlay($('.total-title').first().attr('src'));
            htmlSound.play(); 
    
            $('.total-play').addClass('total-pause');
            $('#caratula').html($('.total-title').first().attr('imagen'))
        }
        });

    El problema viene cuando intento añadir canciones a la lista de reproducción sin cambiar la canción que suena en ese momento. He intentado lo siguiente:

    $(document).on('click', '.addOnAP',function() {
            var currentSrc = $('.total-playing .total-playing').attr('src');
            if( $('.total-title').length <= 20 ) {
                var tituloAlbum = $(this).siblings( '.entry-header' ).text();
                var caratula = $(this).siblings( '.thumbnail-review' ).children().html();
                var artista = $(this).siblings( '.artista' ).text();
    
                if( supports_mp3_audio() ) {
                    console.log('soporta ogg');             
    
                    $(this).siblings('.playOnAP').find('#mp3-list ul li').each( function( index, element ) {
                        $('.total-row').first().clone(true).insertAfter($('.total-row').last());
                        $('.total-row').last().find('.total-title').attr('src', $(this).text() );                                           //url canción
                        $('.total-row').last().find('.total-title').text($(this).text().slice(($(this).text().search("\/[^\/]+$")) + 1));   //canción
                        $('.total-row').last().find('.total-title').siblings( '.total-artist' ).text(artista);                              //artista
                        $('.total-row').last().find('.total-title').attr('imagen', caratula);
                        playerHtml += $('.total-row').last().html();
                        totalSongs++;
                        //songPlay($('.total-title').last().attr('src'));
                    });
                } else if ( supports_ogg_audio() ) {
    
                    console.log('soporta ogg');             
    
                    console.log($('.total-row').first());
                    $(this).siblings('.playOnAP').find('#ogg-list ul li').each( function( index, element ) {
                        $('.total-row').first().clone(true).insertAfter($('.total-row').last());
                        $('.total-row').last().find('.total-title').attr('src', $(this).text() );                                           //url canción
                        $('.total-row').last().find('.total-title').text($(this).text().slice(($(this).text().search("\/[^\/]+$")) + 1));   //canción
                        $('.total-row').last().find('.total-title').siblings( '.total-artist' ).text(artista);                              //artista
                        $('.total-row').last().find('.total-title').attr('imagen', caratula);       
    
                    });
                }
                totalSongs = $('.total-title').length;
                htmlSound.load(); 
    
            }
        });

    pero la canción deja de sonar. He intentado más opciones, pero sin éxito. Si omito la función htmlSound.load();`, las canciones no son añadidas al manejador de eventos y no se reproducen cuando termina la canción anterior. ¿Puede alguien ayudarme a encontrar la solución?

  • El debate ‘Personalizar plugin “Total Control HTML5 Audio Player Basic”’ está cerrado a nuevas respuestas.