2014-10-20 106 views
0

我已经设置了多个曲目的jPlayer,我想要自动播放所有的同步,我已经添加了曲目,并且它们都可以自动播放,我怎样才能让它们自动播放全部加载?我想我可以通过事件做到这一点,但我不知道如何做到这一点。JPlayer - 同步播放曲目

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
\t \t $('.ui-slider-handle').draggable(); \t  
 
\t \t 
 
\t \t // Base Track 
 
\t  $("#base-track").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Base Track", 
 
\t     mp3: "audio/track1/audio_test_layer_base.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0.8, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
\t  \t  
 
\t  
 
\t  // Track 1 
 
\t  $("#jquery_jplayer_1").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Layer 1", 
 
\t     mp3: "audio/track1/audio_test_layer1.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3, oga", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0.0, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
     $('#slider').slider({ 
 
     min: 0, 
 
\t \t max: 1, 
 
\t \t range: "min",   
 
\t \t step: 0.01, 
 
     value: 0, 
 
     orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
     \t \t \t var volume = ui.value/1; 
 
     \t \t \t $("#jquery_jplayer_1").jPlayer("volume", volume); 
 
        $('#scene1').css('opacity', ui.value) 
 
    \t \t }    
 
     }) 
 
    
 
\t  // Track 2 
 
\t  $("#jquery_jplayer_2").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Layer 2", 
 
\t     mp3: "audio/track1/audio_test_layer2.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0.3, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
\t  $('#slider2').slider({ 
 
     min: 0, 
 
     max: 1, 
 
     step: 0.01, 
 
     value: 0.3, 
 
     orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
     \t \t \t var volume = ui.value/1; 
 
     \t \t \t $("#jquery_jplayer_2").jPlayer("volume", volume); 
 
        $('#scene2').css('opacity', ui.value) 
 
    \t \t }     
 
     }) 
 

 
\t  // Track 3 
 
\t  $("#jquery_jplayer_3").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Layer 3", 
 
\t     mp3: "audio/track1/audio_test_layer3.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0.0, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
\t  $('#slider3').slider({ 
 
     min: 0, 
 
     max: 1, 
 
     step: 0.01, 
 
     value: 0, 
 
     orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
     \t \t \t var volume = ui.value/1; 
 
     \t \t \t $("#jquery_jplayer_3").jPlayer("volume", volume); 
 
        $('#scene3').css('opacity', ui.value) 
 
    \t \t }     
 
     }) 
 
    
 
\t  // Track 4 
 
\t  $("#jquery_jplayer_4").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Layer 4", 
 
\t     mp3: "audio/track1/audio_test_layer4.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
\t  $('#slider4').slider({ 
 
     min: 0, 
 
     max: 1, 
 
     step: 0.01, 
 
     value: 0, 
 
     orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
     \t \t \t var volume = ui.value/1; 
 
     \t \t \t $("#jquery_jplayer_4").jPlayer("volume", volume); 
 
        $('#scene4').css('opacity', ui.value) 
 
    \t \t }     
 
     }) 
 

 

 
\t  // Track 5 
 
\t  $("#jquery_jplayer_5").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Layer 5", 
 
\t     mp3: "audio/track1/audio_test_layer5.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0.8, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
\t  $('#slider5').slider({ 
 
     min: 0, 
 
     max: 1, 
 
     step: 0.01, 
 
     value: 0.8, 
 
     orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
     \t \t \t var volume = ui.value/1; 
 
     \t \t \t $("#jquery_jplayer_5").jPlayer("volume", volume); 
 
        $('#scene5').css('opacity', ui.value) 
 
    \t \t }     
 
     }) 
 

 
\t  // Track 6 
 
\t  $("#jquery_jplayer_6").jPlayer({ 
 
\t   ready: function(event) { 
 
\t    $(this).jPlayer("setMedia", { 
 
\t     title: "Layer 6", 
 
\t     mp3: "audio/track1/audio_test_layer6.mp3" 
 
\t  \t }).jPlayer("play"); 
 
\t \t }, 
 
\t \t \t ended: function() { 
 
\t  \t \t $(this).jPlayer("play"); 
 
\t \t \t }, 
 
\t   swfPath: "/js", 
 
\t   supplied: "mp3", 
 
\t \t \t preload: "auto", 
 
\t  \t volume: 0.0, 
 
\t  \t muted: false,  
 
\t  }); 
 
\t  
 
\t  $('#slider6').slider({ 
 
     min: 0, 
 
     max: 1, 
 
     step: 0.01, 
 
     value: 0, 
 
     orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
     \t \t \t var volume = ui.value/1; 
 
     \t \t \t $("#jquery_jplayer_6").jPlayer("volume", volume); 
 
        $('#scene6').css('opacity', ui.value) 
 
    \t \t }     
 
     })   
 
     
 
     
 
    });</script>

回答

0

您可以添加预压:加载后开始播放时,“自动”将使轨道:“自动”,以jplayer 作为 jPlayer支持HTML5预加载参数,从而增加预紧所以所有的曲目都会在同一时间播放。对于轨道3

例子:

$("#jquery_jplayer_3").jPlayer({ 
     ready: function(event) { 
      $(this).jPlayer("setMedia", { 
       title: "Layer 3", 
       mp3: "audio/track1/audio_test_layer3.mp3" 
     }).jPlayer("play"); 
    }, 
     ended: function() { 
      $(this).jPlayer("play"); 
     }, 
     preload: 'auto',//here add it to all tracks 
     swfPath: "/js", 
     supplied: "mp3", 
     preload: "auto", 
     volume: 0.0, 
     muted: false,  
    }); 

我希望它帮你

一个愉快的一天