Capabilities of jPlayer?

[tc...@jali.co.uk]

I'm thinking about using jPlayer for a site; It looks good, and I spent a few hours playing around, but I have a couple of questions before I invest any more time into it.

- Is this project still actively developed/supported?

- Can jPlayer let you fade between one audio track to another? Also, is it possible/straightforward to animate the volume of a track up and down?

- Can I use jPlayer without any visible interface? ie, I don't want to see any play/pause buttons. Instead I need a bunch of icons to play little sounds on mouseover.

- I've so far been learning by trying to reverse engineer the demos on jplayer.org. Unfortunately with limited success as I don't yet have the knack for reading block code. Is there any better place I could be reading?

If not, can anybody recommend a cross-platform (preferably jQuery) audio script that does do all those things?

[Mark Panaghiston]

jPlayer has been in development since before its first release back in May 2009. We are actively keeping it up to date and hope to release the next version soon.

Free support is through this group. I review the posts on it at least once a day, but sometimes real work does get in the way. We can also give support at an hourly rate if you require it.

jPlayer plays single pieces of media. The volume fading that you describe is not a feature. You could add one on though I imagine... But you would prevent any mobile device user from using your site. They can only ever play one piece of media at a time.

jPlayer does not need any interface. It is built into jPlayer since the majority of users want one. Well, the interface is not built in, that just uses HTML and CSS. The association between HTML entities and the jPlayer functions is built into jPlayer.

If you want a lot of explanation on the code, there is the quick start guide. It goes through each step in far too much detail for a quick start guide. But the idea was that many people trying to use jPlayer do not even know what jQuery is, so I explained in a lot of detail:
http://jplayer.org/latest/quick-start-guide/

At the bottom of the QSG are some examples, this one might be of use:
http://jplayer.org/latest/quick-start-guide/api-cssSelector/

I do not know of any other audio players that are HTML5, with a Flash fallback that support cross-fade between 2 audio tracks.

I imagine that at best, you'd have to implement it yourself using 2 instances and some code to control the fade process. And since you'd need to do that, jPlayer is a good starting point. Our focus of jPlayer has been on its API. You have events that you can bind handlers to and lots of other useful stuff.

[tc...@jali.co.uk]

Thanks for your response.

I can work with that, if jPlayer allows me to animate volume. How would I fade the volume of a track from 1 to 0 using the jQuery .animate() function? Then for mobile devices I could simply change the track and animate in again when the first animation had finished.

For non-mobile computers, is dynamically instancing multiple jPlayers a feasible thing to do? If I have my little icons instance a new sound every mouseover, and destroy it on mouse out, is that going to give me terrible performance?

Unfortunately I didn't get a chance to spend any more time with jPlayer yesterday, so still haven't got a decent understanding of how the whole system works (I'm new to jQuery too). Please excuse any overly simple questions. Such as this one: I messed around but couldn't get the player to change track when I clicked on a button. Am I right that you just have to call

$("#jquery_jplayer_1").jPlayer('setMedia' {mp3: 'src.mp3'}).play();

  every time you want to do this, or have I missed something?

[Mark Panaghiston]

You missed a comma... That is a function and the comma separates the parameters.

$("#jquery_jplayer_1").jPlayer('setMedia', {mp3: 'src.mp3'}).play();

Recommend using absolute urls. M4A and M4V relative urls do not work with flash fallback.
mp3:"/audio/elvis.mp3"

Yes... To change the media, then you need to setMedia to the new media...

The volume fading code you'll have to play with yourself... It sounds like you are thinking on the right lines. I'm just never played much with the animate function, so can't say.

That instance on roll over and destroy on roll out sounds nasty. Mobile devices don't work too well with roll over/out in my experience. But you cannot expect the user to keep their mouse over something all the time... as the mouse out destroys it. Not sure what you are on about here.

If you are trying to make sound effects, then an audio sprite may help. Like an image sprite... With sounds spaced out.

[tc...@jali.co.uk]

What I'm on about with the instance thing: In the precursor to my site, written in AS3, I had an empty array of mp3s. Whenever the mouseover event happened, I appended a sound to the array and set it playing. When the sound finished, I removed it from the array.

Of course, in Flash it was just one audio player and several tracks playing together - I didn't have to worry about creating and destroying entirely separate players. I'm assuming each track would have to be a separate jPlayer, and would have to wake up and initialise itself independently, there's no way to speed this up?

Mobile devices are going to require a bit of a rethink anyway: different aspect ratios, different workflow, etc. Anyway, how can a mouseless touchscreen device handle rollover events? So I'm not overly worried about them yet, although of course I'd always rather they were supported than not.

Volume fading: .animate() works by continuously varying a css property. As long as I can tie the volume of a jPlayer to a number in css, I imagine that it should be simple. Would jPlayer be able to see a change in a css property and update itself?

Sorry for all these questions. The internet's down at my home and until it's back up I can't experiment with anything and am reduced to reading and asking about things.

[tc...@jali.co.uk]

Right, volume fading works, I'm using the .animate() step function parameter to call the jPlayer. I'm calling it about twenty times a second and it's a bit choppy but on the whole seems to be dealing with that quite well. Not sure what a mobile device will make of it.

Got the same problem other people seem to have, where only the ogg files will play (tested on Firefox, Opera, under Ubuntu), but I assume that's a common problem and an easy fix.

The main showstopper, though, is the track (buffered or not) takes a moment or two to start playing, during which time the volume's animating up so that when the sound finally does come out, the fade effect is ruined. Fixed this for the moment by having the animate() call inside the 'playing' event, like this:

$("#jquery_jplayer_1").jPlayer({
            ready: function() {
                $(this).jPlayer("setMedia", {
                    //m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                    mp3: "tracks/6.mp3",
                    oga: "tracks/5.ogg"
                });
            },
            play: function(){
                $("#jquery_jplayer_1").jPlayer('volume',0);
            },
            playing: function(){
                $("#jquery_jplayer_1").animate( {volume: 0.5}, {
                    duration: 1000,
                    complete: function(){},
                    step: function(now, fx){
                        $("#jquery_jplayer_1").jPlayer("volume", now );
                    }
                });
            },
            swfPath: "/v2/js/Jplayer.swf",
            supplied: "mp3, m4a, oga",
            preload: "auto"
        });

So the fade effect is uninterrupted, but the pause is still noticeable. Sometimes it's a couple of seconds before the music even starts to fade in. I know this is a long shot, but is there anything I can do about this? Any ugly hacks exist to speed this player up?

[Mark Panaghiston]

swfPath is a path:
swfPath: "/v2/js",

Most mobile browsers will not let you play with the volume at all. The BB playbook does, but that is almost an annoying feature, as the sound comes out at full volume if you are not careful... Plus, its buttons do not generate the volumechange event, so the page is oblivious to the volume changing through the physical buttons.

The lag you are seeing with the volume change is just how the HTML5 media is implemented in those browsers... Currently, FF5 appears to delay any volume change or mute by a second or so before it affects the volume.

[Alex P]

Hi Mark - you mentioned "I do not know of any other audio players that are HTML5, with a Flash fallback that support cross-fade between 2 audio tracks."

I tried to find where cross fade functionality/code lays but couldn't find it. Would you please point me in the right direction?

Thanks a lot!