Question

我试图通过查看jPlayer的用户指南并通过answers to a similar question on Stackoverflow来解决这个问题，但不幸的是我的javascript能力使得我无法实现建议的答案。

我已成功将jplayer放置在我的网站上，对其进行样式设置并实现了一个没有汗水的播放列表。这是javascript（片段 - 删除无关的额外歌曲）：

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

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

2 个答案: