JPlayer -同步播放曲目

Question

我已经设置了多个曲目的jPlayer，我想要自动播放所有的同步，我已经添加了曲目，他们都自动播放很好，我怎么才能让他们一起自动播放时，他们都加载了？我想我可以通过事件做到这一点，但我不确定如何做到这一点。

​

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

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


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

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

​

Answer 1

您可以添加preload：'auto‘到jplayer，因为jPlayer支持HTML5 preload参数，这样添加preload：'auto’将使曲目在加载时开始播放，这样所有曲目都将在同一时间播放。

曲目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,    
    }); 

我希望这对你有帮助

祝您今天愉快