JPlayer Circle Player does not show circle first t

I have an application that is using the JPlayer Circle Player to play short audios for transcription purposes. Each of these audios originates as a .vox file that has been converted to .wav by SoX. When the Play button is pressed, the audio plays but the green circle does not display. Once the clip has played, pressing play again does show the green circle advancing.

I assume that this is because either the original vox format or the wav format does not contain any length data so that player doesn't know this until it tries to play it. Once it learns the length, the circle can display.

How might this be overcome? Can the circle player somehow preload the audio to determine its length before playing? Is there something different I could be doing in the SoX conversion? Would converting to something other than WAV work better? JPlayer counsels against using WAV but doesn't say why, and it plays well enough except for this.

Or is there something else I'm doing wrong?

UPDATE 1: after reading the original .vox file and the converted .wav file with soxi, it appears that duration data exists in both places, thus no reason the player cannot know this in advance. So conversion would seem to be off the hook as the culprit.

UPDATE 2: I added some JPlayer event handlers for the loadedmetadata and play events which shows pretty clearly the problem described above.

$("#jquery_jplayer").bind($.jPlayer.event.loadedmetadata , function(event) { // Add a listener log the duration on load
    console.log("loadedmetadata: this audio has a duration of " + event.jPlayer.status.duration + " seconds.");
    });

$("#jquery_jplayer").bind($.jPlayer.event.play , function(event) { // Add a listener log the duration on play
    console.log("play: this audio has a duration of " + event.jPlayer.status.duration + " seconds.");
    });

This produced the following output in the logs:

loadedmetadata: this audio has a duration of 0 seconds.
play: this audio has a duration of 0 seconds.
play: this audio has a duration of 10.72 seconds.

indicating that the duration isn't known until the first playthrough.

UPDATE 3: retracting UPDATE 1: Although soxi is somehow able to extract duration data from the file, that doesn't necessarily mean that the HTML5 browser is able to do so. A different algorithm may be in place there. The conversion is back on the hook. I can't see how it could be anything else.

I thought it might be because the Circle Player lives inside a modal dialog, but is instantiated when the page that invokes the modal dialog is loaded and only upon showing the modal dialog was the media loaded. I changed that to a cleaner design where the Circle Player is instantiated every time the modal dialog is shown and the media loaded at that time (and destroyed when the modal goes away), but the problem remains.

SAMPLE FILE

Download sample file for testing. It's a 10-second clip with some faint random noise in the first few seconds, then at about the 7 or 8 second mark, a female voice saying a first and last name.

CAUSE

There are multiple reasons of why the player doesn't play .WAV files. Based on your description that the player can play .WAV file after second click, it seems that you may be loading your .WAV files too early before player has been initialized.

NOTES

According to the documentation:

The WAV format is supported by many HTML5 browsers. We recommend that you avoid it though as a counterpart format. The recommended encoding options are:

8-bit and 16-bit linear PCM

Only codec "1" (PCM) is supported.

If possible I would recommend using .MP3 format instead as it has wider support by desktop/mobile browsers.

Also please note that you need to specify supplied: 'wav' in order to play .WAV files.