1

I've tried to resolve this by looking at the user guide for jPlayer and via answers to a similar question on Stackoverflow, but unfortunately my ability with javascript is such that I can't implement the suggested answer.

I've successfully placed jplayer on my site, styled it and implemented a playlist no sweat. Here's the javascript (snippet - removed extraneous extra songs):

$(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"Opening (The Crows)",
                mp3:"../../audio/mp3/01-Opening_The Crows.mp3",
                oga:"../../audio/ogg/01-Opening_The Crows.ogg"
            }       
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window"
        });

    });

As well as the automatically-generated playlist, I also want the same audio files to be playable via separate text links elsewhere on the page. Here's the HTML (again, snipped just to refer to one song):

<a class="track" href="../../audio/mp3/01-Opening_The Crows.mp3">Opening (The Crows)</a>

I understand that I have to call the jplayer play function using a click on '.track' as the event, as in the example linked already, but I'm unable to include this code in the jplayer script I've already setup without breaking the player.

Any suggestions much appreciated (those which explain the reasoning behind the solution are preferred, so I can learn from the problem).

Community
  • 1
  • 1
shngrdnr
  • 109
  • 2
  • 10

2 Answers2

2
        mp3: $(this).attr("data-mp3"), 
        oga: $(this).attr("data-ogg")

would be a little nicer as

        mp3: $(this).data("mp3"), 
        oga: $(this).data("ogg")
Steven Sarkisian
  • 156
  • 7
  • 1
    This looks like it should be posted as a comment on @Lloyd 's answer and not here as an answer. Please consider reviewing it. – Chun Apr 03 '15 at 00:12
1

i think the neatest way would be to include URLs to both MP3 and OGG files in your markup, like: 

<a class="track" 
   href="javascript:;" 
   data-mp3="../../audio/mp3/01-Opening_The Crows.mp3" 
   data-ogg="../../audio/ogg/01-Opening_The Crows.ogg">
   Opening (The Crows)</a>

then your javascript could pass both formats, for maximum browser compatibility: 

$("a.track").live("click", function(e) {
    e.preventDefault();

    $("#jquery_jplayer_1").jPlayer("setMedia", 
        { 
            mp3: $(this).attr("data-mp3"), 
            oga: $(this).attr("data-ogg") 
        })
        .jPlayer("play");
});
Lloyd
  • 8,204
  • 2
  • 38
  • 53
  • I'm afraid not. When clicked, the link simply behaved as a usual mp3 link (Firefox - 'waiting for video). I tried adding the script both as a separate piece of code and within the original jplayer script on the page but no joy, I'm afraid. It's possible that I'm still including the script incorrectly, syntax-wise - any thoughts? – shngrdnr Feb 07 '12 at 08:30
  • whoops! i forgot to call `preventDefault` to prevent the `` tag's default behaviour occurring.. does this help? I edited my answer - have a play with the fiddle to see it in action.. – Lloyd Feb 07 '12 at 10:50
  • Still no joy Lloyd. Using the code given, when the text links are clicked the jplayer only loses its song duration track - aside from this nothing else happens that I can see. Unfortunately the Fiddle page only gives a 502 bad gateway error in the result page for me. Thanks for the help so far - this is all definite sadface. – shngrdnr Feb 07 '12 at 13:48
  • you get 502 errors on jsFiddle when their servers are overloaded - it has nothing to do with the code.. keep trying.. once you have seen the code working and had a play, it might become more evident why your own code isn't working. – Lloyd Feb 07 '12 at 15:39
  • if possible, post or email me a link to your site.. what you need is a trivial, common requirement - we'll sort it. – Lloyd Feb 07 '12 at 15:40
  • Cheers Lloyd - let me know have a play with Fiddle and I'll see what I can figure out. If worse come sot worse I'll upload what I have and pass you a link. It is a bit frustrating knowing that this is a simple requirement and being unable to sort it, thanks very much for bearing with me. – shngrdnr Feb 07 '12 at 16:33
  • you can use the Fiddle now - it works fine for me with no 502 errors – Lloyd Feb 07 '12 at 16:37
  • Interesting - after having a go with Fiddle, it seems that the body code isn't the problem, but that the problem lies with the jplayer code in the head of the page. I've uploaded my work-in-progress [here](http://basement-garden.co.uk/test/theboywithnailsforeyes/01_prologue/index.html) - Lloyd, it'd be great if you could grab a look and let me know what you think whenever you can. In the meantime, I'm going to have another look at the jplayer site and see if it can offer any guidance. – shngrdnr Feb 07 '12 at 19:22
  • Hi Lloyd - sorry, I should've pointed out the issue - the links that I want to activate the music through are in the horizontally-scrolling pane below the main viewing window. The links are outlined in grey. The intention is to have the links running across the pages the music applies to (this is the HTML5 version of a Flash project) - but the links aren't working. Sorry again, my oversight for not pointing that out before. – shngrdnr Feb 07 '12 at 20:29
  • I realised that was what you intended. The links are working - in the jPlayer playlist and the text links outlined in grey. – Lloyd Feb 07 '12 at 20:34
  • Which browser are you testing in ? – Lloyd Feb 07 '12 at 20:35
  • Hmm - tested in Chromium and yep, you're absolutely right Lloyd. Well, okay, so now it's a thorough mystery. I'll try testing on a different device with Firefox - maybe it's a plugin issue. Sorry to put you to all this trouble for this result... – shngrdnr Feb 07 '12 at 21:05
  • have updated my answer.. it was because your `a.track` tags were href linking to *ogg* files, and we were passing them as mp3 in the javascript. – Lloyd Feb 07 '12 at 21:16
  • Lloyd, that's brilliant - thanks very much for bearing with me through this, and apologies that I might've steered you in the wrong direction at one (a couple of?) point. Now this is sorted I can move on to ironing out the IE CSS issues and so on - things that might be frustrating, but that I actually have the tiniest clue about at least. Cheers again - Shaun – shngrdnr Feb 07 '12 at 21:41
  • no worries! I code with jPlayer / HTML5 media every day so it's no hassle.. regarding CSS - I feel your pain! I friggin despise IE.. – Lloyd Feb 07 '12 at 21:47
  • 1
    God - coding CSS for IE. Like the drunk left over at the end of your party - you just know getting them out of the door is going to involve cajoling, begging, shouting, will hurt your back and leave you feeling all oogy. I cannot for the life of me figure out why MS don't just bite the bullet and produce a browser that's standards compliant. If they spent a fraction of the money they spaffed on IE billboards all over the place on **actual development**... – shngrdnr Feb 07 '12 at 22:18
  • I can't get this to work with the above. Is it still relevant 7 years later? – James Deadman Mar 11 '19 at 11:44