从文本链接启动jPlayer

Question

我有一个jPlayer流媒体广播频道，除了“播放”按钮之外，我还想从文本链接中触发音频。“让我们播放一些音乐”，其中播放一些音乐触发了jPlayer“播放”按钮的动作。

这是我的HTML标记

<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 -->

这是JavaScript代码

$(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

});

});

提前感谢！

Answer 1

好的，试试这个：

您必须首先向您的id元素添加一个<a>属性：

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

id可以是任何东西，我只是把它命名为“playSomeMusic”来测试

然后在javascript中为<a>元素添加一个click事件，并调用jPlayer的play方法，如下所示：

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

就这样。这段代码应该能正常工作。请试一试，并向我们汇报结果。