English 中文(简体)
单页,但数额是可变的
原标题:jplayer multiple instances one page - however the amount is variable

目前,我正与jPlayer合作,向用户提供一些声响反馈,如果他们希望听到一个声音样本的话,那么用户首先会进行搜索,从而可以在结果页上归还数量可变的音频文件。

我看看了“jPlayer”的笔试,并像你需要为你希望制作的每份音频文件创建“灯塔”,其实例是硬成章的,如果你知道,你每次找一个样本时都会获得同样数目的成果。 但是,就我而言,1次搜查可以回去1只剪切片,而另一次搜查可回60个剪辑。

我曾尝试过像这样多的玩笑,但是由于我没有听音结果,我没有结果。

$( .jp-audio ).each(function(index) {
        var count = index+1;
        $(this).attr("id", "jp_container_"+count)
        $(".jp-stop").hide();
        $("#jquery_jplayer_"+index+1).jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        mp3:$(this).find( a.jp-play ).attr( rel ),
                        wav:$(this).find( a.jp-play ).attr( rel )
                    });
                },
                play: function() { // To avoid both jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
                },
                swfPath: "/media/js/jPlayer",
                solution: "flash, html",
                supplied: "mp3, wav",
                wmode: "window",
                preload: "auto"
            });
        $( body ).append("<div id= jquery_jplayer_"+count+"  class= jp-jplayer ></div>");
    });

我怎么能为我的每一个录音剪辑创造新的玩笑? The following is the example from the Docs,

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },
    repeat: function(event) { // Override the default jPlayer repeat event handler
        if(event.jPlayer.options.loop) {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                $(this).jPlayer("play");
            });
        } else {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                $("#jquery_jplayer_2").jPlayer("play", 0);
            });
        }
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    wmode: "window"
});

$("#jquery_jplayer_2").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },
    repeat: function(event) { // Override the default jPlayer repeat event handler
        if(event.jPlayer.options.loop) {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                $(this).jPlayer("play");
            });
        } else {
            $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
            $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                $("#jquery_jplayer_1").jPlayer("play", 0);
            });
        }
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    cssSelectorAncestor: "#jp_container_2",
    wmode: "window"
});

$("#jquery_jplayer_3").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    cssSelectorAncestor: "#jp_container_3",
    wmode: "window"
});

$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
$("#jplayer_inspector_3").jPlayerInspector({jPlayer:$("#jquery_jplayer_3")});

摘自来文方,

rel=“nofollow”>http://jplayer.org/latest/demo-03/

问题回答

在你的情况下,你只需要一名陪审员。 如果找你的结果超文本的话:

<ul> 
    <li data-m4a-path="http://www.example.com/track.m4a">Artist - Track</li>
    < ... >
</ul>

那么,你可以添加这一 j,以发挥以下作用:

$("li[data-m4a-path]").click(function () {
   $("#jquery_jplayer_1").jPlayer("setMedia", {m4a: $(this).attr("data-m4a-path")}); 
});

use this: http://kolber.github.io/audiojs/ i have this on my portfolio website i m working on and it s working very fine until now and i need this a lot on a soundtrack portfolio

希望它有助于





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签