javascript - 从文本链接启动 jPlayer

Question

我有一个jPlayer流式传输广播 channel ，除了“播放”按钮之外，我还想从文本链接触发音频。例如:“让我们播放一些音乐”，其中播放一些音乐会触发 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> 的点击事件元素并调用 jPlayer 的 play 方法，如下所示:

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

就是这样。这段代码应该可以正常工作。请尝试一下并向我们通报结果