单击该如何在jPlayer中播放链接到的音频文件? [英] how can i play the linked-to audio file in jPlayer, on click?

问题描述

我试图通过查看jPlayer的用户指南并通过来解决此问题关于Stackoverflow的类似问题的答案，但是不幸的是，我使用javascript的能力无法实现建议的答案.

I've tried to resolve this by looking at the user guide for jPlayer and via answers to a similar question on Stackoverflow, but unfortunately my ability with javascript is such that I can't implement the suggested answer.

我已经成功地将jplayer放置在我的网站上，对其进行了样式设置并实现了播放列表.这是javascript(代码段-删除了多余的多余歌曲):

I've successfully placed jplayer on my site, styled it and implemented a playlist no sweat. Here's the javascript (snippet - removed extraneous extra songs):

$(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(同样，只是为了引用一首歌曲而被剪掉):

As well as the automatically-generated playlist, I also want the same audio files to be playable via separate text links elsewhere on the page. Here's the HTML (again, snipped just to refer to one song):

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

我知道我必须通过单击'.track'作为事件来调用jplayer播放功能，如

I understand that I have to call the jplayer play function using a click on '.track' as the event, as in the example linked already, but I'm unable to include this code in the jplayer script I've already setup without breaking the player.

任何值得赞赏的建议(最好使用那些能解释解决方案背后原因的建议，这样我就可以从问题中学习).

Any suggestions much appreciated (those which explain the reasoning behind the solution are preferred, so I can learn from the problem).

推荐答案

我认为最简洁的方法是在标记中包含指向MP3 和 OGG文件的URL，例如:

i think the neatest way would be to include URLs to both MP3 and OGG files in your markup, like:

<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可以同时使用两种格式，以实现最大的浏览器兼容性:

then your javascript could pass both formats, for maximum browser compatibility:

$("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中播放链接到的音频文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！