从文本链接启动 jPlayer

Posted 2023-02-25

【中文标题】从文本链接启动 jPlayer

【英文标题】：Start jPlayer from a text link

【发布时间】：2015-04-08 00:42:52

【问题描述】：

我有一个 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

);

);

提前致谢！

【问题讨论】：

到目前为止您尝试过什么？它只是 jPlayer 本身的代码，在您的帖子中没有任何与您的问题相关的代码。

我尝试通过复制文本链接中的 jPlayer 类来调用该函数（请参阅 HTML 中已编辑的

【参考方案1】：

好的，试试这个：

您必须首先将id 属性添加到您的<a> 元素：

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

id 可以是任何东西，我只是将其命名为“playSomeMusic”以进行测试

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

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

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

【讨论】：

完美运行！ :) 谢谢 EhsanT。

太棒了，玩得开心编码:)