Javascript Player disappears on mobile

1

Hello,

I'm developing a javascript player when I run it on PC it works normal, but when I'm on the Android phone it does not work, it simply disappears, now when I try on Windows Phone it works normally:

function playSong(song, id) {

    // Remove the current-song class (if any)
    $('.current-song').removeClass('current-song');
    // Show the previously hidden Play button (if any)
    $('.current-play').show();
    $('.current-play').removeClass('current-play');

    // Remove the active player if exist and set the ghost player
    $('.current-seek').html($('#sound_ghost_player').html());

    // Remove the active player class
    $('.current-seek').removeClass('current-seek');

    // Escape the ID (contains dots) http://api.jquery.com/category/selectors/
    var parsedId = song.replace('.', '\.');

    // Add the current song class
    $('#track'+id).addClass('current-song');
    // Add current play class to the Play button and hide it
    $('#play'+id).addClass('current-play');
    $('.current-play').hide();

    // Get the current played song name
    if ($('#song-name'+id).html().length > 25) {
        var songName = $('#song-name'+id).html().substr(0, 25)+'...';
    } else {
        var songName = $('#song-name'+id).html();
    }

    $('#sw-song-name').html(songName);

    // Show the time holder when a song starts playing
    $('.jp-audio .jp-time-holder').show();

    // Destroy the player if any is active
    $("#sound-player").jPlayer("destroy");

    // Add the active player to the current song
    $("#song-controls"+id).html($("#seek-bar-song").html());

    // Add the active player class to the current song
    $("#song-controls"+id).addClass('current-seek');

    // Set the play/pause button position (this is needed for mobile view in order for the play/pause button to be at the same height with the initial play button)
    $('#track'+id+' .jp-play , #track'+id+' .jp-pause').css({ 'margin-top' : '-' + $('.song-top', '#track'+id).outerHeight() + 'px' });

    // Get the track extension
    var ext = getExtension(song);

    // Determine prev next buttons
    prevnext();
    $("#sound-player").jPlayer({
        ready: function (event) {
            if(ext == 'mp3') {
                $(this).jPlayer("setMedia", {
                    mp3: '{$url}/uploads/tracks/'+song
                }).jPlayer("play");
            } else if(ext == 'm4a') {
                $(this).jPlayer("setMedia", {
                    m4a: '{$url}/uploads/tracks/'+song              
                }).jPlayer("play");
            }
        },
        cssSelectorAncestor: '#sound-container',
        ended: function () {
            $.ajax({
                type: "POST",
                url: "{$url}/requests/add_view.php",
                data: "id="+id, 
                cache: false,
                success: function(html) {

                }
            });

            // If repeat is not turned on, move to the next song
            if($('#repeat-song').html() == 0) {
                $('.current-seek').html($('#sound_ghost_player').html());
                $('.current-play').show();
                nextSong(id);
            }
        },
        error: function() {
            // If the track fails to play for whatever reasons, hide it
            $('#track'+id).fadeOut();
            nextSong(id);
        },
        errorAlerts: true,
        swfPath: "{$url}/{$theme_url}/js",
        supplied: ext,
        wmode: "window",
        volume: getCookie("volume"),
        smoothPlayBar: true,
        solution: "html, flash",
        keyEnabled: true
    });
};
</script>
    
asked by anonymous 14.02.2015 / 14:01

1 answer

2

Chrome Android :

  • Top player does not work
  • The player lists in the body of the site are disappearing when the player is clicked.

Android Native Browser :

  • The top player works
  • The player lists in the body of the site are disappearing when the player is clicked.

In short, your problem is compatibility. See this table:

TherearesomeunresolvedbugsformobiledevicesinyourJavaScript:

In short I advise you to review and test your API and migrate to other versions and exit testing. See this line of study:

link

link

link

link

    
14.02.2015 / 16:05