jplayer 播放器的使用

jplayer 是一个纯 js 的播放器框架，主要是用于在 web 页面中嵌入 js 播放器

 

播放器的样式大概如下：

 

jplayer 的使用方法也非常简单

 

使用方法：

1 在 html 的 部分，将 jplayer 的 css 样式文件、 jplayer 的 js 文件包含进来。

 

 

 

2 在 中定义播放器的形状、各种按钮（播放、停止）、音量调节、时间调节等信息

 

    
    
    
    
    
    
    
    




   
    


	

		

			

				play
				stop
			
			

				

					

				
			
			

				mute
				max volume
				

					

				
			
			

				
 
				
 
				

					repeat
				
			
		
		

			
 
		
		

			Update Required
			To play the media you will need to either update your browser to a recent version or update your Flash plugin.
		
	

   

 

 

3 在 javascript 中，设置媒体、swfpath、支持的格式、是否自动播放等

 

    
    
    
    
    
    
    
    
      $(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				title: "Bubble",
				m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
				oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
			});
		},
		swfPath: "../../dist/jplayer",
		supplied: "m4a, oga",
		wmode: "window",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});
});



   
    


	

		

			

				play
				stop
			
			

				

					

				
			
			

				mute
				max volume
				

					

				
			
			

				
 
				
 
				

					repeat
				
			
		
		

			
 
		
		

			Update Required
			To play the media you will need to either update your browser to a recent version or update your Flash plugin.
		
	

   

 

通过上面的三步，就可以在页面中定义一个播放器了。

 

要想更换语音文件进行播放时，直接在相关的方法中，重新设置 media 就行了。

function changeMedia() {

     $("#jquery_jplayer_1").jPlayer("setMedia",{title:"titlename",mp3:"voices/test.wav"});

}