How to fix jPlayer not playing until second press on Android Chrome - also volume controls disappear?

Question

I've been having some issues with an extensive reskin of the jPlayer music player and playlist player. The main two issues I have happen on Android Chrome browser.

1: Playlist doesn't always play until play has been clicked twice. This might be fixed on my second pen with the Android fixes talked about here: http://jplayer.org/latest/demo-01-android

2: Volume Image disappears completely except for audio icon

The HTML Markup is slimmed down version of the playlist example page from jPlayer:

<div class="jPlaylistPlayer">
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" class="jp-audio1" role="application" aria-label="media player">
    <div class="jp-type-playlist">
      <div class="jp-gui jp-interface1">
        <div class="jp-details1">
          <div class="jp-title" aria-label="title">&nbsp;</div>
        </div>
        <div class="jp-controls1">
          <button class="jp-play" role="button" tabindex="0">play</button>
        </div>
        <div class="jp-progress1">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-controls1">
          <button class="jp-mute" role="button" tabindex="0">mute</button>
          <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
          </div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
          <div class="jp-timer-sep">&#47;</div>
          <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
        </div>
      </div>
      <div class="jp-playlist scroll-pane">
        <ul>
          <li>&nbsp;</li>
        </ul>

      </div>
    </div>
  </div>
</div>

Pretty basic - I'm doing this for someone and he has very specific ideas on how it should look and work. Not yet a JavaScript pro so keep that in mind here's the initialize:

new jPlayerPlaylist({
  jPlayer: "#jquery_jplayer_1",
  cssSelectorAncestor: "#jp_container_1"
  },
    [{
      title: "NAS - It Ain't Hard To Tell (Gee Whiz Remix)",
      mp3: "http://www.geewhiz.net/audio/tracks/NAS - It Ain't Hard To Tell (Gee Whiz Remix).mp3"
    }],
  {
    swfPath: "../../dist/jplayer",
    loopOnPrevious: true,
    supplied: "mp3",
    loop: false,
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: false,
    keyEnabled: true,
    preload: "auto"
  });

    // Initialize the custom scrollbar: generates the page up and page down buttons
$(".scroll-pane").mCustomScrollbar({
  axis: "y",
  alwaysShowScrollbar: 2,
  theme: "rounded",
  scrollButtons: {
    enable: true
  },
  snapAmount: 120,
  scrollbarPosition: "outside",
  callbacks: {
    onInit: function() {
    }
  }
});

I tested this on my Nexus 7 (2013) Android 5.1 using Chrome 42.0.2311.109 and a Samsung Galaxy Tab Pro 8.4 Android 4.4 (CyanogenMod 11) with Chrome 41.0.2272.96; on my Galaxy S4 (I545) Android 4.3 and Chrome 42.0.2311.109 it seems to work fine on both pens assuming I wait a good 5 seconds before clicking play.

I thought maybe I could speed up the loading of the mp3 and I'm not sure if the server is gzipping so I added this to htaccess to make sure it's not being gzipped:

RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=dont-vary:1]

Is it a timing issue? Why does the volume bar appear then when it all loads it somehow disappears? I have to say this works completely as expected on desktop browsers.

Answer 1

Luckily someone posted on my Github thread about this and recommended I look into binding touch events to click events. Apparently this version (current as of 6/15/2015 [today]) does not handle touch events very well and by putting these together it solves all my Android issues.

Here's the code that clued me in:

$('.play-control').on('click touchstart', function(){
    $('#player').jPlayer('play');
});