Hi, I'm using audiofield on my site (Drupal 7) and would really like to use jPlayer but it doesn't work.

Audio Players installed:

1. jPlayer
2. Wordpress Audio Player
3. Premium Beat Player

Page with jPlayer:

http://dev.stereofx.net/music/ur-love

http://stereofx.net/music/ur-love (Shows working Wordpress Player)

Wordpress and Premium Beat work fine. jPlayer loads up on page, but when pressing the play button the track does not play.

Tested in Opera, Firefox, Chrome, IE8 - Same result, all browsers.

The href attribute of the anchor tag is "#", the click event causes the # to appear in the URL and on the click event and the page goes to the top. It's like the click event is not returning false and should have something like event.preventDefault() or a javascriptVoid(); ?

I thought it could be conflicting with another script somewhere, but I disabled all modules until jQuery.js and jplayer.js were the only 2 scripts loading on the page and got the same result.

I also tried using different versions of jQuery - 1.5, 1.6 and 1.7, no difference, same result.

Do you have any idea's or suggestions where this problem is coming from or how to find & fix the bug?

Thank you for a great module, and your assistance. I look forward to any feedback.

CommentFileSizeAuthor
#5 audiofile-1.0b5-jplayer.diff2.2 KBpgeorgi
#2 audiofield_add_swfpath.patch477 bytesmkadin
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Rick Bergmann’s picture

Rick Bergmann CreditAttribution: Rick Bergmann commented
Issue summary: View changes

edited wording

Rick Bergmann’s picture

Rick Bergmann CreditAttribution: Rick Bergmann commented
Issue summary: View changes

Added Drupal 7

Rick Bergmann’s picture

Rick Bergmann CreditAttribution: Rick Bergmann commented
Issue summary: View changes

fixed spelling mistakes

Rick Bergmann’s picture

Rick Bergmann CreditAttribution: Rick Bergmann commented
Component: Miscellaneous » Code
Category: support » feature

After some research, my bug is not fixed yet, but I have found something which should be added to the audiofield.module file (line 273) for the jPalyer. The 'supplied' option should be set. 

<script type="text/javascript" >
          jQuery( "#jquery_jplayer_' . $instanceIndex . '" ).jPlayer({
            ready: function() {
              jQuery(this).jPlayer( "setMedia", {
                  mp3 : "' . $audio_file . '"
              });
            }
          });
</script>

I have added in supplied : mp3 - in my case I'm using mp3, but it really needs a variable to hold the different available audio formats which we should be able to set. (I will try work on something like that if nobody beats me to it.)

Additionally, jPlayer should also have a swfPath option set to the path of the jPlayer swf file as I found while debugging the swf file was not being called from the correct directory and got a not found file. Here is my fix below:

    <script type="text/javascript" >
          jQuery( "#jquery_jplayer_' . $instanceIndex . '" ).jPlayer({
            ready: function() {
              jQuery(this).jPlayer( "setMedia", {
                  mp3 : "' . $audio_file . '"
              });
            },
            swfPath : "../sites/all/libraries/player/jplayer/Jplayer.swf",
            supplied : "mp3"
          });
      </script>
mkadin’s picture

mkadin CreditAttribution: mkadin commented
Category: feature » bug
Status: Active » Needs review
FileSize
audiofield_add_swfpath.patch477 bytes

Patch attached in accordance with #1.

the swfPath is essential for the flash fallback behavior, which is necessary for firefox playing mp3's.

I can't get anything to work with jPlayer 2.1, that may also have been part of stereofx's problem...

Also making this a bug report as audiofield won't work in firefox with mp3s without this.

kiterminal’s picture

kiterminal CreditAttribution: kiterminal commented

I used jPlayer with jQuery and HTML5. I fixed this bug below

    <script type="text/javascript" >
      jQuery("#jquery_jplayer_' . $instanceIndex . '").jPlayer({
        ready: function() {
          jQuery(this).jPlayer("setMedia", {
            mp3: "' . $audio_file . '"
          });
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window"
      });
    </script>

If you use HTML5, you will go to http://www.jplayer.org/download/ and download skin for jplayer.

Rick Bergmann’s picture

Rick Bergmann CreditAttribution: Rick Bergmann commented

Hi guys, thank you so much for your input! I haven't done any development on this in a while but just got back to it and this is where I'm at:

I rolled back to jPlayer 2.0, and finally some results but not 100% perfect yet, so I would appreciate any further advice...

After trying the patch and other code, and some more fiddling, I used this code which produced my result:

<script type="text/javascript" >
  jQuery(function(){
    jQuery( "#jquery_jplayer_' . $instanceIndex . '" ).jPlayer({
      ready: function() {
        jQuery(this).jPlayer( "setMedia", {
          mp3 : "' . $audio_file . '"
        });
      },
   swfPath :  "' . $player_base_path . '",
   supplied : "mp3",
   wmode: "window"
   });
});
</script>

Result: Now only the first instance of jPlayer on the page is working, the other players still behave with the same issue as I had before. The problem now is that the first player plays all the tracks on the page at the same time. Each individual player should play it's own mp3.

Link:

http://dev.stereofx.net/music/progressive-house/not-a-love-song-ep

Any suggestions...?

Update:
After some more fiddling I produced some more interesting behaviors: (Line 246 - Audio Callback Function)

$instanceIndex += 1;

If I remove the plus

$instanceIndex = 1;

All players are now all clickable, however they all only play the first track at the same time

I'm really close to finally getting this to work, any help is really appreciated.
Thank You.

pgeorgi’s picture

pgeorgi CreditAttribution: pgeorgi commented
FileSize
audiofile-1.0b5-jplayer.diff2.2 KB

Attached patch against 1.0-beta5 fixes the swf-path issue, a JS aggregation issue (/sites/all/.../jplayer.min.js not found), and the multiple-players-on-a-single-page issue on my system.

Rick Bergmann’s picture

Rick Bergmann CreditAttribution: Rick Bergmann commented

Thank you for the patch, tested and bugs are fixed now.

pgeorgi’s picture

pgeorgi CreditAttribution: pgeorgi commented

I split it up in separate patches and forward ported it to beta6: https://github.com/pgeorgi/d7-audiofield/commits/7.x-1.0-beta6+jplayer

tamerzg’s picture

tamerzg CreditAttribution: tamerzg commented

Patches are commited to dev version.

Taxoman’s picture

Taxoman CreditAttribution: Taxoman commented

@tamerzg: your comment in #8 is from August 24th, and still the 7.x-dev version is from May...
Does beta7 contain all the latest commits?

tamerzg’s picture

tamerzg CreditAttribution: tamerzg commented

Yes beta7 contains this patch. Not sure why dev version show as May, I ll have to clear the git repository probably.
If you know how to work with git you can always get latest version at:
git clone --recursive --branch 7.x-1.x {YOURUSERNAME}@git.drupal.org:project/audiofield.git

pgeorgi’s picture

pgeorgi CreditAttribution: pgeorgi commented

Some minor looking changes are left for it to work for me. Unfortunately they can have some side effects elsewhere.

The commit message should explain the change. If there are any questions, we can discuss things here.
I tried to fix the other players, but can't test them.

Two commits, one fixing jplayer for me, the other attempting to fix the other players: https://github.com/pgeorgi/d7-audiofield/commits/7.x-1.0-beta7+jplayer

jenlampton’s picture

jenlampton
she / her
CreditAttribution: jenlampton commented
Version: 7.x-1.0-beta4 » 7.x-1.0-beta8
Priority: Normal » Major

I'm getting exactly the same problems with beta8.
I tired both jPlayer 2.1.0 and 2.3.0 with the same result.

I'm getting the following error even though the file it's looking for is exactly where it's looking for it:

Warning: file_get_contents(/sites/all/libraries/player/jplayer/jquery.jplayer.min.js): failed to open stream: No such file or directory in drupal_build_js_cache() (line 4915 of drupal-7/includes/common.inc).

I also checked out the 7.x-1.x branch from drupal.org directly, and that version is equally borked.

jenlampton’s picture

jenlampton
she / her
CreditAttribution: jenlampton commented
Status: Needs review » Active

There's no patch here that needs review, so changing the status.

Just a follow up note that the patch in this issue made the jPlayer work for me.

jenlampton’s picture

jenlampton
she / her
CreditAttribution: jenlampton commented
Issue summary: View changes

Added link to Dev site showing broken jPlayer

RaulMuroc’s picture

RaulMuroc CreditAttribution: RaulMuroc commented
Issue summary: View changes

Still the same problem. I tried the patch suggested in #13 unsuccessfully.

We notice with a colleague that in his local environment it worked at first try and in my local environment this error raised.

Perhaps some configuration related to apache or php?

tamerzg’s picture

tamerzg CreditAttribution: tamerzg commented
Status: Active » Fixed

Now version 7.x-1.0 supports Jplayer through https://www.drupal.org/project/jplayer so this should be working fine now.

RaulMuroc’s picture

RaulMuroc CreditAttribution: RaulMuroc commented

Yes, tested and looks fine for me.

vchen’s picture

vchen CreditAttribution: vchen commented

updated Audofield to 7.x-1.0 and using jPlayer 7.x-2.0-beta1.

Now jplayer doesn't even work at all. I get this error message in Chrome Developer Tools:

Uncaught TypeError: Cannot read property 'timeFormat' of undefined

Before, it would load on the first page load, but when you refresh, it's like none of the jplayer js loads at all and the whole thing breaks.

There seems to be some discrepancy with both audio field module README file and jPlayer's on where to save the player in the libraries folder. I made a copy of each player in both sites/all/libraries and sites/all/libraries/player directories and that doesn't seem to help.

vchen’s picture

vchen CreditAttribution: vchen commented
Version: 7.x-1.0-beta8 » 7.x-1.0
Status: Fixed » Active

Okay I got it to the previous state where I'm able to play the audio on the first page load, but fails whenever I refresh the page.

I changed the jPlayer configuration back to "sites/all/libraries/player/jPlayer" under /admin/config/media/jplayer. (In efforts to try to fix the problem, I changed the location to "sites/all/libraries/jplayer" and that seem to have broke it even though the correct files were there too.)

For some reason, on my local site, there are no issues whatsoever and I have "Aggregate Javascript files" checked. On the server though, this problem seems to always happen.

vchen’s picture

vchen CreditAttribution: vchen commented

When the jPlayer is not working, this is missing:

class="jp-jplayer jplayer-protect-processed jplayer-protect-playlist-processed jp-jplayer-processed" style="width: 0px; height: 0px;"

not sure if that helps.

tamerzg’s picture

tamerzg CreditAttribution: tamerzg commented

Because older versions of Audiofield had hardcoded support for jPlayer (it supported older release of jPlayer which had some security issues), I decided to move it out and instead support jPlayer through jplayer module: https://www.drupal.org/project/jplayer

Therefore when migrating to new version make sure:

1. You clear drupal caches
2. Download and enable jplayer module (it has readme file with instructions where jplayer should be)
3. Highly recommended: update jplayer to latest version 2.9.x
4. Now your existing audiofields should show new player.

vchen’s picture

vchen CreditAttribution: vchen commented

I uninstalled jplayer module and deleted the library. Cleared caches. Installed jplayer module and placed the jplayer library in sites/all/libraries/jplayer (version 2.9.2).

When I go to configuration > media > jplayer, and enter in sites/all/libraries/jplayer, it keeps giving me this error like it's not there:

Either the directory specified does not seem to contain the jPlayer library, or you are not using version 2 of jPlayer. Check to make sure that the jquery.player.min.js file is located within this directory.

When I go to /sites/all/libraries/jplayer/jquery.jplayer.min.js on the browser, I see the document. I cleared drupal caches multiple times, clear varnish cache, run cron, run update.php and it still doesn't seem to pick it up.

N1ghteyes’s picture

N1ghteyes CreditAttribution: N1ghteyes as a volunteer commented

If anyone else is having the same problem as Vchen, its because the reg_ex for detecting jplayers version doesn't work on the minified file. Use jquery.jplayer.js instead.

urglik’s picture

urglik CreditAttribution: urglik commented

howdy,

i'm having the same problem and would like to apply a patch available
in this discussion ( audiofile-1.0b5-jplayer.diff ) but i do not understand how to apply the patch. i'm using drupal 6 and jplayer is for the track'nstack module. currently the player shows words for the controls and not a skin. that's fine.
but when i click on play, the same thing happens as described at the head of this thread.
thank you.

ashutoshjha’s picture

ashutoshjha CreditAttribution: ashutoshjha commented

N1ghteyes, for library saving, you need to make changes in jplayer.module file with following lines:-
Just change this: preg_match('/Version:?[ ]*([\d.]+)/i', $contents, $matches);
to those: preg_match('/jPlayer?[ ]*([\d.]+)/i', $contents, $matches);

This works for me.

info@websolutions.hr credited info@websolutions.hr.

ws.agency’s picture

ws.agency CreditAttribution: ws.agency at Websolutions Agency commented
Status: Active » Fixed

Issue is actually related to jPlayer module and its misconfiguration where you are missing jPlayer library. See this issue for more info #2444437: Uncaught TypeError: Cannot read property 'timeFormat' of undefined

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.