-1

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.

Steve Cohen
  • 4,679
  • 9
  • 51
  • 89

1 Answers1

0

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.

DEMO

See this jsFiddle for the demonstration of the jPlayer Circle Player playing the .WAV file you've uploaded.

I was able to play the .WAV file on Firefox, Chrome and Safari, but not IE. This shows that the problem is not with the file format.

Community
  • 1
  • 1
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • But the problem is not that the player doesn't PLAY the file. It's that it doesn't read the metadata on load. It always plays the file, but the first time through does not know the length, so Circle Player can't activate it's ring while it's playing. And actually, I've learned that it's not a Circle Player issue at all. The same issue is seen using the HTML5 – Steve Cohen Aug 03 '15 at 19:35
  • @SteveCohen, please see the jsFiddle example in my answer, it loads the WAV you've supplied and shows it's length on the ring on first time. That confirms that the problem is somewhere else in your code. Please show how you initialize the player and load the media file. – Gyrocode.com Aug 03 '15 at 20:32
  • Is clicking the button on the jsFiddle page itself supposed to play the track in my browser? It doesn't. – Steve Cohen Aug 04 '15 at 16:07
  • @SteveCohen, what browser are you using? Also that also shows that .WAV is unreliable format since it's so browser-dependent. Again I would suggest using .MP3 format instead. – Gyrocode.com Aug 04 '15 at 16:11
  • Firefox - however, I did try generating .oggs instead of .wavs. (Mp3 conversion was not available on the machine where I ran SoX,) It made no difference. Wherever .wav failed, .ogg failed in the same place. Neither one ever played the first time through. – Steve Cohen Aug 04 '15 at 16:21
  • @SteveCohen, in Firefox it works for me the first time, it should have .WAV support without any add-ons, see [Supported formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#WAVE_PCM). Maybe the problem is elsewhere, your browser add-ons for example. Try another machine, maybe. – Gyrocode.com Aug 04 '15 at 16:27
  • OK, not continuing this here since Stack Overflow doesn't like back and forth. I tried adding info to this question, but it's gotten too complicated and so I'll open a new question. – Steve Cohen Aug 04 '15 at 19:54