Javascript player disappears on mobile

Question

Hello,

I’m developing a player in javascript when running on PC it works normal, but when I’m on Android phone it doesn’t work, It just disappears, Now when I try on Windows Phone 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>

Answer 1

Chrome Android:

• The top player does not work
• The player lists, in the body of the site, are disappearing when clicked on the player.

Native Android Browser:

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

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

There are some bugs, which have not been resolved, for mobile devices in your Javascript:

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

http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/

https://github.com/pupunzi/jquery.mb.audio/blob/master/demo.html

http://codetheory.in/fixing-html5-audio-problems-in-ios-and-android-mobile-browsers-to-overcome-the-limitations/

http://www.createjs.com/Demos/SoundJS/TestSuite