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

Question

我试图通过查看 jPlayer 的用户指南和通过answers to a similar question on Stackoverflow 来解决这个问题，但不幸的是，我对 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 脚本中在不破坏播放器的情况下。

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

Answer 1

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

会更好一点

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

Answer 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");
});