Start jPlayer from a text link

Question

I have a jPlayer streaming a radio channel and I'd like to trigger the audio from a text link, besides the "Play" button. Eg: "Let's play some music", where play some music triggers the action of the jPlayer "Play" button.

Here's my HTML markup

<p>Let's <a href="javascript:;" class="jp-play">play some music</a></p> <!-- This line will trigger the play button -->
<!-- START JPLAYER -->
<div id="startpage_jplayer" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
  <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-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-volume-bar">
        <div class="jp-volume-bar-value"></div>
      </div>
    </div>
  </div>
  <div class="jp-info-bar">
  </div>
</div>
<!-- END JPLAYER -->

and this is the JavaScript code

$(function(){
  var stream = {
    title: "",
    mp3: "http://localhost:8000/blurfm"
  },
  ready = false,
  eurlattempts = 0;

  $("#startpage_jplayer").jPlayer({
    ready: function (event) {
      ready = true;
      $(this).jPlayer("setMedia", stream);
//$.dbg('ready');
},

playing: function(event) {
  eurlattempts = 0;
  $('#jp_container_1 .jp-info-bar').text('');
},
pause: function() {
  $(this).jPlayer("clearMedia");
  $(this).jPlayer("setMedia", stream);
//$.dbg('pause');
},
error: function(event) {
  if (ready && event.jPlayer.error.type == $.jPlayer.error.URL && eurlattempts<5) {
    var self = this;
    eurlattempts++;

    setTimeout(function(){
      $(self).jPlayer("setMedia", stream).jPlayer("play");
    },1000);
  } else if (ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
} else {
  eurlattempts = 0;
  $('#jp_container_1 .jp-info-bar').text('Error: '+event.jPlayer.error.message+' '+event.jPlayer.error.hint+' ('+event.jPlayer.error.type+' context '+event.jPlayer.error.context+')' + ( event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET ? 'Y':'N') );
}
},

//solution: "flash,html",
swfPath: "/demo/",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true

});

});

Thanks in advance!

Answer 1

OK, so try this:

You have to add an id attribute to your <a> element first:

<p>Let's <a href="#" id="playSomeMusic">play some music</a></p>

id can be anything, I just named it 'playSomeMusic' for test

then in your javascript add an click event for the <a> element and call the play method for jPlayer like this:

$("#playSomeMusic").click(function(){
  $("#startpage_jplayer").jPlayer("play");
});

that's it. this code should work fine. please give it a try and update us on the result