如何在点击时在 jPlayer 中播放链接到的音频文件？

Posted 2023-04-19

【中文标题】如何在点击时在 jPlayer 中播放链接到的音频文件？

【英文标题】：how can i play the linked-to audio file in jPlayer, on click?

【发布时间】：2012-02-28 08:27:43

【问题描述】：

我试图通过查看 jPlayer 的用户指南和通过answers to a similar question on *** 来解决这个问题，但不幸的是，我对 javascript 的能力如此之高，以至于我无法实现建议的答案。

我已经成功地将 jplayer 放置在我的网站上，对其进行了样式设置并毫不费力地实现了播放列表。这是 javascript（sn-p - 删除无关的额外歌曲）：

$(document).ready(function()

        new jPlayerPlaylist(
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        , [
            
                title:"Opening (The Crows)",
                mp3:"../../audio/mp3/01-Opening_The Crows.mp3",
                oga:"../../audio/ogg/01-Opening_The Crows.ogg"
                   
        ], 
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window"
        );

    );

除了自动生成的播放列表之外，我还希望可以通过页面上其他地方的单独文本链接播放相同的音频文件。这是 html（再次，只是为了引用一首歌而剪掉）：

<a class="track" href="../../audio/mp3/01-Opening_The Crows.mp3">Opening (The Crows)</a>

我知道我必须使用单击“.track”作为事件来调用 jplayer 播放函数，如 the example linked already 中一样，但我无法将此代码包含在我已经设置的 jplayer 脚本中在不破坏播放器的情况下。

任何建议都非常感谢（那些解释了解决方案背后的原因的建议是首选，所以我可以从这个问题中学习）。

【参考方案1】：

        mp3: $(this).attr("data-mp3"), 
        oga: $(this).attr("data-ogg") 

会更好一点

        mp3: $(this).data("mp3"), 
        oga: $(this).data("ogg") 

【讨论】：

这看起来应该作为对@Lloyd 答案的评论发布，而不是在这里作为答案。请考虑审查它。

【参考方案2】：

我认为最好的方法是在您的标记中包含 MP3 和 OGG 文件的 URL，例如：

<a class="track" 
   href="javascript:;" 
   data-mp3="../../audio/mp3/01-Opening_The Crows.mp3" 
   data-ogg="../../audio/ogg/01-Opening_The Crows.ogg">
   Opening (The Crows)</a>

那么您的 javascript 可以通过这两种格式，以获得最大的浏览器兼容性：

$("a.track").live("click", function(e) 
    e.preventDefault();

    $("#jquery_jplayer_1").jPlayer("setMedia", 
         
            mp3: $(this).attr("data-mp3"), 
            oga: $(this).attr("data-ogg") 
        )
        .jPlayer("play");
);

【讨论】：

恐怕不行。单击时，该链接仅表现为通常的 mp3 链接（Firefox - '等待视频）。我尝试将脚本添加为单独的代码段和页面上的原始 jplayer 脚本，但恐怕没有乐趣。有可能我仍然错误地包含了脚本，语法方面 - 有什么想法吗？

哎呀！我忘了打电话给preventDefault 以防止<a> 标签的默认行为发生.. 这有帮助吗？我编辑了我的答案 - 玩弄小提琴来看看它的实际效果..

劳埃德仍然不高兴。使用给定的代码，当单击文本链接时，jplayer 只会丢失其歌曲持续时间轨道——除此之外，我看不到其他任何事情。不幸的是，Fiddle 页面在我的结果页面中只给出了 502 bad gateway 错误。感谢您到目前为止的帮助 - 这绝对是一个悲伤的面孔。

当他们的服务器超载时，您会在 jsFiddle 上收到 502 错误 - 它与代码无关.. 继续尝试.. 一旦您看到代码正常工作并玩过，它可能会变得更多很明显为什么您自己的代码不起作用。

上帝 - 为 IE 编码 CSS。就像派对结束时剩下的醉汉一样——你只知道让他们离开门会涉及哄骗、乞求、大喊大叫，会伤到你的背部，让你感觉浑身发抖。我一生都无法弄清楚为什么 MS 不只是硬着头皮生产出符合标准的浏览器。如果他们在实际开发上花费了他们在IE广告牌上的一小部分...