jplayer多個實例一頁 - 但是數量是可變的

我目前正在使用jPlayer爲用戶提供一些音頻播放功能，如果他們希望聽到音頻樣本，那麼用戶首先會創建一個輕微複雜的搜索，可以在結果頁面上返回可變數量的音頻文件。jplayer多個實例一頁 - 但是數量是可變的

我已經看過jPlayer的文檔，它看起來像你需要爲你想播放的每個音頻文件創建一個jPlayer實例，它們的例子是硬編碼的，如果你知道你會得到相同的每次搜索樣本時結果的數量。但是對於我來說，1次搜索可以返回1個剪輯，而另一次搜索可能會返回60個剪輯

我試圖實現jplayer這樣的多個實例，但無濟於事，因爲我沒有音頻輸出。

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

如何爲每個音頻剪輯創建一個新的jplayer實例？下面是從文檔的例子，

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

在從源頭上採取

http://jplayer.org/latest/demo-03/

來源

2011-11-24 Udders

你怎麼會這麼解決你的問題？ – Lloyd

是的，我們重新建模頁面，所以我們不需要多個實例。 – Udders

你是怎麼做到的？ – AmITheRWord

你的情況

你只需要jPlayer的一個實例。如果你的搜索結果HTML是這樣的：

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

，那麼你可以添加這個JavaScript播放的曲目：

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

來源

2011-11-27 21:52:02 Lloyd

使用這樣的：http://kolber.github.io/audiojs/ 我有這個在我的投資組合的網站我的工作在它的工作很細到現在爲止和我這需要大量的配樂組合

希望它有助於

來源

2013-05-05 17:36:42

jplayer多個實例一頁 - 但是數量是可變的

回答

相關問題