从文本启动 jPlayer link

Question

我有一个 jPlayer 播放广播频道，除了 "Play" 按钮外，我还想从文本 link 触发音频。例如："Let's play some music"，其中 播放一些音乐 触发 jPlayer "Play" 按钮的动作。

这是我的 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

好的，试试这个：

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

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

id 可以是任何东西，我只是将它命名为 'playSomeMusic' for test

然后在您的 javascript 中为 <a> 元素添加一个点击事件并像这样调用 jPlayer 的播放方法：

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

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

从文本启动 jPlayer link

Start jPlayer from a text link

javascript

audio

jquery

jplayer