Re: loading jplayer from dynamically generated html links elsewhere on the page

[Mark Panaghiston]

Something like...

$('.music-link').on('click', function() {
  var mp3 = $(this).attr('data-mp3');
  $('#jplayer').jPlayer('setMedia', {mp3:mp3}),jPlayer('play');
});

Then the HTML you load in can contain mp3 media using something like:

<span class="music-link" data-mp3="http://domain.com/song1.mp3">Song 1</span>

Or you can use links and the href and the event.preventDefault(). That way the mp3 files can be right click and downloaded if you want.


On Saturday, 18 May 2013 10:46:03 UTC+1, Grant wrote:

Hi guys,

Firstly, awesome player! The best out there by a mile :)

I've searched high and low for an answer to this, and I know 100% that it's possible, but I can't find the info anywhere.

I'm intending to use Jplayer in a static div while the rest of the site will reload with ajax so that the player doesn't  reload (stop playing) on page changes. This is all working great but here is where i'm stuck..

I need to set up jplayer so that it loads mp3 files from html links that will generated elsewhere in other divs on the site.

How would I go about doing this? From all the demo's I can only see playlist's generated within the jplayer code (which is obviously located in the player divs and is not workable for what I'm trying to do).

I read somewhere that I need to set up handlers but I have no idea how to do that.

So basically I need to be able to set it up so that multiple links containing the mp3 file, and title / artist information can be sent to jplayer from anywhere on the site.

Any help would be greatly appreciated.

Many thanks in advance,

Grant

[James Graham]

You could dynamically add to a playlist. When link is clicked (I assume) then add the scr of the files (multiple formats) to the playlist array.  jPlayer keeps playing new material is in playlist, position can be changed to next to play, and will play in turn.

On May 18, 2013, at 2:46 AM, Grant wrote:

Hi guys,

Firstly, awesome player! The best out there by a mile :)

I've searched high and low for an answer to this, and I know 100% that it's possible, but I can't find the info anywhere.

I'm intending to use Jplayer in a static div while the rest of the site will reload with ajax so that the player doesn't  reload (stop playing) on page changes. This is all working great but here is where i'm stuck..

I need to set up jplayer so that it loads mp3 files from html links that will generated elsewhere in other divs on the site.

How would I go about doing this? From all the demo's I can only see playlist's generated within the jplayer code (which is obviously located in the player divs and is not workable for what I'm trying to do).

I read somewhere that I need to set up handlers but I have no idea how to do that.

So basically I need to be able to set it up so that multiple links containing the mp3 file, and title / artist information can be sent to jplayer from anywhere on the site.

Any help would be greatly appreciated.

Many thanks in advance,

Grant

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jplayer+u...@googlegroups.com.
To post to this group, send email to jpl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jplayer?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

James Graham

jam...@gmail.com

[Grant]

Thank you so much Mark!

That is perfect ;)

As mentioned by Moose how would I add these links to the playlist instead of just loading them into the player?

[Mark Panaghiston]

Instead of the setMedia command direct to jPlayer, you'd use the jPlayerPlaylist object/methods:
http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

[Grant]

Thanks again Mark, will look into the playlist demo.

But I'm still having trouble getting the links (as you offered before) to load in the player.

I've set it up like this using the basic pf skinned audio player....

--------
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
        ready: function (event) {

            $('.music-link').on('click', function() {
  var mp3 = $(this).attr('data-mp3');
  $('#jplayer').jPlayer('setMedia', {mp3:mp3}),jPlayer('play');
});

        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true
    });
});
//]]>
</script>
</head>
<body>

        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio">
            <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>

                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                    </ul>
                </div>
                <div class="jp-title">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
       
        <a href="javascript:;" class="music-link" data-mp3="http://pathtomp3">Play Track</a>

</body>

---------------

Where "pathtomp3" is the full path the mp3 on my server.

Can you see what I've done wrong and why it isn't working?

Many thanks in advance,

Grant

[Mark Panaghiston]

Yes.

You took my code too literally... You need to apply a little bit of grey matter :P

jPlayer is on the element: $("#jquery_jplayer_1")

Your click handler is sending commands to: $('#jplayer')
You need to change that to match where jPlayer actually is.
ie., $("#jquery_jplayer_1")

I did not expect you to put it in the ready event... But it is actually a good place for it. It avoid a manic clicker from clicking on a link within 200ms of the page loading. ie., before jPlayer is ready. Not that it would hurt, it would simply raise an error event and or do nothing at all.

[mvandrei]

well, I've sent it to the freelancer that seems to not be so smart :).

Thanks for the heads up

--

[Grant]

lol sorry I can't believe I didn't notice that! Doh!

The ready event placement was just a noob happy accident. I was planning to move all the JPLayer code into a global.js file but I may just leave it here now you've mentioned that.

But sadly.... It's still not working...

This is the updated JS...

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $('.music-link').on('click', function() {
  var mp3 = $(this).attr('data-mp3');

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

});
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true
    });
});
//]]>
</script>

Am I missing something blindingly obvious?

[Grant]

Fixed.. All working now! ;)

It is loading into the player but it's not auto playing.

I've tried adding another play command even though I can see it there already in your code but it just won't autoplay.

Any ideas?

[Grant]

It's ok I found it..

Had to put the play command on a new line to make it work.

Here is the final code if anybody else is after the same thing....

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $('.music-link').on('click', function() {
  var mp3 = $(this).attr('data-mp3');

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

});
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true
    });
});
//]]>
</script>

Then link to your audio like this :

<a href="javascript:;" class="music-link" data-mp3="http://yourmp3pathhere">Title</a>

Again many thanks for all of your help Mark, it's really appreciated.

Cheers,

Grant ;)

[Grant]

Hi Mark,

Sorry to bug you again but I can't get the dynamic links to load into the player or playlist.

I've tried  a whole bunch of different set ups but none of them work.

1) Could you please give me an idea of the code to instance the playlist player
2) Could you please give me a demo line of code for the html link to load it

I'll be honest, I'm totally lost on how to format the links with regards to the other data along with the mp3 (title, poster etc).

I tried things along the lines of - <a href="javascript:;" class="music-link" mp3="http://yourmp3pathhere" poster="http://posterimgpath" title="Track Title" >Load</a> but i'm not really sure if a) this is the correct way to send the data to the playlist and b) what the actual tags are for sending each item. I noticed before that on the single player the mp3 tag is "data-mp3" but looking at the playlist demo it seems that the mp3 is tagged by just "mp3". Could you verify what the correct tags are for each available option please?

Many thanks,

Grant

[Mark Panaghiston]

The problem before was that you had a comma instead of a dot before the jPlayer("play") part of the chain.

I am thinking about the other question... There are limits to fee support.

[Mark Panaghiston]

Instance the playlists so the var is ready and then something like:

$('.music-link').on('click', function() {

  var $this = $(this);
  myPlaylist.add({
    title:$this.attr('data-title'),
    artist:$this.attr('data-artist'),
    mp3:$this.attr('data-href'),
    poster: $this.attr('data-poster')
  });
});

The HTML would be like...

<a href="/audio/mp3/elvis-sus-minds.mp3" data-title="Suspicious Minds" data-artist="Elvis" data-poster="/audio/poster/elvis.png">The king</a>

[Grant]

Hi Mark,

Once again thank you so much for taking the time to help out a newbie.

That worked a treat with a few nips and tucks.
Can't believe how simple it is now that you've explained how it's done!

Just want to say thank you once again for developing & supporting this player, it and you are a pair of diamonds ;)

Cheers,

Grant ;)

[Michael Howey]

Is there away to access the external playlist without exposing the mp3 url? 

Something like

<span class="play" id="song_1">Song One</span>
<span class="play" id="song_2">Song Two</span>
<span class="play" id="song_3">Song One</span>


====> This would exposes the file location  mp3:$this.attr('data-href'),

I'm using the following setup

    $(document).ready(function(){
    var cssSelector = { jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1" };
    var playlist = [];
    var options = {
    swfPath: "/<?php echo $hw_folder;?>/hw-template/<?php echo $hw_template;?>/",
    supplied: "mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: false
    };
    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
    $.getJSON("/<?php echo $hw_folder;?>/hw-template/<?php echo $hw_template;?>/radio_play.php?f=<?php echo $hw_folder;?>",function(data){
    $.each(data,function(index,value){
    myPlaylist.add(value);
    })
    });

// GET THE INFO
$("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) {
    var current = myPlaylist.current,
        playlist = myPlaylist.playlist;
        $.each(playlist, function (index, obj) {
        if (index == current) {
            $('.jp_current_track_title').text(obj.title);  
            $('.jp_current_track_poster').html(obj.poster);  
            $('.jp_current_track_poster').html(obj.poster);  
            }
        });
    });
});