jPlayer preload audio for android chrome

Question

I have a website webapp which is highly dependent on jPlayer (audio playback only). I have different audios and audio live streams on the webapp. I am using the "preload" option of the jPlayer and has tested it with "metadata" and "auto" option.

On an IOS device I am able to preload the audio and the audio starts playing as soon as I hit play, but on Android Tablets and Mobiles using chrome I am not able to preload the audio as the request gets cancelled. When I click play the audio then starts buffering and then plays causing a delay in audio playback and time on clicking play. I tried changing the "solution" of the jPlayer as well from 'html, flash' to 'flash, html'. The wmode option is also set to 'window'. The same code works fine on IOS and Desktop but causes delay in Android Mobile/Tablet Chrome.

$("#jquery_jplayer_1").jPlayer({
                                    ready: function(event) {
                                        $(this).jPlayer("setMedia", {
                                            wav: c,
                                            mp3: c,
                                            m4a: c,
                                        }).jPlayer('play').jPlayer('stop');

                                        $(this).jPlayer("volume", 0.9);
                                    }, cssSelector: {
                                        mute: '.jp-mute',
                                        unmute: '.jp-unmute',
                                    },
                                    solution: "flash, html",
                                    swfPath: "_/js/_lib/",
                                    supplied: "mp3, m4a, wav, oga",
                                    wmode: "window",
                                    preload: "metadata",
                                    nativeVideoControls: true,
                                    volumechange: function(event) {
                                        if (event.jPlayer.options.muted) {
                                            $(".jp-volume-bar").slider("value", 0);
                                        } else {
                                            $(".jp-volume-bar").slider("value", event.jPlayer.options.volume);
                                        }
                                    }});

Answer 1

Although it is not intended for, you can achieve preloading by using the browser application cache. Create a manifest that declares your audio files url's as part of the 'application'.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
• http://alistapart.com/article/application-cache-is-a-douchebag

If your audio files are not hosted on your site server, make sure you do not use https: files from other sources do not get cached in this case...