fix player not second

ykxie
1 parent 96ea1ff6
Showing 6 changed files with 123 additions and 146 deletions
src/css/recording.css
src/js/audioPlayer/theme.default.css
src/js/gbreplayer.js
src/js/recorder/Myna.js
src/player.html
src/scss/recording.scss
@@ -512,42 +512,24 @@ button {
 #audioWrap {
   position: fixed;
-  bottom: 50px;
+  bottom: 0;
   width: 100%;
-  height: 40px;
-  background: #FFF;
+  height: 48px;
+  background-image: url(./image/player_bg2.png);
   display: flex;
   display: inline-flex;
   z-index: 999;
   background-color: #333;
-  padding: 0 32px; }
+  padding: 4px 74px 0 32px;
+  box-shadow: 0px 2px 10px #333; }
-.play-bar {
-  position: fixed;
-  bottom: 0px;
-  width: 100%;
-  height: 48px;
-  background: #FFF;
-  display: flex;
-  display: inline-flex;
-  z-index: 999;
-  background-color: #000000; }
-  .play-bar button {
-    background-color: transparent;
-    border: none;
-    margin-left: 24px; }
-  .play-bar .iconfont {
-    color: #FFF;
-    font-size: 24px; }
-  .play-bar #full-screen, .play-bar #back-screen {
-    position: absolute;
-    right: 46px;
-    margin: 7px 0; }
-  .play-bar #play_audio {
-    width: 60%;
-    margin-left: 24px; }
-  .play-bar #playrecord {
-    margin-left: 24px; }
+#full-screen, #back-screen {
+  background: transparent;
+  color: #FFF;
+  border: transparent;
+  position: absolute;
+  right: 0;
+  margin: 7px 16px; }
 .audio-wrap {
   position: relative; }
@@ -26,10 +26,7 @@
     background: #333;
     border-right: 1px solid #555;
     border-right-color: rgba( 255, 255, 255, .1);
-    background-image: url(./image/player_bg2.png);
     background-repeat: repeat-x;
-    -webkit-box-shadow: 1px 1px 6px #333;
-    box-shadow: 1px 1px 6px #333;
     behavior: url(PIE.htc);
     cursor: pointer;
 }
@@ -56,10 +53,7 @@
     line-height: 40px;
     border-left: 1px solid #111;
     border-left: 1px solid rgba( 0, 0, 0, .25);
-    background-image: url(./image/player_bg2.png);
     background-repeat: repeat-x;
-    -webkit-box-shadow: 1px 1px 6px #333;
-    box-shadow: 1px 1px 6px #333;
     behavior: url(PIE.htc);
     -webkit-user-select: none;
     user-select: none;
@@ -68,10 +62,7 @@
 #componentWrapper .player_progress {
     position: relative;
     height: 40px;
-    background-image: url(./image/player_bg2.png);
     background-repeat: repeat-x;
-    -webkit-box-shadow: 1px 1px 6px #333;
-    box-shadow: 1px 1px 6px #333;
     behavior: url(PIE.htc);
     cursor: pointer;
     flex: 1;
@@ -143,10 +134,7 @@
     line-height: 40px;
     border-right: 1px solid #555;
     border-right: 1px solid rgba( 255, 255, 255, .1);
-    background-image: url(./image/player_bg2.png);
     background-repeat: repeat-x;
-    -webkit-box-shadow: 1px 1px 6px #333;
-    box-shadow: 1px 1px 6px #333;
     behavior: url(PIE.htc);
     -webkit-user-select: none;
     user-select: none;
@@ -165,10 +153,7 @@
     height: 40px;
     border-left: 1px solid #111;
     border-left-color: rgba( 0, 0, 0, .25);
-    background-image: url(./image/player_bg2.png);
     background-repeat: repeat-x;
-    -webkit-box-shadow: 1px 1px 6px #333;
-    box-shadow: 1px 1px 6px #333;
     behavior: url(PIE.htc);
     cursor: pointer;
 }
@@ -192,8 +177,6 @@
     height: 40px;
     background-image: url(./image/player_bg2_vol.png);
     background-repeat: repeat-x;
-    -webkit-box-shadow: 1px 1px 6px #333;
-    box-shadow: 1px 1px 6px #333;
     behavior: url(PIE.htc);
     /*display: none;*/
     cursor: pointer;
@@ -382,9 +382,8 @@ $(function(){
 		                    ,source: "http://gxb-file.oss-cn-beijing.aliyuncs.com/" + coderecords.audioUrl
 		                    ,imagePath: 'js/audioPlayer/image'
 		                    ,debuggers: false
-		                    ,allowSeek: true
+		                    ,allowSeek: false
 		                    ,playCallback: function(){
-		                    	console.log(GBCodePlayBack.records)
 		                    	playCoder();
 		                    }
 		                    ,pauseCallback: function(){
@@ -392,7 +391,7 @@ $(function(){
 		                    }
 		                    ,seekedCallback: function(){}
 		                    ,endedCallback: function(){
-
+		                    	playEnd()
 		                    }
 		                });
@@ -419,10 +418,6 @@ $(function(){
 				});
 			}
-			function play(){}
-
-
-
 			// 使编辑器满屏
 			setTimeout(function(){
 		    	$("#htmlbutton").trigger('click');
@@ -431,6 +426,7 @@ $(function(){
 			/* #STRAT: 播放和暂停控制元素 */
 			$('#play').click(function(){
 				var myAudio = $('#play_audio');
+
 				//禁用修改
 				if(!$('#replaydone').data("readonly")){
 					$('#replaydone').trigger('click');
@@ -542,23 +538,19 @@ $(function(){
 			    GBCodePlayBack.triggertotal = 0;
 			    /* 初始化播放 */
-			    for(var i=0;i<playbackrecord.length;i++){
-			    	playbackrecord[i].trigger = 0;
-			    }
+			    for (var i = 0; i < playbackrecord.length; i++) {
+				     playbackrecord[i].trigger = 0;
+				 }
-			    for(var i=0;i<GBCodePlayBack.recordtimeoutcontrolls.length;i++){
-			    	clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
-			    }	
-			    
+			    for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
+			        clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
+			    }
 			    GBCodePlayBack.recordtimeoutcontrolls = [];
 			    /* END 初始化播放 */
 			    GBCodePlayBack.htmlplayereditor.setValue('');
-			    GBCodePlayBack.cssplayereditor.setValue('');
-			    GBCodePlayBack.jsplayereditor.setValue('');
 			    playbtn.data('status', 0);
-			    $('#play').trigger('click');	
-				
+			    $('#play').trigger('click');
 			});
 			//setting speed in cookie
@@ -617,6 +609,7 @@ $(function(){
 				// 根据不同的角色请求不同的接口播放
 				$('#playrecord').hide();
 				$('#play').show();
+				GBCodePlayBack.htmlplayereditor.setValue('');
 				$('#play').trigger('click');
 				// playCoder()
 			});
@@ -1407,6 +1400,7 @@ $(function(){
 				if (record.compile) {
 					console.log(record.compile)
+					console.log('***************************************************')
 					var resultData = record.compile
 					compileResult(resultData)
 				}
@@ -1629,27 +1623,38 @@ $(function(){
 	// 播放页面-结束播放事件
-	if (document.URL.indexOf('player.html') >= 0) {
-		var play_audio = document.getElementById('play_audio');
-		play_audio.addEventListener("ended", function() {
-			console.log(GBCodePlayBack.records)
-			console.log('结束播放')
-		    $('#play').hide();
-		    $('#playrecord').show();
-		    if (_role == 0) {
-		        $.ajax({
-		            type: "PUT",
-		            url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
-		            success: function(data){
-		            },
-		            error: function(){
-		                console.log('')
-		            }
-		        });
-		    }
-
-		}, false);
-	}
+	// if (document.URL.indexOf('player.html') >= 0) {
+	// 	var play_audio = document.getElementById('play_audio');
+	// 	play_audio.addEventListener("ended", function() {
+	// 		console.log(GBCodePlayBack.records)
+	// 		console.log('结束播放')
+	// 	    $('#play').hide();
+	// 	    $('#playrecord').show();
+	// 	    if (_role == 0) {
+	// 	        $.ajax({
+	// 	            type: "PUT",
+	// 	            url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
+	// 	            success: function(data){
+	// 	            },
+	// 	            error: function(){
+	// 	                console.log('')
+	// 	            }
+	// 	        });
+	// 	    }
+		        
+	//         GBCodePlayBack.triggertotal = 0;
+
+	//         /* 初始化播放 */
+	//         for (var i = 0; i < GBCodePlayBack.records.length; i++) {
+	//     	     GBCodePlayBack.records[i].trigger = 0;
+	//     	 }
+
+	//         for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
+	//             clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
+	//         }
+
+	// 	}, false);
+	// }
 	// 开始录制
@@ -1742,7 +1747,7 @@ $(function(){
 	// 播发代码
 	function playCoder(){
-		console.log(GBCodePlayBack.records)
+		GBCodePlayBack.htmlplayereditor.setValue('');
 		var myAudio = $('#play_audio');
 		//禁用修改
 		if(!$('#replaydone').data("readonly")){
@@ -1752,16 +1757,16 @@ $(function(){
 		$('#recordertab a:eq(1)').tab('show');
 		var playstatus = $('#play').data('status');
-		if(document.URL.indexOf('player.html')>=0){
-			if(playstatus){
-				GBCodePlayBack.pauseData = new Date().getTime();	// 暂停的时间
-				myAudio[0].pause();
-				$('#play').find('i').removeClass('icon-playcopy').addClass('icon-play').attr('data-original-title', '播放');
-			}else{
-				myAudio[0].play();
-				$('#play').find('i').removeClass('icon-play').addClass('icon-playcopy').attr('data-original-title', '暂停');
-			}
-		}
+		// if(document.URL.indexOf('player.html')>=0){
+		// 	if(playstatus){
+		// 		GBCodePlayBack.pauseData = new Date().getTime();	// 暂停的时间
+		// 		myAudio[0].pause();
+		// 		$('#play').find('i').removeClass('icon-playcopy').addClass('icon-play').attr('data-original-title', '播放');
+		// 	}else{
+		// 		myAudio[0].play();
+		// 		$('#play').find('i').removeClass('icon-play').addClass('icon-playcopy').attr('data-original-title', '暂停');
+		// 	}
+		// }
 		if(!playstatus){
 			var playbackrecord = GBCodePlayBack.records,
@@ -1922,6 +1927,33 @@ $(function(){
 		recorder.pause();	// 继续录制
 	}
+	function playEnd(){
+	    $('#play').hide();
+	    $('#playrecord').show();
+	    if (_role == 0) {
+	        $.ajax({
+	            type: "PUT",
+	            url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
+	            success: function(data){
+	            },
+	            error: function(){
+	                console.log('')
+	            }
+	        });
+	    }
+	        
+        GBCodePlayBack.triggertotal = 0;
+
+        /* 初始化播放 */
+        for (var i = 0; i < GBCodePlayBack.records.length; i++) {
+    	     GBCodePlayBack.records[i].trigger = 0;
+    	 }
+
+        for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
+            clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
+        }
+	}
+
 });	
@@ -5,8 +5,8 @@
     var HZRecorder = function(stream, config) {
         config = config || {};
-        config.sampleBits = config.sampleBits || 16; //采样数位 8, 16
-        config.sampleRate = config.sampleRate || (44100 / 6); //采样率(1/6 44100)
+        config.sampleBits = config.sampleBits || 8; //采样数位 8, 16
+        config.sampleRate = config.sampleRate || 44100; //采样率(1/6 44100)
         var context = new(window.webkitAudioContext || window.AudioContext)();
         var audioInput = context.createMediaStreamSource(stream);
@@ -17,7 +17,7 @@
             size: 0,   //录音文件长度
             buffer: [],  //录音缓存
             inputSampleRate: context.sampleRate, //输入采样率
-            inputSampleBits: 16, //输入采样数位 8, 16
+            inputSampleBits: 8, //输入采样数位 8, 16
             outputSampleRate: config.sampleRate, //输出采样率
             oututSampleBits: config.sampleBits, //输出采样数位 8, 16
             input: function(data) {
@@ -130,11 +130,19 @@
             </div>
         </div>
-        <div class="" id="audioWrap" style="bottom: 50px;">
+        <div class="" id="audioWrap">
+            <button id="full-screen">
+                <i class="icon iconfont icon-fangda"></i>
+            </button>
+            <button id="back-screen" style="display: none;">
+                <i class="icon iconfont icon-fangda"></i>
+            </button>
         </div>
-
-        <div class="play-bar">
+        <button id="play" class="" style="display: none;" data-status='0' title="暂停">
+            <i class="icon iconfont icon-playcopy"></i>
+        </button>
+<!--         <div class="play-bar">
             <button id="playrecord" data-status='0' title="播放">
                 <i class="icon iconfont icon-play"></i>
             </button>
@@ -146,13 +154,8 @@
                 <div class="audio-disable"></div>
                 <div class="shadow"></div>
             </div>
-            <button id="full-screen">
-                <i class="icon iconfont icon-fangda"></i>
-            </button>
-            <button id="back-screen">
-                <i class="icon iconfont icon-fangda"></i>
-            </button>
-        </div>
+            
+        </div> -->
     </div>
@@ -669,51 +669,28 @@ button{
 // Player 样式
 #audioWrap{
     position: fixed;
-    bottom: 50px;
+    bottom: 0;
     width: 100%;
-    height: 40px;
-    background: #FFF;
+    height: 48px;
+    background-image: url(./image/player_bg2.png);
     display: flex;
     display: inline-flex;
     z-index: 999;
     background-color: #333;
-    padding: 0 32px;
+    padding: 4px 74px 0 32px;
+    box-shadow: 0px 2px 10px #333;
 }
-.play-bar{
-    position: fixed;
-    bottom: 0px;
-    width: 100%;
-    height: 48px;
-    background: #FFF;
-    display: flex;
-    display: inline-flex;
-    z-index: 999;
-    background-color: #000000;
-    
-    button{
-        background-color: transparent;
-        border: none;
-        margin-left: 24px;
-    }
-    .iconfont{
-        color: #FFF;
-        font-size: 24px;
-    }
-    #full-screen, #back-screen{
-        position: absolute;
-        right: 46px;
-        margin: 7px 0;
-    }
-    #play_audio{
-        width: 60%;
-        margin-left: 24px;
-    }
-    #playrecord{
-        margin-left: 24px;
-    }
+#full-screen, #back-screen{
+    background: transparent;
+    color: #FFF;
+    border: transparent;
+    position: absolute;
+    right: 0;
+    margin: 7px 16px;
 }
+    
 // Player