CODEWITHSUNDEEP
javascriptjqueryjplayer
Samsquanch
Samsquanch

Reputation: 9146

Dynamically adding a jPlayer

I have the following code which I was using to attempt to dynamically add jplayers via a function.

function audio_player(audio, title, type) {

    var id = $('.audio').length;

    $('#audio').append('<div id="jquery_jplayer_'+id+'" class="audio"></div><div id="jp_container_'+id+'" 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-time-holder"><div class="jp-current-time"></div><div class="jp-duration"></div></div></div><div class="jp-title"><ul><li>'+title+'</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>');


    $("#jquery_jplayer_"+id).jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: audio
            });
        },
        play: function() { // To avoid jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "../js",
        cssSelectorAncestor:"#jp_container_"+id,
        supplied: type,
        errorAlerts: true,
        warningAlerts: false,
        wmode:"window"
    });
}


$(document).ready(function() {
    audio_player("http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", "Test Title", "mp3");
    audio_player("http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", "Test2 Title", "mp3");
});

With this code I am getting the error

TypeError: $(...).jPlayer is not a function 

wmode:"window"

When I use the same code, only set up as they have it in their demos (all the javascript inside document.ready() and statically declared) everything works fine.

Any ideas on what's going wrong/how to fix it?

Upvotes: 2

Views: 1512

Answers (1)

Samsquanch
Samsquanch

Reputation: 9146

Ended up solving it by doing this:

$(document).ready(function() {
    function audio_player(audio, title, type) {

      var id = $('.audio').length;

      $('#audio').append('<div id="jquery_jplayer_'+id+'" class="audio" data-file="'+audio+'" data-type="'+type+'"></div><div id="jp_container_'+id+'" 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-time-holder"><div class="jp-current-time"></div><div class="jp-duration"></div></div></div><div class="jp-title"><ul><li>'+title+'</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>');

      $('#jquery_jplayer_'+id).jPlayer({
          ready: function(event) {
              $(this).jPlayer("setMedia", {
                  mp3: $(this).attr('data-file')
              });
          },
          play: function() { // To avoid both jPlayers playing together.
              $(this).jPlayer("pauseOthers");
          },
          swfPath: js,
          cssSelectorAncestor:'#jp_container_'+id,
          supplied: type,
          errorAlerts: true,
          warningAlerts: false,
          wmode:"window"
      });
    }

    audio_player("file.mp3", "Test Title", "mp3");
    audio_player("file2.mp3", "Test2 Title", "mp3");
});

Upvotes: 2

Related Questions